原生态Ajax

JSP页面:

<script type="text/javascript">
//JavaScript
var xmlhttp; //核心对象;
function createXMLHttp(){ //这个函数用来创建一个 核心对象XmlHttpRequest 根据浏览器的不同,创建不同的 
    if(window.XMLHttpRequest){ 
        //alert('标准');
        xmlhttp=new XMLHttpRequest();
        }
    else{ xmlhttp=new ActiveXObject("MSXML2.XMLHTTP"); //IE浏览器 
    }
}
    function check(){
        /*  //Get方式
            var uname=document.getElementById("uname").value;
           //alert(uname);
           createXMLHttp();
           xmlhttp.open("get","AjaxTest?uname="+uname,true); 
           //open里面函数值分别是“传值方式”、“目标网页”、“是否异步”,send中不用写任何东西
           xmlhttp.send();     //发送数据
           xmlhttp.onreadystatechange=change;     //回调函数;显示服务器返回的数据的函数  */
   
            //Post方式  1.POST第二行要设置响应头,固定的!!!!!! 
            //            2.POST发送的数据用&隔开
           var uname=document.getElementById("uname").value;
           //alert(uname);
           createXMLHttp();
           xmlhttp.open("post","AjaxTest",true); //servlet 对应相应的 servlet url
           xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
           xmlhttp.send("uname="+uname);     //发送数据
           xmlhttp.onreadystatechange=change;     //回调函数;显示服务器返回的数据的函数  
    }
           /* xmlhttp的send是传递参数用的,但是只有在使用post方式提交请求的时候才有用。
           比如:xmlhttp.open("post",url,true); xmlhttp.send("data=data&data2=data2");
           用get的话一般就是:xmlhttp.open("get",url,true); xmlhttp.send(null);

           XMLHttpRequest.send()发送一个 HTTP 请求

           语法

           send(body)

           如果通过调用 open() 指定的 HTTP 方法是 POST 或 PUT,body 参数指定了请求体,作为一个字符串或者 Document 对象。

           如果请求体不适必须的话,这个参数就为 null。

           对于任何其他方法,这个参数是不可用的,应该为 null(有些实现不允许省略该参数)*/
           
        function change(){   
      
            if(xmlhttp.readyState==4){
                if(xmlhttp.status==200){
             
                   var value= xmlhttp.responseText;    //字符串方式返回(与Servlet中对应)
                   document.getElementById("result").innerHTML=value; //在页面上显示返回结果
                }
            }
        }

</script>
</head>
<body>
<form action="">
       用户名:<input type="text" name="uname" id="uname"/>
       <input type="button" value="检查用户名" onclick="check();"/>
       <span id="result"></span>
</form>  

Servlet:

System.out.println("AjaxTest");
        String uname=request.getParameter("uname");
        System.out.println("uname:"+uname);
        response.setContentType("text/html;charset=UTF-8");
        request.setCharacterEncoding("UTF-8");
        PrintWriter out = response.getWriter();
      
        StringBuffer sb=new StringBuffer();
        if("admin".equals(uname)){
            sb.append(uname+"巳注册");
        }
        else{
            sb.append(uname+"可以使用");
        }
        out.print(sb);   //向客户输出 IE
       
        out.flush();
        out.close();

猜你喜欢

转载自blog.csdn.net/yushouxiang2014/article/details/81121568