Ajax原生实现及相关知识讲解

最近在系统的学习JavaScript基础知识，本文讲解一下关于ajax的实现。
首先上一个原生实现的代码：

// 创建兼容主要浏览器的XHR对象的方法
function createXHR(){
   if(typeof XMLHttpRequest != "undefined"){
      return new XMLHttpRequest();
   }else if(typeof ActiveXObject != "undefined"){
       var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"], i, len;
       for(i = 0, len = versions.length; i<len; i++){
           try{
               new ActiveXObject(versions[i]);
               arguments.callee.activeXString = versions[i];
               break;
           } catch(ex){}
      }
      return new ActiveXObject(arguments.callee.activeXString);
   }else{
      throw new Error("No XHR object available");
   }
}

// 创建XHR对象
var xhr = createXHR();
xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
       if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
         alert(xhr.responseText);
       }else{
         alert("Request was unsuccessful:" + xhr.status);
       }
    }
};
xhr.open("get","example.php",true); // 启动请求，以备发送
xhr.send(null); // 发送请求

1、关于open()

接受三个参数，第一个为请求的类型，主要有get、post等，后面详细讲解；第二个参数为请求的URL；第三个参数为是否异步，true表示异步。

2、关于send()

可接受一个参数，为向请求体发送的数据。若不需要发送数据，写null（为了浏览器兼容性）。

3、关于readyState

异步请求时，需要查看请求响应的状态来判断下一步的操作。此时，readyState派上用场。
它有五个值：

• 0：未初始化。尚未调用open()方法；
• 1：启动。已经调用open()方法，但还没调用send()方法；
• 2：发送。已经调用send()方法，但尚未接收到响应；
• 3：接收。已经接收到部分响应数据；
• 4：完成。已经接收到全部响应数据，而且已经可以在客户端使用。

4、关于responseText，responseXML

这两个属性值就是上面readyState为4时的响应数据。根据响应数据的格式不同，两个属性值不同。responseText表示文本。另一个表示XML DOM文档。

5、关于status

该属性表示http状态码。
具体一些常见的状态码信息可查看另一篇文章HTTP状态码

6、HTTP头部信息

7、HTTP协议请求类型

HTTP共有8种请求类型。具体为：

• OPTIONS：返回服务器针对特定资源所支持的HTTP请求方法。也可以利用向Web服务器发送’*’的请求来测试服务器的功能性。
• HEAD：向服务器索要与GET请求相一致的响应，只不过响应体将不会被返回。这一方法可以在不必传输整个响应内容的情况下，就可以获取包含在响应消息头中的元信息。
• GET：向特定的资源发出请求。
• POST：向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被包含在请求体中。POST请求可能会导致新的资源的创建和/或已有资源的修改。
• PUT：向指定资源位置上传其最新内容。
• DELETE：请求服务器删除Request-URI所标识的资源。
• TRACE：回显服务器收到的请求，主要用于测试或诊断。
• CONNECT：HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器。
  其中最常用的是GET、POST请求。
  get请求主要用于向服务器查询某些信息。它的字符串参数可以追加到URL的末尾。使用get请求常犯的错误就是查询的字符串格式有问题。查询字符串中每个参数的名称和值都必须使用encodeURIComponent()进行编码。
  post请求主要用于向服务器发送应该被保存的数据。可传输的数据量比get大。