ajax整理

AJAX 梳理与封装

简介

AJAX 是一种用于创建快速动态网页的技术，通过在后台与服务器进行少量数据交换，使网页实现异步更新。可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

1. 创建 XMLHttpRequest 对象

Ajax的核心是XMLHttpRequest对象，它是Ajax实现的关键，发送异步请求、接受响应以及执行回调都是通过它来完成，现代浏览器都支持 XMLHttpRequest ，IE浏览器的IE6或以下的版本中需要使用 ActiveXObject 对象

XMLHttpRequest 分为 Level1 和 Level2 两个版本，最新版本的 level2 支持发送跨域请求（需服务器允许）、获取进度信息、设置超时时间、发送接收二进制数据等

创建 XMLHttpRequest对象 兼容性写法

    var xhr = null;    if (window.XMLHttpRequest) {        xhr = new XMLHttpRequest();    } else if (window.ActiveXObject) {        try {            xhr = new ActiveXObject('Msxml2.XMLHTTP');        } catch(e) {            try {                xhr = new ActiveXObject('Microsoft.XMLHTTP');            } catch(e) {                alert('浏览器不支持 Ajax!');            }        }    }

2. XMLHttpRequest 对象的属性和方法

1. readyState

ajax 调用过程中的的状态， 只读，不可更改

• 0： 请求已建立，但未初始化
• 1： 请求已建立，但未发送（已调用open()，但未调用send()）
• 2： 请求已发送，（send()已调用，接收到响应头）
• 3： 请求处理中
• 4： 数据接收完毕

2. onreadystatechange

readyState 状态改变时触发，用于绑定时间回调

3. status

表示http请求的状态, 初始值为0, 只读，不可更改

4. onloadstart

请求发送前调用 也就是 readyState = 2 之前

5. onprogress

获取资源的下载进度，readyState = 3 时触发， IE10 +

6. onload

请求成功后触发，readyState = 4 后触发

7. onloadend

请求结束后触发 未收到响应也会触发

8. timeout

指定超时时长

9. ontimeout

请求超时时触发

10. abort()

用于取消 ajax 请求， readyState 会被设置为 0

11. onerror

ajax 请求出错后执行

12. upload

用于上传资源

xhr.upload.onprogress 可以查看文件上传进度

3. 基础使用

    // 创建请求对象    var xhr = null;    if (window.XMLHttpRequest) {        xhr = new XMLHttpRequest();    } else if (window.ActiveXObject) {        try {            xhr = new ActiveXObject('Msxml2.XMLHTTP');        } catch(e) {            try {                xhr = new ActiveXObject('Microsoft.XMLHTTP');            } catch(e) {                alert('浏览器不支持 Ajax!');            }        }    }    // 建立与服务器的连接    xhr.open(        'GET', //指定请求提交的方法，        'http://test/XXX', //请求的目标        true  //请求的模式，是否是异步        );    // 发送请求    xhr.send();    // 接受服务器响应    xhr.onreadyStateChange = function () {        if(xhr.readyState == 4 && xhr.status == 200){            console.log(                xhr.responseText/ // 返回的数据                xhr.responseXML/  //返回的数据可以是json也可以是xml                xhr.getAllReaponseHeaders()/ // 获取所有安全的ajax响应头                xhr.getReaponseHeaders("Content-Type")/ // 获取某一个响应头                xhr.status/ // 请求状态码            )        }    }

4. 文件上传

    <!-- 创建formData，放入待传文件 -->    <input type="file" id="myfile">

    function upload () {        //准备表单        var fd = new FormData();         //第一个参数表单项的名称，第二个参数文件对象        fd.append('myfile', document.getElementById('myfile').files[0]);         var xhr = new XMLHttpRequest();        // xhr.progress 下载进度事件 xhr.upload.progress 上传进度事件        xhr.upload.onprogress = function (e) { //上传进度监听事件            if(e.lengthComputable){     //判断当前文件长度是否可计算                var percent = Math.round(e.loaded * 100 / e.total);  //当前下载长度百分比                console.log(percent + '%');            }        }    }

5. 完整封装

    ajax({        method: 'GET',        url: '../_data/a.json',        success(resp) {        }    })    function ajax(opt) {        opt = opt || {};        opt.method = opt.method.toUpperCase() || 'POST';        opt.url = opt.url || '';        opt.async = opt.async || true;        opt.data = opt.data || null;        opt.data = opt.data || null;        opt.data = opt.data || null;        opt.success = opt.success || function() {};        let xmlHttp = null;            if(window.XMLHttpRequest) {                xmlHttp = new XMLHttpRequest();            } else if (window.ActiveXObject) {                try {                    xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");                } catch (e) {                    try {                        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");                    } catch (e) {                         alert("您的浏览器暂不支持Ajax!");                    }                }            }        let params = [];        for (var key in opt.data) {          params.push(key + '=' + opt.data[key]);        }        let postData = params.join('&');        if (opt.method.toUpperCase() === 'POST') {          xmlHttp.open(opt.method, opt.url, opt.async);          xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8');          xmlHttp.send(postData);        } else if (opt.method.toUpperCase() === 'GET') {          xmlHttp.open(opt.method, opt.url + '?' + postData, opt.async);          xmlHttp.send(null);        }        xmlHttp.onreadystatechange = function() {          if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {              opt.success(xmlHttp.responseText);          }        };    }

6. 参考资料

• Ajax总结篇
• 重拾Ajax
• Ajax 知识体系大梳理