转载

聊聊Ajax那些事

总结

一句话描述：使用XMLHttpRequest发送http请求并接收响应。
知识点
1. XMLHttpRequest是一个js对象，可以使用js对象的方法、事件
流程
1. 发起请求
  
  发起一个http请求，方法GET、POST、PUT、DELETE、UPDATE
2. 发送数据
  
  客户端向服务端发送数据
3. 监听状态
  
  监听整个连接的状态
4. 接收响应
  
  接收服务端返回的数据
兼容性
- IE和其他浏览器的实现
  - XMLHttpRequest
  - ActiveXObject(“Microsoft.XMLHTTP”)
- XMLHttpRequest规范的升级
  - 【Level1】受同源策略的限制，不能发送跨域请求；
  - 【Level1】不能发送二进制文件（如图片、视频、音频等），只能发送纯文本数据；
  - 【Level1】在发送和获取数据的过程中，无法实时获取进度信息，只能判断是否完成；
  - 【Level2】可以发送跨域请求，在服务端允许的情况下；
  - 【Level2】支持发送和接收二进制数据；
  - 【Level2】新增formData对象，支持发送表单数据；
  - 【Level2】发送和获取数据时，可以获取进度信息；
  - 【Level2】可以设置请求的超时时间；

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

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

属性
- 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事件
- 事件触发顺序
  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);
                    }
                }
            }
        };
    };