原生Ajax的基础操作

一个ajax请求,大致分为以下几个步骤

  • 创建xmlHttpRequest
  • 绑定监听状态的事件
  • 设置url以及header参数,附带data部分
  • send
  • 根据监听事件触发回调

创建XMLHttpRequest

if (window.XMLHttpRequest){ //Chrome, FF, IE10等现代浏览器的方法  
    req = new XMLHttpRequest();
} else { //兼容老版本IE
    try{
        req = new ActiveXObject("Msxml2.XMLHTTP");
    } catch(e){
        try{
            req = new ActiveXObject('Microsoft.XMLHTTP');
        } catch (e){
            console && console.log('不支持Ajax');
        }
    }
}

上述代码是一个基本的XMLHttpRequest对象的创建。new XMLHttpRequest()是最基本的操作。

绑定监听状态的事件

req.onreadystatechange = function (){  
    console.log(req.readyState + ' ' + req.status + ' ' + req.responseText);
    if (req.readyState === 4){
        if (req.status === 200){
            successCallback(responseText);
        } else if (req.status === 404){
            notFoundCallback();
        } else {
            //...
        }
    }
}

上述代码是简单的绑定监听事件的示例,req.readyStatereq.status分别是ajax的过程码和状态码。其中过程有5个,分别由0, 1, 2, 3, 4表示,它们代表:

  • 0: 请求未初始化
  • 1: 服务器连接已建立
  • 2: 请求已接收
  • 3: 请求处理中
  • 4: 请求已完成,且响应已就绪

状态码由HTTP协议规定,例如200就是'200ok',404就是'not found'。我们可以根据

需要说明的是,readyState在不同浏览器上,经历的状态是不同的。在IE和FireFox上,一次完整的ajax请求会经历1,2,3,4四个状态。而Chrome上是2,3,4。

responseText是返回的数据结果,它以string的方式返回。当然,还有responseXML,它在返回结果为XML时有效。

设置url和参数

req.open('POST', 'do/doAjax.php', true);  
req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');  

req.open(method, url, async)方法用于发送请求,参数method是请求类型,可以有:GET, POST, PUT, DELETE等。url是请求地址。async代表是否同步,默认为true,若将该参数设置为false,则该请求变为同步提交。

req.setRequestHeader(key, val)是设置ajax的HTTP头部。

发送请求

req.send('name=machi&gender=m&age=27');  

send(data)方法用于发送ajax请求,如果ajax的方法为GET,则data部分无效,它的请求参数应该在url一同上传。若ajax的方法为POST,则data部分有效。

Reference