聊聊Ajax那些事

时间 2019-11-09

标签聊聊 ajax 那些栏目 Ajax 繁體版

原文原文链接

了解Ajax的起源、概念及特色

起源javascript

该技术在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的支持使得该技术走向成熟，变得更为易用。前端
概念java

Ajax是一种技术方案，但并非一种新技术。它依赖的是现有的CSS/HTML/Javascript，而其中最核心的依赖是浏览器提供的XMLHttpRequest对象，是这个对象使得浏览器能够发出HTTP请求与接收HTTP响应。ajax
特色（以toutiao.com作示例来说）后端
- 无刷新更新数据 √跨域
  
  AJAX最大优势就是能在不刷新整个页面的前提下与服务器通讯维护数据。这使得Web应用程序更为迅捷地响应用户交互，并避免了在网络上发送那些没有改变的信息，减小用户等待时间，带来很是好的用户体验。浏览器
- 异步与服务器通讯 √安全
  
  AJAX使用异步方式与服务器通讯，不须要打断用户的操做，具备更加迅速的响应能力。优化了Browser和Server之间的沟通，减小没必要要的数据传输、时间及下降网络上数据流量。服务器
- 前端和后端负载平衡 √网络
  
  AJAX能够把之前一些服务器负担的工做转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。而且减轻服务器的负担，AJAX的原则是“按需取数据”，能够最大程度的减小冗余请求和响应对服务器形成的负担，提高站点性能
- 浏览器机制的破坏
  在动态更新页面的状况下，用户没法回到前一个页面状态，由于浏览器仅能记忆历史记录中的静态页面
- 安全问题
  - 伪造ajax请求。【缺点】
  - 若是你使用身份验证, 肯定你在请求页上检查!
  - 为 SQL 注入检查
  - 保留商务逻辑在服务器上!
  - 不要假设每一个请求是真实的!
  - 数据校验和合理的加密解密
- 对搜索引擎支持较弱

理解Ajax通讯的原理及兼容性

总结

一句话描述：使用XMLHttpRequest发送http请求并接收响应。
知识点
1. XMLHttpRequest是一个js对象，可使用js对象的方法、事件

流程

发起请求

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

发送数据
```
客户端向服务端发送数据
```
监听状态
```
监听整个链接的状态
```
接收响应
```
接收服务端返回的数据
```

兼容性
- IE和其余浏览器的实现
  - XMLHttpRequest
  - ActiveXObject("Microsoft.XMLHTTP")
- XMLHttpRequest规范的升级
  - 【Level1】受同源策略的限制，不能发送跨域请求；
  - 【Level1】不能发送二进制文件（如图片、视频、音频等），只能发送纯文本数据；
  - 【Level1】在发送和获取数据的过程当中，没法实时获取进度信息，只能判断是否完成；
  - 【Level2】能够发送跨域请求，在服务端容许的状况下；
  - 【Level2】支持发送和接收二进制数据；
  - 【Level2】新增formData对象，支持发送表单数据；
  - 【Level2】发送和获取数据时，能够获取进度信息；
  - 【Level2】能够设置请求的超时时间；

掌握XmlHttpRequest的属性及方法【重点】

但愿这个环节你们手里准备纸和笔，边听编记，这个环节事后让你们从新屡一下顺序和重点。

属性
- onreadystatechange 设置状态监听函数
- readyState 链接状态【状态值为一、二、三、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事件
- 事件触发顺序
  1. 触发xhr.onreadystatechange(以后每次readyState变化时，都会触发一次)
  2. 触发xhr.onloadstart
  3. 触发xhr.upload.onloadstart【上传开始】
  4. 触发xhr.upload.onprogress
  5. 触发xhr.upload.onload
  6. 触发xhr.upload.onloadend【上传结束】
  7. 触发xhr.onprogress
  8. 触发xhr.onload
  9. 触发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文件的加载。