JavaScript的AJAX

安全问题：将服务器端的方法暴露出来，黑客可利用这一点进行攻击
大量JS代码，容易出错
Ajax的无刷新重载，由于页面的变化没有刷新重载那么明显，所以容易给用户带来困扰——用户不太清楚现在的数据是新的还是已经更新过多；现有的解决有：在相关位置提示、数据更新的区域设计得比较明显、数据更新后给用户提示等
可能破坏浏览器后退按钮的正常行为
一些手持设备（如手机、PAD等）自带的浏览器现在还不能很好的支持Ajax

三、XMLHttpRequest对象

3.1、IE7之前版本的XHR对象

IE5是第一款引入XHR对象的浏览器，在IE5中XHR对象是通过MSXML库中的一个ActiveX对象实现的。

因此，在IE中可能会遇到三种不同版本的XHR对象，即MSXML2.XMLHttp、MSXML2.XMLHttp.3.0和MSXML2.XMLHttp.6.0。

要使用MSXML库中的XHR对象，即兼容IE7之前版本的浏览器，需要编写这样的一个函数：

        //适用于IE7之前的版本
        function createXHR(){
            if(typeof arguments.callee.activeXString != "string"){
                var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"];

                for(var i = 0; i < 3; i++){
                    try{
                        new ActiveXObject(versions[i]);
                        arguments.callee.activeXString = versions[i];
                        break;
                    }catch(ex){
                        //跳过
                    }
                }
            }
            return new ActiveXObject(arguments.callee.activeXString);
        }

        // 调用函数创建XHR对象
        var xhr = createXHR();

这个函数会尽力根据IE中可用的MSXML库的情况创建最新版本的XHR对象。

3.2、IE7+和其他浏览器的XHR对象

IE7+、Firefox、Opera、Chrome和Safari都支持原生的XHR对象。

在这些浏览器中创建XHR对象要像下面这样使用XMLHttpRequest构造函数：

        var xhr = new XMLHttpRequest();

3.3、所有浏览器的XHR对象

如果只想支持IE7及更高版本，那么大可丢掉前面定义的createXHR函数，而只用原生的XHR实现。

