Ajax实现步骤和原理

1.获取ajax异步对象

     IE4~IE12 : 使用new ActiveXObject("microsoft.xmlhttp");

     非IE ： 使用new XMLHttpRequest();

2.ajax.open(method,url);

     method是提交方式  有 get和post两种

     url是提交路径

3.ajax.send()

4.ajax.onreadystatechange 这是一个监听函数

     包括五中状态码：

          0—ajax异步对象建立完毕，可是还未发送

          1—ajax已经调用了open()方法，可是还未调用send()方法

          2—已经调用send(),可是还未到达服务器端

          3—表示请求已经到达服务端，正在服务端的处理，可是还未响应返回

          4—ajax已经彻底接收了服务器的响应信息，可是状态码未必是正确的

                   状态码有：

                                        200：正确

                                       404/500：错误

                                                   ps：a. 每一个浏览器的0，1,2,3这四种状态显示的不同，可是4这个状态码每

                                                           个浏览器都 有，因此咱们只须要使用4便可

                                                           b.  0.1.2.3.4是ajax中的响应码，200/404/500是web中的状态码

5.ajax.readyState == 4

6.ajax.status == 200;

7.获取值  ajax.requestText或者ajax.requestXML

例1get：

   
   
   
   

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

   
   
   
   
<script type="text/javascript"> //定位文本框，同时提供焦点失去事件 document.getElementById("usernameID").onblur = function(){ //获取文本框中输入的值 var username = this.value; //若是用户没有填内容 if(username.length == 0){ //提示  document.getElementById("resID").innerHTML = "用户名必填"; }else{ //对汉字进行UTF-8(U8)的编码 username = encodeURI(username); //NO1) var ajax = createAJAX(); //NO2) var method = "GET"; var url = "${pageContext.request.contextPath}/UserServlet?time="+new Date().getTime()+"&username=" + username; ajax.open(method,url); //NO3) ajax.send(null);  //--------------------------------------------------------等待  //NO4) ajax.onreadystatechange = function(){ if(ajax.readyState == 4){ if(ajax.status == 200){ //NO5) var tip = ajax.responseText; //NO6) document.getElementById("resID").innerHTML = tip; } } } } } </script>

例2：post

   
   
   
   

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

    
    
    
    

   
   
   
   
<script type="text/javascript"> document.getElementById("usernameID").onblur = function(){ var username = this.value;//杰克 //NO1) var ajax = createAJAX(); //NO2) var method = "POST"; var url = "${pageContext.request.contextPath}/UserServlet?time="+new Date().getTime(); ajax.open(method,url); //设置AJAX请求头为POST，他会将请求体中的汉字自动进行UTF-8的编码 ajax.setRequestHeader("content-type","application/x-www-form-urlencoded"); //NO3) var content = "username=" + username; ajax.send(content);   //===========================================等待   //NO4) ajax.onreadystatechange = function(){ if(ajax.readyState == 4){ if(ajax.status == 200){ //NO5) var tip = ajax.responseText;  //NO6) //建立img标签 var imgElement = document.createElement("img"); //设置img标签的src/width/height的属性值 imgElement.src = tip; imgElement.style.width = "12px"; imgElement.style.height = "12px"; //定位span标签 var spanElement = document.getElementById("resID"); //清空span标签中的内容 spanElement.innerHTML = ""; //将img标签加入到span标签中 spanElement.appendChild(imgElement); } } } } </script>

来自为知笔记(Wiz)