AJAX 简单讲解

摘要：提供一系列新事件，在中我们一般只应用，然后检查状态值再决定下一步操作，提供回调函数简化了这一步骤，在接收完数据的时候即可触发。的事件的回调函数的事件参数有两个重要属性和，用来计算百分值。不具备对象及其事件方法。

AJAX 已经是老生常谈的话题了，它最早起源于1997年，由 Microsoft 发明了其中的关键技术并由 Google 将其发扬光大。为什么是 Google 呢，这又是一个悲伤的故事，事实上在1995年 Microsoft 成功推出 IE5 之际就已经开始支持 XmlHttpRequset 对象，令人遗憾的是 Microsoft 高层没有看到它的前景，以至于后来者 Google 成为 AJAX 技术的最卓越的推动者和实践者，从而奠定 Google 在 AJAX 发展史上的领先地位。

从现在的角度

提升用户体验

虽然不能增加数据下载的速度和减少下载的数据，但可以减缓等待的过程

对传统 B/S 软件的冲击

从未来的角度

未来本地化转为云端的趋势（这里已经不算是未来了，毕竟已经基本实现了云端）

从1997这个关键词上我们就知道 AJAX 并不是一种新的技术，距今已经19年过去了 AJAX 的每次修订依然没有突破性的改变，由原本存在的几种技术的组成的聚合而成：

基于 XmlHttpRequest 对象

通过 XMLHttpRequest 来和服务器进行异步通信

基于 WEB 标准

使用 CSS、HTML（XHTML）呈现视觉效果

操作 DOM 模型进行交互和动态呈现

使用 JAVASCRIPT 绑定和调用等

XMLHttpRequest 是 AJAX 的核心机制，XMLHttpRequest 最早出现在 IE5 中，是一种支持异步请求的技术（即 javascript 异步向服务器提出请求和处理响应，而不阻塞线程，以达到无刷新的效果）。

以上是很官方的对 XMLHttpRequest 的解释，这里不再重复造轮子，下面介绍一些简单的 XMLHttpRequest 属性：

onreadystatechange：每次状态改变所触发事件的事件处理程序。

responseText：从服务器进程返回数据的字符串形式。

responseXML：从服务器进程返回的DOM兼容的文档数据对象。

responseBody：

status：从服务器返回的数字代码，比如常见的 404（未找到）和 200（已就绪）。

status Text：伴随状态码的字符串信息。

readyState：对象状态值。

0（未初始化）：对象已建立，但是尚未初始化（尚未调用 open 方法）。

1（初始化）：对象已建立，尚未调用send方法。

2（发送数据）：send 方法已调用，但是当前的状态及http头未知。

3（数据传送中）：已接收部分数据，因为响应及 http 头不全，这时通过 responseBody 和 responseText 获取部分数据会出现错误。

4（完成）：数据接收完毕,此时可以通过通过 responseXml 和 responseText 获取完整的回应数据。

但由于不同浏览器之间存在差异，所以 JAVASCRIPT 创建一个 XMLHttpRequest 对象需要不同的方法。这个差异主要体现在 IE 和其它浏览器之间，JAVASCRIPT 函数首先检查 XMLHttpRequest 的整体状态并且保证它已经完成，然后才可以执行后续操作，其中涉及到的一些方法如下：

open

向服务器提交数据的类型，即post还是get。

请求的url地址和传递的参数

传输方式，false为同步，true为异步。默认为true

同步：同步方式(false)，客户机就要等到服务器返回消息后才去执行其他操作。

异步：异步通信方式(true)，客户机就不等待服务器的响应。

send

发送请求。

setRequestHeader

设置请求头，如 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

