JavaScript原生实现Ajax

Ajax处理从一个对象开始，通过该对象进行通信。我们将这个对象称为“Ajax对象”，或者称为“XHR对象”，XHR是XML HTTP请求(XML HTTP Request)的缩写。

实现步骤：

一. 创建Ajax对象

每个浏览器都定义了一个具备必要功能的XMLHTTPRequest对象，但是创建该对象的细节在不同浏览器中可能稍有不同。使用下面的代码可以在所有浏览器中可靠地创建一个Ajax对象：

var ajax;
if(window.XMLHttpRequest){
    ajax = new XMLHttpRequest();
}else if(window.ActiveXObject){
    //对于老款的IE浏览器
    ajax = new ActiveXObject('MSXML2.XMLHTTP.3.0');
}

注: XMLHttpRequest对象存在于所有非IE浏览器和Internet Explorer 7之后的版本。更老的IE版本必须创建新的ActiveXObject，以MSXML2.XMLHTTP.3.0作为参数

二. 指定结果处理器

有了Ajax对象后，下一步就是指定该对象的结果处理器。结果处理器是在Ajax事务期间调用的函数。为了将该函数与Ajax调用关联，将该函数赋予对象的onreadystatechange属性：

ajax.onreadystatechange = handleStateChange;

三. 发出请求

创建Ajax对象并指定响应处理函数后，就可以执行实际的请求了。发出Ajax时，首先要调用对象的open方法，以请求类型作为第一个参数，服务器资源的URL为第二个参数。

ajax.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword);
//bstrMethod：String类型，http方法，例如：POST、GET、PUT及PROPFIND。大小写不敏感。
//bstrUrl：String类型，请求的URL地址，可以为绝对地址也可以为相对地址。
//varAsync[可选]：boolean类型，是否为异步的方式，默认为true
//bstrUser[可选]:String类型，如果服务器需要验证，此处指定用户名，如果未指定，当服务器需要验证时，会弹出验证窗口。
//bstrPassword[可选]：String类型，验证信息中的密码部分，如果用户名为空，则此值将被忽略。

最后一步时调用send()方法实际地发送请求：

ajax.send(null);
//现在暂时使用null值作为方法的唯一参数，这个参数代表请求中的数据
//用GET的方法，send参数填null，将提交的信息填写在URL中
//用POST的方法，send内可以填写参数，同时还需要设置Content-Type头信息
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");

请求发送但尚未完成的时候，可以调用对象的abort()方法撤销请求:

ajax.abort();

四. 处理服务器响应

发出Ajax请求后，在对象的readyState属性变化时，将调用赋予Ajax对象onreadystatechange属性的函数。readyState属性有如下5个值，按照执行的顺序排列：

• 0，未发送
• 1，打开
• 2，接收到首标
• 3，加载中
• 4，完成

例如，发送请求之后，该值立刻变成1，然后变成2、3，最后变成4。

此时，onreadystatechange属性所指的函数用于处理服务器响应，在请求过程的每个阶段，该函数都将被调用。
在处理readyState变化的函数中，你可以检查readyState属性并相应做出反应。例如，属性值4意味着处理已经完成，页面可以使用处理的结果。其它值意味着Ajax请求仍然在处理中，脚本不需要做任何事情。

ajax.onreadystatechange = function(){
    if(ajax.readyState == 4){
        // 你可以处理响应了
    }else{
        // 你可以显示正在加载或者不作处理
    }
}

当readyState等于4时，Ajax请求已经完成了整个周期，但是在试图处理响应之前还要进行一次检查：确认响应正常。检查对象的status属性可以完成确认工作，该属性代表服务器对资源请求的相应代码。这些服务器HTTP代码包括：

• 200，OK（正常）
• 301，Moved Permanently（永久性移动）
• 304，Not Modified（未作修改）
• 307，Temporary Redirect（临时重定向）
• 401，Unauthorized（未授权）
• 403，Forbidden（禁止访问）
• 404，Not Found（未找到）
• 500，Internal Server Error（内部服务器错误）

我们没有必要记住或者处理各种可能性。当状态码为200时，说明资源已经找到并且可以加载。如果状态码为304，说明浏览器有一个可用的缓存版本。其他所有代码都说明出现了问题。

ajax.onreadystatechange = function(){
    if(ajax.readyState == 4){
        if(ajax.status >=200 && ajax.status < 300 || (ajax.status == 304)){
            // 你可以处理响应了
            console.log(ajax.responseText)
        }else{
            // 响应错误
        }
    }else{
        // 你可以显示正在加载或者不作处理
    }
}

总流程示例代码：

JavaScript代码

// 创建Ajax对象
var ajax;
if(window.XMLHttpRequest){
    ajax = new XMLHttpRequest();
}else if(window.ActiveXObject){
    ajax = new ActiveXObject();
}
if(ajax != null){
	// 指定结果处理器
    ajax.onreadystatechange = function(){
        if(ajax.readyState == 4){
            if(ajax.status == 200 || ajax.status == 304){
                // 输出响应信息
                console.log(ajax.responseText);
            }
        }
    }
    // 发送请求
    ajax.open("GET","http://localhost/api.php");
    ajax.send(null);
    
}else{
    // 浏览器不支持XMLHttpRequest
}

服务器端程序代码(PHP)

// 允许跨域
header('Access-Control-Allow-Origin:*');
// 响应类型
header('Access-Control-Allow-Methods:GET');
// 响应头设置
header('Access-Control-Allow-Headers:x-requested-with,content-type');

echo "Success";

运行后，你将会在浏览器控制台看到Success的输出结果