原生js实现ajax

Ajax

ajax是一个异步请求数据的技术。
浏览器有提供相关的对象：window.XMLHttpRequest 或 window.ActiveXObject。

发送Ajax请求过程如下：

1. 创建 XMLHttpRequest 对象
2. 监听状态 对象状态变化
3. 设置 XMLHttpRequest 对象
4. 发送请求

代码如下:

    var xmlhttp = null;
    var data = "";            // 返回data

    if(window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    }
    else {
        xmlhttp = window.ActiveXObject("Microsoft.XMLHTTP");
    }

    if(xmlhttp!=null) {
        xmlhttp.onreadystatechange = stateChange;
        xmlhttp.open("GET", url, true);
        xmlhttp.send(null);
    }

    function stateChange(){
        // load
        if(xmlhttp.readyState==4){
            var status = xmlhttp.status;
            // 成功
            if(status==200){
                data = xmlhttp.responseText;
            }
            else if(status==404){
                console.error("404 NOT FOUND!");
            }
            else{
                console.error("error");
            }
        }
    }

 

xmlhttp相关属性/方法说明：

onreadystatechange：
服务器接收请求后会返回服务器的当前状态（readyState）。每次返回都状态都会触发onreadystatechange()。
状态码：
　　0: 请求未初始化
　　1: 服务器连接已建立
　　2: 请求已接收
　　3: 请求处理中
　　4: 请求已完成，且响应已就绪

open：
　　设置xmlhttp对象。open(method, url, async)。

open参数说明：
　　method：请求方法。 　　 // GET、POST
　　url：请求的数据。 　　     // http://www.xxxxx.com/p/a/t/h
　　async：是否异步 　　　　 // true、false

 

setRequestHeader(header, value): 向请求添加 HTTP 头。
send({param}): 发送请求。param为参数，只有POST才有参数。

 

readyState：返回服务器返回的状态。readyState改变时，会触发onreadystatechange事件
status：发送请求后，服务器返回的状态码。

 

responseXML: 接收返回的xml数据
responseText: 接收返回的Text数据