ajax通讯原理

要解释ajax的原理，需要从旧的交互方式开始，当用户触发一个http请求到服务器，服务器对其进行处理之后，再返回一个新的html页到客户端，每当服务器处理客户端提交的请求时，客户都只能空闲等待，并且哪怕只是一次很小的交互，只需要服务器端返回一个很简单的数据，都要返回一个完整的html页，而用户每次都要浪费时间和宽带去重新读取整个页面，而使用ajax后，用户从感觉上几乎所有的操作都会很快得到响应从而感觉不到页面重载的等待

ajax的原理简单来说是在用户和服务器之间加了一个中间层（AJAX引擎），通过XMLHttpRequest对象来向服务器发送异步请求，从服务器获得数据，然后用js来操作dom而更新页面，是用户操作与服务器响应一步化，而这其中最关键的一步就是从服务器获得请求数据。

ajax的过程只涉及JS，XMLHttpRequest和DOM，XMLHttpRequest是ajax的核心机制，他是在IE5中首先引入的，是一种支持异步请求的技术，简单说，也就是js可以及时向服务器提出请求和处理响应，而不阻塞用户，达到无刷新的效果

大致分为几步

1：准备载体

2：内容初始化

3：送信

4：等待回信

5：收到回信

创建通信对象

绝大多数浏览器使用XMLHttpRequest创建对象，IE7以下的版本使用ActiveObject创建通讯对象，此时readyState的值为0

var xhr = new XMLHttpRequest();

readyState属性，从xhr创建的一刻就存在，其值在一开始等于0，并会随着进程的变化而变化

readyState = 0；创建xhr对象；

readyState = 1；使用open初始化对象后；

readyState = 2；使用send发送请求后；

readyState = 3；接受到返回数据后；

readyState = 4：返回数据接受完毕，这是可以处理使用返回数据

onreadystatechange,事件处理程序，当readyState变化时触发，用来监测readyState

responseText：用于存放返回的数据

responseXML：有时也会存储在这里

var onreadystatechange = function(){
    // 当readyState == 4时可以对数据进行操作
    if(xhr.readyState == 4){
        console.log(xhr.responseText);    //这里xhr.responseText用于存放被返回的数据
    }
}

使用xhr.open来初始化通讯对象，open括号中有三个参数（请求方式，url，是否异步（默认为异步true）），此时readyState的值为1；

使用xhr.send()来发送请求（当请求方式为post时，向后台传递的参数需要放在send实参内部），此时readyState的值为2

xhr.open("get","ajaxTest.json",true);
xhr.send();

xhr.abort，在发送之后取消，必须在发送后，收到回信前执行才会有效果

网络请求状态

status：表示http通信状态码：

以下为集中常见的http通信状态码（一般200~300都表示正常）

通讯状态码	表示内容
200	请求成功，服务器正常运行
304	请求成功，但是服务器检测到直至上次请求，该资源未改变，要求浏览器使用缓存文件
403	服务器拒接访问该资源
404	服务器找资源找不到
500及以上	通常表示服务端程序错误

statueText：表示http通讯状态描述

封装Ajax函数

XMLHttpRequest在绝大多数浏览器下都支持，而IE低版本下（ie6）不支持该构造函数，需要使用ActiveXObject，该构造函数需要使用对应的参数构造出通信对象

['MSXML.XMLHttp.6.0', 'MSXML.XMLHttp.3.0', 'MSXML.XMLHttp']

首先，创建xhr函数

调用createXhr()，其返回值是一个xhr，以下代码包含了对于版本的判断

function createXhr(){
    //首先检查是否支持XMLHttpRequest
    if (typeof XMLHttpRequest !== "undefined"){
        //新建xhr对象并返回
        return new XMLHttpRequest();

    
    }else if(typeof ActiveXObject !== "undefined"){
        //如果不支持XMLHttpRequest则检查是否支持ActiveXObject，支持则使用其创建xhr
        var strList = ["MSXML.XMLHttp.6.0","MSXML.XMLHttp.3.0","MSXML.XMLHttp"];
        //由于不确定看具体参数，使用循环尝试方法创建对象
        for(var i = 0;i < strList.length ; i++){
            try{
                var xhr = new ActiveXObject(strList[i]);
                return xhr;
            }catch(e){
                console.log(e);
            }
        }
    }else{
        console.log("对不起，你的浏览器不支持ajax请求！！");
    }
}

然后请求发送数据

/**
 * 创建一个Ajax方法
 * @method $AJAX
 * @param {Obj/Arr/String/B} data 传递的参数
 * @param {String} type 请求类型
 * @param {String} url 请求地址
 * @param {Boolean} isAsyn 同步异步默认为true异步
 * @param {Function} callback 回调函数
 */
function $AJAX(data, type, url, isAsyn, callback){
    //创建通信对象xhr
    var xhr = createXhr();
    //监听通信状态
    xhr.onreadystatechange = function(){
        if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
            if(xhr.readyState == 4){
                var resData = JSON.parse(decodeURIComponent(xhr.responseText));  //将字符还原为中文
                callback && callback(resData);
            }
        }
    }
    // 处理get请求参数
    if (type.toLowerCase() == "get"){
        url += "?";
        for(var n in data){
            url += n+"="+data[n]+"&";
        }
        url = url.substr(0, url.length-1);
        data = null;
    }else{
        //将上送对象转化为json格式字符串，并最中文进行转码
        data = encodeURIComponent(JSON.stringify(data));
    }
    //初始化
    xhr.open(type, url, isAsyn);
    //发送请求
    xhr.send(data);
}

ajax的中文转换

encodeURI()、decodeURI()
encodeURIComponent(), decodeURIComponent()
分别将中文转换为字符，和将字符还原为中文

image.png