聊聊Ajax那些事

摘要：年初，许多事件使得被大众所接受。这使得应用程序更为迅捷地响应用户交互，并避免了在网络上发送那些没有改变的信息，减少用户等待时间，带来非常好的用户体验。调用方法后立即触发，若未被调用则不会触发此事件。

起源

该技术在1998年前后得到了应用。允许客户端脚本发送HTTP请求（XMLHTTP）的第一个组件由Outlook Web Access小组写成。该组件原属于微软Exchange Server，并且迅速地成为了Internet Explorer 4.0的一部分。部分观察家认为，Outlook Web Access是第一个应用了Ajax技术的成功的商业应用程序，并成为包括Oddpost的网络邮件产品在内的许多产品的领头羊。2005年初，许多事件使得Ajax被大众所接受。Google在它著名的交互应用程序中使用了异步通信，如Google讨论组、Google地图、Google搜索建议、Gmail等。对Mozilla/Gecko的支持使得该技术走向成熟，变得更为易用。

概念

Ajax是一种技术方案，但并不是一种新技术。它依赖的是现有的CSS/HTML/Javascript，而其中最核心的依赖是浏览器提供的XMLHttpRequest对象，是这个对象使得浏览器可以发出HTTP请求与接收HTTP响应。

特点（以toutiao.com做示例来讲）

无刷新更新数据 √

AJAX最大优点就是能在不刷新整个页面的前提下与服务器通信维护数据。这使得Web应用程序更为迅捷地响应用户交互，并避免了在网络上发送那些没有改变的信息，减少用户等待时间，带来非常好的用户体验。

异步与服务器通信 √

AJAX使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。优化了Browser和Server之间的沟通，减少不必要的数据传输、时间及降低网络上数据流量。

前端和后端负载平衡 √

AJAX可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，AJAX的原则是“按需取数据”，可以最大程度的减少冗余请求和响应对服务器造成的负担，提升站点性能

浏览器机制的破坏
在动态更新页面的情况下，用户无法回到前一个页面状态，因为浏览器仅能记忆历史记录中的静态页面

安全问题

伪造ajax请求。【缺点】

如果你使用身份验证, 确定你在请求页上检查!

为 SQL 注入检查

保留商务逻辑在服务器上!

不要假设每个请求是真实的!

数据校验和合理的加密解密

对搜索引擎支持较弱

总结

一句话描述：使用XMLHttpRequest发送http请求并接收响应。

知识点

XMLHttpRequest是一个js对象，可以使用js对象的方法、事件

流程

发起请求

发起一个http请求，方法GET、POST、PUT、DELETE、UPDATE

发送数据

客户端向服务端发送数据

监听状态

监听整个连接的状态

接收响应

接收服务端返回的数据

兼容性

IE和其他浏览器的实现

XMLHttpRequest

ActiveXObject("Microsoft.XMLHTTP")

XMLHttpRequest规范的升级

【Level1】受同源策略的限制，不能发送跨域请求；

【Level1】不能发送二进制文件（如图片、视频、音频等），只能发送纯文本数据；

【Level1】在发送和获取数据的过程中，无法实时获取进度信息，只能判断是否完成；

【Level2】可以发送跨域请求，在服务端允许的情况下；

【Level2】支持发送和接收二进制数据；

【Level2】新增formData对象，支持发送表单数据；

【Level2】发送和获取数据时，可以获取进度信息；

【Level2】可以设置请求的超时时间；

希望这个环节大家手里准备纸和笔，边听编记，这个环节过后让大家重新屡一下顺序和重点。

属性

onreadystatechange 设置状态监听函数

readyState 连接状态【状态值为1、2、3、4之一】

responseText 响应的文本

responseXML 响应的XML

status 状态码，如404，200

statusText 状态文本描述，如NOT FOUND

方法

abort() 取消请求

getAllResponseHeaders() 获取所有响应头

getResponseHeader( headerName ) 获取指定响应头

open( method, URL, async, userName, password ) 建立一个连接

send( content ) 发送请求. 如果该请求是异步模式(默认),该方法会立刻返回. 相反,如果请求是同步模式,则直到请求的响应完全接受以后,该方法才会返回

【注】所有事件的绑定需要在send之前绑定才可以

setRequestHeader( label, value ) 发送请求头在send之前

事件

loadstart

progress

abort

error

load

timeout

loadend

readystatechange

难点

事件触发条件

readystatechange 每当xhr.readyState改变时触发；但xhr.readyState由非0值变为0时不触发。

loadstart 调用xhr.send()方法后立即触发，若xhr.send()未被调用则不会触发此事件。

progress xhr.upload.onprogress在上传阶段(即xhr.send()之后，xhr.readystate=2之前)触发，每50ms触发一次；xhr.onprogress在下载阶段（即xhr.readystate=3时）触发，每50ms触发一次。

load 当请求成功完成时触发，此时xhr.readystate=4

loadend 当请求结束（包括请求成功和请求失败）时触发

abort 当调用xhr.abort()后触发

timeout xhr.timeout不等于0，由请求开始即onloadstart开始算起，当到达xhr.timeout所设置时间请求还未结束即onloadend，则触发此事件

error 在请求过程中，若发生Network error则会触发此事件（若发生Network error时，上传还没有结束，则会先触发xhr.upload.onerror，再触发xhr.onerror；若发生Network error时，上传已经结束，则只会触发xhr.onerror）。注意，只有发生了网络层级别的异常才会触发此事件，对于应用层级别的异常，如响应返回的xhr.statusCode是4xx时，并不属于Network error，所以不会触发onerror事件，而是会触发onload事件

事件触发顺序

触发xhr.onreadystatechange(之后每次readyState变化时，都会触发一次)

触发xhr.onloadstart

触发xhr.upload.onloadstart【上传开始】

触发xhr.upload.onprogress

触发xhr.upload.onload

触发xhr.upload.onloadend【上传结束】

触发xhr.onprogress

触发xhr.onload

触发xhr.onloadend

举例

使用原生JavaScript构造一个Ajax实例

var ajax = function(param) {
   var xhr = XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
   var type = (param.type || "get").toUpperCase();
   var url = param.url;
   if (!url) {
      return
   }
   var data = param.data,
       dataArr = [];
   for (var k in data) {
      dataArr.push(k + "=" + data[k]);
   }
   dataArr.push("_=" + Math.random());
   if (type == "GET") {
      url = url + "?" + dataArr.join("&");
      xhr.open(type, url);
      xhr.send();
   } else {
     xhr.open(type, url);
     xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
     xhr.send(dataArr.join("&"));
   }
   xhr.onload = function() {
   if (xhr.status == 200 || xhr.status == 304) {
      var res;
      if (param.success && param.success instanceof Function) {
         res = xhr.responseText;
         if (typeof res === "string") {
            res = JSON.parse(res);
            param.success.call(xhr, res);
         }
      }
    }
  };
};

请自己用XMLHttpRequest实现与服务端的通信实例

请思考如何结合XMLHttpRequest实现JavaScript文件的加载。