在 AJAX 的整体工作流程中，我们将服务器端的 API 接口看成一个简单的数据接口，它接受由XMLHttpRequest向服务器端发送的请求信息并返回纯文本流（XML、Html、string、DataSet、json 或 Javascript 代码）。

    /**
     * 使用原生js封装ajax
     * 兼容xhr对象
     */
    function createXHR(){
        if(typeof XMLHttpRequest != "undefined"){ // 非IE6浏览器
            return new XMLHttpRequest();
        }else if(typeof ActiveXObject != "undefined"){   // IE6浏览器
            var version = [
                "MSXML2.XMLHttp.6.0",
                "MSXML2.XMLHttp.3.0",
                "MSXML2.XMLHttp",
            ];
            for(var i = 0; i < version.length; i++){
                try{
                    return new ActiveXObject(version[i]);
                }catch(e){
                    //todo
                }
            }
        }else{
            throw new Error("您的系统或浏览器不支持XHR对象！");
        }
    }
    /**
     * 仍然需要更改 on 2015/11/18.
     * 异步的时候需要触发onreadystatechange事件
     * readyStatus=4 即数据已经发送完毕
     * status=200 一切已经就绪
     */
    var xhr = createXHR();
    xhr.onreadystatechange = function(){
        // 执行完成
        if(xhr.readyState == 4 && xhr.status==200){
            //HTTP响应已经完全接收才调用
            callBack();
        }
    }

目前仍有一些浏览器没有实现 XHR2，所以在应用 AJAX 进行跨域访问之前，首先检测该浏览器是否支持跨域访问：

    if(typeof xhr.withCredentials!=undefined){
        //浏览器支持 xhr2 。
    }else{
        //浏览器支持不 xhr2 。
    }

XHR2 提供一系列新事件，在 XHR1 中我们一般只应用 onreadystatechange，然后检查状态值再决定下一步操作，XHR2 提供 onload 回调函数简化了这一步骤，在接收完数据的时候即可触发。

    xhr.onload=function(){
        //加载完成，进行下一步 todo。
    }

XHR2 的 onprogress事件的回调函数的事件参数有两个重要属性：loaded和total，用来计算百分值。

    xhr.onprogress=function(e){
        console.log("Dwonloading:"+Math.ceil(e.loaded/e.total*100)+"%");
    }

XDomainRequest.aspx) 与 XHR2 功能上类似，且在 XHR2 之前出现，在 IE 中 XDomainRequest 和 XMLHttpRequest 是两个不同的对象，

    var xhr = new XDomainRequest();
    xhr.onprogress=function(e){
        console.log("Dwonloading:"+xhr.responseText.length);
    };
    xhr.onload=function(){
        //todo
    }

关注点：

IE 中 progress.aspx) 事件不具备进度功能，当每次 onprogress 触发时可以获得不完整的 responseText，但无法确定总体大小，所以不能确定下载进度。

不具备 upload 对象及其事件方法。

XDomainRequest.onprogress 事件是每接收到一个数据包触发一次。

“鱼，我所欲也，熊掌亦我所欲也；二者不可得兼，舍鱼而取熊掌者也”，XMLHttpRequest 实现了页面无刷新更新数据，从而提升用户体验，减少页面整体的请求次数，减轻服务器和带宽的压力，但同时 XMLHttpRequest 也破坏了浏览器的后退机制（解决办法：通过创建或使用一个隐藏的IFRAME来重现页面上的变更）、破坏了程序的异常机制、违背了url和资源定位的初衷、不经意间会暴露比以前更多的数据和服务器逻辑、跨站点脚步攻击、SQL注入攻击和基于credentials的安全漏洞等等问题。

另外，有一些需要注意的地方

异步并不等于即时。

XMLHttpRequest 发送请求（URL长度不到2K，可以使用GET请求数据，GET相比POST更快速）

POST 类型请求要发送两个 TCP 数据包。

先发送文件头。

再发送数据。

GET 类型请求只需要发送一个 TCP 数据包。

取决于你的 cookie 数量。

以及：

由于同源策略的限制，XHR（XMLHttpRequest）对象不能直接与非同源的网站进行数据交互，那么如何安全并合乎规则的突破这一限制呢？

在 HTML5 的概念形成之后，W3C 于2008年2月提出 XMLHttpRequest Level 2 （简称 XHR2）草案用以实现了跨域访问，全新的事件，请求进度、响应进度以及其他的一些新功能。与此同时 IE 也提出了 XDomianRequest ，XDomianRequest在功能上于 XHR2 类似。

浏览器检查 Access-Control-Allow-Origin，具体可参考Http Access Control。