精美而实用的网站，关注web编程技术、网站运营、SEO推广，让您轻松愉快的学习

ajax异步请求代码可以实现不重新加载页面的情况下更新网页，也可以实现异步更新数据，或者向后台发送请求而不影响当前页面加载。

1.XMLHttpRequest对象：

XMLHttpRequest 对象用于在后台与服务器交换数据，他可以：

1) 在不重新加载页面的情况下更新网页

2) 在页面已加载后从服务器请求数据

3) 在页面已加载后从服务器接收数据

4) 在后台向服务器发送数据

所有现代的浏览器都支持 XMLHttpRequest 对象。

2.XMLHttpRequest的方法：

XMLHttpRequest对象的方法不多，下面是一些最基本的方法：

a. abort（）：停止发送当前请求。

b. getAllReponseHesders（）：获取服务器返回的全部响应头。

c. getReponseHesders（“headersLabel”）：根据响应头名字，获取对应的响应头。

d. Open（“method”，url，“[，asyncFlag[，“username“[，”password“]]]”）：与服务器建立url连接，并设置请求方法提供信息。

e. Send（content）：发送请求，content是请求参数。

f. setRuestHeader（”label“，”value“）：在发送请求前先设置请求头。

3.原生ajax代码步骤：

1) 定义XMLHttpRequest对象

2) 与服务器建立连接

3) 发送请求

4) 接受来自服务器的信息并处理

4.原生ajax代码：

<!doctype html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>ajax</title>  
 <script src="ajax.js"></script>  
  <script type="text/javascript">  
  window.onload = function(){  
    var xmlrequest;  
    //完成XMLHttpRequest初始化  
    function creatXMLHttpRequest(){  
      if(window.XMLHttpRequest){ //判定兼容性  
        xmlrequest= new XMLHttpRequest(); //Dom2浏览器  
      }  
      else if(window.ActiveXObject){  //IE浏览器  
        try{  
          xmlrequest= new ActiveXObject("msxml2.XMLHTTP");  
        }catch(e){  
          try{  
            xmlrequest= new ActiveXObject("Microsoft.XMLHTTP");  
          }catch(e){}  
        }  
      }  
    }  
    function change(url){//接受请求响应的URL  
      creatXMLHttpRequest();  
      xmlrequest.open("POET",url,true);//连接服务器  
      xmlrequest.setRequestHeader("content-Type","applicaion/x-www-form-urlencoded");  
      //设置请求头编码方式  
      xmlrequest.onreadystatechange = processResponse;  
      xmlrequest.send(null);  //发送请求  
    }  
    //定义处理响应的回调函数  
    function processResponse(){  
      if(xmlrequest.status ==4){  
        if(xmlrequest.status ==200){  //请求成功  
          var headers = xmlrequest.getAllResponseHeaders();  
          alert("响应头类型"+typeof headers+"\n"+headers);  
          document.getElementById('odiv').innerHTML = headers;   //请求成功后要做的事情  
        }  
        else{  
          window.alert("请求页面有异常");  
        }  
      }  
    }  
}  
  </script>  
 </head>  
 <body>  
  <div id="odiv"></div>  
 </body>  
</html>

上述代码中，系统采用post方法发送请求，当请求得到响应后，使用getAllResponseHeaders()方法获取所有的请求头，并将其输出，当然这里可以做其他的事情。

GET请求会将参数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体内容发送给WEB服务器。当然在Ajax请求中，这种区别对用户是不可见的。

Tags：JavaScript ajax 异步请求