关于Ajax的实现

AJAX:Asynchronous Javascript And XML.异步的JavaScript和XML.

同步请求:

异步请求:

1.1.1    XMLHttpRequest对象的介绍:

方法:

* open(请求方式,请求路径,是否异步);

* send(发送的数据);

* setRequestHeader(“头信息”,”头信息的值”);

属性:

* onreadystatechange:监听对象的状态的改变.

* readyState         :对象状态.

　　* 0  :对象没有初始化

　　* 1  :读取中

　　* 2  :已经读取

　　* 3  :交互中

　　* 4  :完成

* responseText       :响应文本.

* responseXML        :响应XML.

* status             :服务器响应状态码.

1.1.2    AJAX入门案例:

* AJAX开发流程:

　　* 1.创建XMLHttpRequest对象.

　　* 2.设置对象改变触发的一个函数.（回调函数）onreadystatechange=function(){}

　　* 3.设置请求路径.open();

　　* 4.发送数据.send();

创建XMLHttpRequest:

 // 创建一个XmlHttpRequest对象
 function createXmlHttpRequest(){
     var xmlHttp;
     try { //Firefox, Opera 8.0+, Safari
         xmlHttp = new XMLHttpRequest();
     }catch (e) {
         try { //Internet Explorer
             xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
         }
         catch (e) {
             try {
                 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
             }
             catch (e) {
             }
         }
     }
     return xmlHttp;
 }

编写AJAX的流程的代码:(GET请求,提交了参数)

 function visit(){
     //1.创建XMLHttpRequest对象
     var xhr = createXmlHttpRequest();
     //2.设置对象状态改变触发的函数
     xhr.onreadystatechange = function(){
         // 判断如果对象的状态为4.
         if(xhr.readyState == 4){
             // 判断状态码为200 成功的时候.
             if(xhr.status == 200){
                 // 获得响应文本
                 var data = xhr.responseText;
                 // 获得div
                 document.getElementById("div1").innerHTML = data;
             }
         }
     };
     //3.打开异步请求
     xhr.open("GET","/day23/demo1?"+new Date().getTime()+"&id=3&name=aa",true);
     //3.发送数据
     // send发送数据是POST的
     xhr.send(null);
 }