美文网首页
实例应用

实例应用

作者: 黎涛note | 来源:发表于2017-12-08 22:29 被阅读0次
index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
        var  xmlHttp;
        function createXMLHttpRequest(){
            if (window.ActiveXObject) {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");//IE5 . 6
            } else if (window.XMLHttpRequest){
                xmlHttp = new XMLHttpRequest;
            }
        }
         
        function createQueryString (){
            var userName = document.getElementById("userName").value;
            var userBirth = document.getElementById("userBirth").value;
            var queryString = "userName="+userName+"&userBirth="+userBirth;
            return queryString ;
        }
        
        /**
        当readyState属性的值发生改变时候就会激活此函数来执行
        **/
        function handlestatechange(){
            if(xmlHttp.readyState == 4){ 
                if(xmlHttp.status == 200){
                    var content = xmlHttp.responseText;
                    document.getElementById("content").innerHTML = content;
                }
            }
        }
        
        function startGet(){
            createXMLHttpRequest();
            var url = "request.jsp?timestamp="+ new Date().getTime();
            xmlHttp.open("get", url+"&"+createQueryString, true);
            xmlHttp.send(null);
            xmlHttp.onreadystatechange = handlestatechange;
        }
        
        function startPost(){
            createXMLHttpRequest();
            var url = "request.jsp?timestemp="+ new Date().getTime();
            xmlHttp.open("post", url, true);
            xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xmlHttp.send(createQueryString);
            xmlHttp.onreadystatechange = handlestatechange;
        }
        
        window.onload = function(){
            document.getElementById("btnGet").onclick = startGet;
            document.getElementById("btnPost").onclick = startPost;
        }
</script>

</head>
<body>
               <h2>请输入你的名字和生日</h2>
              名字<input type="text" name ="userName" id ="userName"/><br/>
              生日<input type="text" name ="userBirth" id ="userBirth"/><br/>
                <input type="button" name ="btnGet" id ="btnGet" value="Get"/><br/>
                <input type="button" name ="btnPost" id ="btnPost" value="Post"/><br/>
                
                <div id ="content"></div>
</body>
</html>
request.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<% 
         String userName = request.getParameter("userName"); 
         String userBirth = request.getParameter("userBirth"); 
     
         if (request.getMethod().equals("get")||request.getMethod().equals("Get")||request.getMethod().equals("GET")){
             out.println("Get : " +userName + ", your Birth is " +userBirth);
         } else {
             out.println("Post : " +userName + ", your Birth is " +userBirth);
         }
%>


相关文章

网友评论

      本文标题:实例应用

      本文链接:https://www.haomeiwen.com/subject/jbgcrxtx.html