但是，如果必须还要支持IE的早期版本，那么则可以在这个createXHR()函数中加入对原生XHR对象的支持：

        function createXHR(){
            if(typeof XMLHttpRequest != undefined){     //检测原生对象是否存在
                return new XMLHttpRequest();
            }else if(typeof ActiveXObject != undefined){  //检测ActiveX对象是否存在
                if(typeof arguments.callee.activeXString != "string"){
                    var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"];
                    
                    for(var i = 0; i < 3; 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的实现与IE最早的实现是兼容的，因此就可以在所有浏览器中都以相同方式使用上面创建的xhr对象。

四、XHR的用法

4.1、open()方法

在使用XHR对象时，要调用的第一个方法是open()，它接受3个参数：

要发送的请求的类型（"get"、"post"等)
请求的URL
表示是否异步发送请求的布尔值

示例：

        xhr.open("get", "example.php", false);    //启动一个请求，以备发送

这行代码会启动一个针对example.php的GET请求。

需要说明三点：

一是URL相对于执行代码的当前页面（当然也可以使用绝对路径）
二是调用open()方法并不会真正发送请求，而只是启动一个请求以备发送。
只能向同一个域中使用相同端口和协议的URL发送请求。如果URL与启动请求的页面有任何差别，都会引发安全错误。

4.2、send()方法

在调用了open()方法之后，如果要发送特定的请求，必须调用send()方法。

send()方法接受一个参数，即要作为请求主体发送的数据。

如果不需要通过请求主体发送数据，则必须传入null。

        //启动一个请求，以备发送
        xhr.open("get", "example.txt", false);
        //发送请求
        xhr.send(null);

由于这次请求是同步的，JavaScript代码会等到服务器响应之后再继续执行。

4.3、XHR对象的属性

在收到响应后，响应的数据会自动填充XHR对象的属性。相关属性简介如下：

responseText —— 作为响应主体被返回的文本
responseXML —— 如果响应的内容类型是"text/xml"或"application/xml"，这个属性中将保存包含着响应数据的XML DOM文档。
status —— 响应的HTTP状态（HTTP状态码）
statusText —— HTTP状态的说明（HTTP状态码的相应文本）
readyState —— 表示请求/响应过程的当前活动阶段，只有异步请求的情况下才可以检测到

在接收到响应后，第一步是检查status属性，以确定响应已经成功返回。

可以将HTTP状态代码为200作为成功的标志。此时，responseText属性的内容已经就绪，而且在内容类型正确的情况下，responseXML也应该能够访问了。

状态码为304表示请求的资源并没有被修改，可以直接使用浏览器中缓存的版本，也意味着响应是有效的。

为确保接收到适当的响应，应该像下面这样检查上述这两种状态代码：

        //启动一个请求，以备发送
        xhr.open("get", "example.txt", false);
        //发送请求
        xhr.send(null);

        if((xhr.status >= 200 && xhr.status < 300 || xhr.status == 304)){       //成功响应
            alert(xhr.responseText);
        }else{
            alert("Request was unsuccessful: " + xhr.status);
        }

无论内容类型是什么，响应主体的内容都会保存到responseText属性中；

而对于非XML数据而言，responseXML属性的值将为null。

像前面这样发送同步请求当然没有问题，但多数情况下，还是要发送异步请求，才能让JavaScript继续执行而不必等待响应。

异步请求情况下，可以检测XHR对象的readyState属性，该属性表示请求/响应过程的当前活动阶段。

readyState属性可取的值如下：

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

只要readyState属性的值由一个值变成另一个值，都会触发一次readystatechange事件。

可以利用这个事件来检测每次状态变化后readyState的值。

示例：

        //创建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.txt", true);   //异步请求
        //发送请求
        xhr.send(null);

另外，在接收到响应之前还可以调用abort()方法来取消异步请求：

            xhr.abort();

调用这个方法后，XHR对象会停止触发事件，而且也不再允许访问任何与响应有关的对象属性。

4.4、HTTP头部信息

每个HTTP请求和响应都会带有相应的头部信息，其中有的对开发人员有用，有的也没有什么用。

XHR对象也提供了操作这两种头部（即请求头部和响应头部）信息的方法。

默认情况下，在发送XHR请求的同时，还会发送下列头部信息：

Accept —— 浏览器能够处理的内容类型
Accept-Charset —— 浏览器能够显示的字符集
Accept-Encoding —— 浏览器能够处理的压缩编码
Accept-Language —— 浏览器当前设置的语言
Connection —— 浏览器与服务器之间连接的类型
Cookie —— 当前页面设置的任何Cookie
Host —— 发出请求的页面所在的域
Referer —— 发出请求的页面的URL。注意，HTTP规范将这个头部字段拼写错了，为了保证与规范一致，也只能将错就错了。这个英文单词的正确拼法应该是referrer
User-Agent —— 浏览器的用户代理字符串

使用setRequestHeader()方法可以设置自定义的请求头部信息。这个方法接收两个参数：

头部字段的名称
头部字段的值。

服务器在接收到这种自定义的头部信息之后，可以执行相应的后续操作。

要成功发送请求头部信息，必须在调用open()方法之后且调用send()方法之前调用setRequestHeader()。

示例：

        //启动一个请求，以备发送
        xhr.open("get", "example.txt", true);   //异步请求

        xhr.setRequestHeader("MyHeader", "MyValue");

        //发送请求
        xhr.send(null);

调用XHR对象的getResponseHeader()方法并传入头部字段名称，可以取得相应的响应头部信息。

调用getAllResponseHeaders()方法则可以取得一个包含所有头部信息的长字符串。

示例：

                    var myHeader = xhr.getResponseHeader("MyHeader");
                    var allHeaders = xhr.getAllResponseHeaders();

在服务器端，也可以利用头部信息向浏览器发送额外的、结构化的数据。

在没有自定义信息的情况下，getAllResponseHeaders()方法通常会返回如下所示的多行文本内容：

4.5、GET请求

GET是最常见的请求类型，最常用于向服务器查询某些信息。

必要时，可以将查询字符串参数追加到URL的末尾，以便将信息发送给服务器。

对XHR而言，位于传入open()方法的URL末尾的查询字符串必须经过正确的编码才行。

查询字符串中每个参数的名称和值都必须使用encodeURIComponent()进行编码，然后才能放到URL的末尾。

而且所有名-值对都必须由和号（&）分隔，例如：

        xhr.open("get", "example.php?name1=value1&name2=value2", true);

下面这个函数可以辅助向现有URL的末尾添加查询字符串参数：

        function addURLParam(url, name, value){
            url += (url.indexOf("?") == -1 ? "?" : "&");
            url += encodeURIComponent(name) + "=" + encodeURIComponent(value);
            return url;
        }

这个函数接受三个参数：

要添加参数的URL
参数的名称
参数的值

下面是使用这个函数来构建请求URL的示例：

        var url = "example.php";

        //添加参数
        url = addURLParam(url, "name", "Nicholas");
        url = addURLParam(url, "book", "Professional JavaScript");

        //初始化请求
        xhr.open("get", url, false);

4.6、POST请求

POST请求通常用于向服务器发送应该被保存的数据。

POST请求应该把数据作为请求的主体提交。

POST请求的主体可以包含非常多的数据，而且格式不限。

在open()方法第一个参数的位置传入"post"，就可以初始化一个POST请求，例如：

        xhr.open("post", "example.php", true);

发送POST请求的第二步就是向send()方法中传入某些数据。

由于XHR最初的设计主要是为了处理XML，因此可以在send()中传入XML DOM文档，传入的文档经序列化之后将作为请求主体被提交到服务器。

当然，也可以在此传入任何想发送到服务器的字符串。

默认情况下，服务器对POST请求和提交Web表单的请求并不会一视同仁，因此，服务器端必须有程序来读取发送过来的原始数据，并从中解析出有用的部分。

可以使用XHR来模仿表单提交：

首先，将Content-Type头部信息设置为application/x-www-form-urlencoded，也就是表单提交时的内容类型。

其次，使用serialize()函数将页面中表单的数据序列化为字符串。

示例：

        function submitData(){
            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("post", "postexample.php", true);
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            var form = document.getElementById("user-info");
            xhr.send(serialize(form));
        }

这个函数可以将ID为"user-info"的表单中的数据序列化之后发送给服务器。

与GET请求相比，POST请求消耗的资源会更多一些。

从性能角度来看，以发送相同的数据计，GET请求的速度最多可达到POST请求的两倍。

五、XMLHttpRequest 2级

XMLHttpRequest 1级只是把已有的XHR对象的实现细节描述了出来，而XMLHttpRequest 2级则进一步发展了XHR。

5.1、FormData

现代Web应用中频繁使用的一项功能就是表单数据的序列化，XMLHttpRequest 2级为此定义了FormData类型。

FormData为序列化表单以及创建于表单格式相同的数据（用于通过XHR传输）提供了便利。

下面的代码创建了一个FormData对象，并向其中添加了一些数据：

        var data = new FormData();
        data.append("name", "Nicholas");

这个append()方法接收两个参数：键和值。

分别对应表单字段的名字和字段中包含的值。可以像这样添加任意多个键值对儿。

通过向FormData构造函数中传入表单元素，也可以用表单元素的数据预先向其中填入键值对：

        var data = new FromData(document.forms[0]);

创建了FormData的实例后，可以将它直接传给XHR的send()方法，如下所示：

        xhr.open("post", "postexample.php", true);
        var form = document.getElementById("user-info");
        xhr.send(new FormData(form));

使用FormData的方便之处体现在不必明确地在XHR对象上设置请求头部。

XHR对象能够识别传入的数据类型是FormData的实例，并配置适当的头部信息。

5.2、超时设定

XMLHttpRequest 2级规范为XHR对象添加了一个timeout属性，表示请求在等待响应多少毫秒之后就终止。

在给timeout设置一个数值后，如果在规定的时间内浏览器还没有接收到响应，那么就会触发timeout事件。

示例:

        //启动一个请求，以备发送
        xhr.open("get", "example.txt", true);   

        xhr.timeout = 1;    //将超时设置为1秒钟
        xhr.ontimeout = function(){
            alert("Request did not return in a second.");
        }

        //发送请求
        xhr.send(null);

5.3、overrideMimeType()方法

overrideMimeType()方法用于重写XHR响应的MIME类型。

因为返回响应的MIME类型决定了XHR对象如何处理它，所以提供一种方法能够重写服务器返回的MIME类型是很有用的。

示例：

假设，服务器返回的MIME类型是text/plain，但数据中实际包含的是XML。

根据MIME类型，即使数据是XML，responseXML属性中仍然是null。

通过调用overrideMimeType()方法，可以保证把响应当作XML而非纯文本来处理。

        //启动一个请求，以备发送
        xhr.open("get", "text.php", true);   

        xhr.overrideMimeType("text/xml");

        //发送请求
        xhr.send(null);

5.4、进度事件

Progress Events规范定义了客户端服务器通信有关的事件。

有以下6个进度事件：

loadstart —— 在接收到响应数据的第一个字节时触发
progress —— 在接收响应期间持续不断地触发
error —— 在请求发生错误时触发
abort —— 在因为调用abort()方法而终止连接时触发
load —— 在接收到完整的响应数据时触发
loadend —— 在通信完成或者触发error、abort或load事件后触发

每个请求都从触发loadstart事件开始，

接下来是一或多个progress事件，

然后触发error、abort或load事件中的一个，

最后以触发loadend事件结束。

①load事件

load事件可以用于替换readystatechange事件。

load事件处理程序会接收到一个event对象，其target属性就指向XHR对象实例。

因而可以访问到XHR对象的所有方法和属性。

示例：

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

        //发送请求
        xhr.send(null);

②progress事件

progress事件会在浏览器接收新数据期间周期性地触发。

onprogress事件处理程序会接收到一个event对象，它包含这四个属性：

target —— 指向XHR对象
lengthComputable —— 表示进度信息是否可用的布尔值
position —— 表示已经接收的字节数
totalSize —— 表示根据Content-Length响应头部确定的预期字节数

有了这些信息，就可以为用户创建一个进度指示器：

一、传统的前后端交互方式

1.1、异步和同步的概念

1.2、传统前后端交互的原理

1.3、传统前后端交互方式的缺点

二、AJAX简介

2.1、Ajax概念

2.2、Ajax原理

2.3、Ajax的优缺点