Ajax异步传输步骤及示例

Ajax：异步传输步骤：
1、XMLHttpRequest对象的创建
2、设置请求方式及请求地址
3、设定请求的细节（不是必须的）
4、发送请求
5、响应

1、XMLHttpRequest对象的创建
方法一：
var request = new XMLHttpRequest;
var request = new ActiveXObject(“Microsoft.XMLHTTP”);

    方法二：
        var request = "";
        function createXmlRequest(){
            if(window.XMLHttpRequest){
                request = XMLHttpRquest();
            }else if(window.ActiveXObject){
                request = ActiveXObject();
            }else{
                alert("不支持Ajax");
            }
        }
    如果将var reques=""写在函数内部，则在函数结束return request  如下
        function createXmlRequest(){
            var request="";
            if(window.XMLHttpRequest){
                request = XMLHttpRquest();
            }else if(window.ActiveXObject){
                request = ActiveXObject();
            }else{
                alert("不支持Ajax");
            }
                return request;
        }

2、设置请求方式及请求地址
request.open(“GET” “路径”);

        void open(String method,String url,boolean asynch);
        建立对服务器的调用，method参数可以是GET、POST或者PUT。
        url参数可以是相对URL或者绝对URL，参数asynch来指示调用
        asynch:采用的是同步还是异步，默认为true，采用异步调用，如果为false，
        处理就会等待，直到服务器返回响应为止。

3、设定请求的细节 ——> 不是必须的
setRequestHeader();
void setRequestHeader(String header,String value)
这个方法为HTTP请求中一个给定的首部字段设置值，这个方法必须在调用open()方法之后才能调用。

4、 发送请求
request.send(null); 请求主体内容，如果没有，为null,或者省略。

        void send(content)
            向服务器发出异步请求，如果请求是异步的，
            这个方法就会立即返回，否则它会等待直到接受到服务器的返回响应为止。
            输入的content可以是DOM的实例对象、输入流或者字符串，
            传入这个方法的内容作为请求体的一部分发送。若send(null)则请求体为空。

5、响应
onreadystatechange
每次XMLHttpRequest对象的状态改变时都会触发这个事件处理器，这个事件处理器通常会调用一个JavaScript函数去执行相关的代码。

    request.onreadystatechange = function(){
         if(request.readyState === 4 && request.status ===200){
                有响应的信息
                通过某些特定的方式拿到服务器给我们的相应信息，服务器能够传递给我们常用文本格式: json  xml  html  text
                responseText：相应的信息，表示为一个文本内容。
                展示
        }


    取得响应
        调用形式为 ： request.xxxx

           status         以数字形式返回HTTP状态码    
            200                     OK
            404                 Not Found
            403             forbidden   JSONP
            500                 后台代码异常
        statusText  以文本形式返回HTTP状态码  OK  Not Found
        getResponseHeader()     获取指定响应头
        getAllResponseHeaders() 获取所有响应头
        responseText    获取文本形式的响应体
        responseXML     获取Document形式的响应体
        readyState      返回HTTP请求状态
            0   open()尚未调用  UNSENT
            1   open()已调用       OPENED
            2   接收到头信息      HEADERS_RECEIVED
            3   接收到响应主体     LOADING
            4   响应完成            DONE
        readystatechange 请求状态改变事件
        当readyState值改变为4或服务器的响应完成时，所有的浏览器都触发该事件

        /*
          获取HTTP响应
        */
        function getText(url,callback){
            var request = new XMLHttpRequest();
            request.open("GET",url);
            request.onreadystatechange = function(){
                //如果请求完成，并且请求成功
                if(request.readyState === 4 && request.status ===200){
                    var type = request.getResponseHeader("Content-type");
                    if(type.match(/^text/)){    //如果响应是文本
                        callback(request.responseText);//执行回调函数
                    }
                }
            };
            request.send(null);
        }

示例代码：

//1.准备 XMLHttpReques
window.οnlοad=function(){
var request = new XMLHttpRequest(); //第一步 创建 XmlHttpRequest对象
request.open("GET","xxx") // 设置请求方式
request.send(null);
request.onreadystatechange=function(){
if(request.readyState===4 && request.status===200){
var xx = request.responseText; //取到相应的内容
showNum(xx); //封装一个方法 将响应到的数据放到表格中
}
}
// var stus=xx;
var tbody = document.getElementsByTagName('tbody')[0];
function showNum(stus){
//转换为数组
var arr = JSON.parse(stus);
arr.forEach(function(item){
//tr
var tr = document.createElement("tr");
for(var attr in item){
var td = document.createElement("td");
td.innerHTML=item[attr];
tr.appendChild(td);
}
tbody.appendChild(tr);
});
}
}