Ajax

　　Ajax：Asynchronous JavaScript and XML，异步JavaScript和XML。

　　通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

　　Ajax的核心是XMLHttpRequest对象。XMLHttpRequest 用于在后台与服务器交换数据。

　　创建XMLHttpRequest对象：

　　所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建了XMLHttpRequest对象，除了IE5和IE6，它们使用ActiveXObject。

　　在内建了XMLHttpRequest对象的浏览器中创建XMLHttpRequest对象的语法为：

var xmlRequest = new XMLHttpRequest();

　　在IE5和IE6中创建XMLHttpRequest对象的语法为：

var xmlRequest = new ActiveXObject("Microsoft.XMLHTTP");

　　上面创建了XMLHttpRequest对象的最低版本。微软建议使用MSXML2.XmlHttp.6.0或MSXML2.XmlHttp.3.0。

　　为了跨浏览器运行，创建XMLHttpRequest对象的方法应该像这样：

    function createXmlHttpRequest() {
        
        if (window.XMLHttpRequest) {
            var xmlHttp = new XMLHttpRequest();
            return xmlHttp;
        } else if (window.ActiveXObject) {
            var versions = ["MSXML2.XmlHttp.6.0","MSXML2.XmlHttp.3.0"];
            for (var i = 0; i < versions.length; i++) {
                try {
                    var xmlHttp = new ActiveXObject(versions[i]);
                    return xmlHttp;
                } catch(error) {}
            }
        }
        return null;
    }

　　

　　有了XMLHttpRequest对象，就可以和服务器通信了。使用XMLHttpRequest对象的open()和send()方法：

xmlhttp.open(method,url,async);
xmlhttp.send(string);

　　open方法的参数：method表示请求的方法，即get或post；url表示请求的url，url可以是标准的URL，也可以是一个文件；async表示是否异步，async为true时异步，为false时同步。

　　send方法的参数：发送到服务器的请求参数，只能在post方法时使用（get方法的参数直接写在url里）。如果使用get方法，send方法的参数应该设为null。

　　open方法调用之后，可以使用setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：

xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");

　　与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

　　然而，在以下情况中，请使用 POST 请求：

• 无法使用缓存文件（更新服务器上的文件或数据库）
• 向服务器发送大量数据（POST 没有数据量限制）
• 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠。

 

　　同步的请求会阻塞，直到服务器的响应到达。因此，当一个请求是同步的，跟在send()后面的代码通常如下：

if(request.status == 200) {
  dosomething...
} else {
  //发生了错误
}

 

　　异步的含义是，JavaScript 无需等待服务器的响应，而是：

• 在等待服务器响应时执行其他脚本；
• 当响应就绪后对响应进行处理。

　　那么，我们如何知道服务器响应就绪了呢？

　　XMLHttpRequest对象有5个重要属性：

• readyState：表示XMLHttpRequest的状态，它有5个取值：
  • 0：XMLHttpRequest对象已经建立，但是还未调用open()方法进行初始化。
  • 1：open()方法已经被调用，但是还未向目标服务器发送请求。
  • 2：已经把请求发送到目标服务器。
  • 3：已经接收到来自服务器的响应。
  • 4：从服务器返回的HTTP响应已经被完全接收。
• onreadystatechange：存储函数，每当readyState属性改变时，就会触发该函数。
• status：包含了一个HTTP状态码，表示目标服务器的HTTP响应状态。当readyState属性为4时，我们只能判定服务器响应完成了，但是到底是什么响应需要根据status来判断。例如，当HTTP状态代码为200时表示请求成功，为404时表示请求的文件未找到。

　　因此，我们可以定义一个函数给onreadystatechange属性，这个函数首先判断readyState的值是否为4（即响应完成），然后判断status是否为200，再对响应的结果进行处理。

        function request_readystatechange() {
            if (tempRequest.readyState == 4) {
                if (tempRequest.status == 200) {
                    //some code
                } else {
                    alert("An error occured trying to contact the server.");
                }
            }
        }
        xmlRequest.onreadystatechange = request_readystatechange;

 

　　XMLHttpRequest对象的另外两个重要属性是：

• responseText：获取字符串形式的相应数据。
• responseXML：获取XML形式的响应数据。

　　我们可以使用这两个属性来对服务器返回的结果进行处理。

　　XMLHttpRequest对象也提供了对Web服务器所返回的HTTP头部的访问。可以使用getAllResponseHeaders()和getResponseHeader()方法获取响应头部信息。

　　

　　最佳实践：我们可以定义一个包含两个参数的函数，第一个参数表示url，第二个参数表示对结果处理的代码（回调函数）。

function HttpRequest(sUrl,fpCallback) {
        request = createXmlHttpRequest();//创建XMLHttpRequest对象
        request.open("GET",sUrl,true);
        
        var tempRequest = request;
        function request_readystatechange() {
            if (tempRequest.readyState == 4) {
                if (tempRequest.status == 200) {
                    fpCallback(tempRequest.responseText);
                } else {
                    alert("An error occured trying to contact the server.");
                }
            }
        }
        this.request.onreadystatechange = request_readystatechange;
    }

　　回调函数里有一个参数，代表XMLHttpRequest对象的responseText或responseXML属性。