AJAX原理及其使用和封装

AJAX，全称Asynchronous JavaScript and XML，即异步的JavaScript和XML。它是组合了以下技术的一种技术。

1. 使用CSS和XHTML来表示
2. 使用DOM模型来交互和动态显示
3. 使用XMLHttpRequest来和服务器进行异步通信
4. 使用JavaScript来绑定和调用

---

AJAX的工作原理

相当于在用户和服务器之间加了一个中间层，即AJAX，使用户操作和服务器响应异步化。并不必要把所有的用户请求都提交给服务器，在需要从服务器读取新数据时再由ajax引擎代为向服务器提交请求。这样的做法提高了网站性能，实现了在不刷新页面的情况下和服务器交互。

---

原生AJAX的实现（兼容IE）

//1、创建XMLHttpRequest异步对象
var xhr = new XMLHttpRequest();

//2、设置请求方式和请求地址
xhr.open(method,url,async);//第三个参数永远使用true，表示异步，因为ajax就是用于实现异步通信的。

//3、发送请求
xhr.send();

//4、监听状态变化
xhr.onreadystatechange = function(){ //当readyState属性值改变时调用
    //5、处理返回结果
    if(xhr.readyState === 4){
        if((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304){
            console.log("OK");
        }
        else{
            console.log("not OK");
        }
    }
}

//readyState用于存储XMLHttpRequest的状态，值从0到4变化：
//0（请求未初始化）——1（服务器连接已建立）——2（请求已接收）——3（请求处理中）——4（请求已完成，且响应已就绪）

ajax在IE浏览器中的使用还存在以下两个问题需要改进：

1. XMLHttpRequest对象在低版本IE中不支持

   var xhr;
   if(window.XMLHttpRequest){
       xhr = new XMLHttpRequest();
   }
   else{
       xhr = new ActiveXObject("Microsoft.XMLHTTP");
   }
   

2. 同一个URL内容更新变化后的数据不能实时获取。这句话的意思是，在IE浏览器中使用ajax获取某个URL的数据时，IE将会认为这是该URL的永久唯一的数据；当该URL中的数据发生变化时，IE获取到的仍然是之前的数据。

   //使URL的后缀信息实时变化就可以了
   
   //方法一
   URL+(Math.random())
   
   //方法二
   URL+(new Date().getTime())
   

每次干个啥都要考虑兼容IE真心很累，咱也不知道为啥IE不倒，咱也不敢问，但是面试的考查重心还是放在ajax的五个步骤上，以上兼容IE的写法只做了解，且这样的情况现在或许有所改变。

---

AJAX的封装（忽略IE兼容性）

function ajax(method,url,data,timeout,success,error){
    var str = obj2str(data);
    var timer;
    var xhr = new XMLHttpRequest();
    if(method === "get"){
        xhr.open(method,url+"?"+str);
        xhr.send();
    }
    else{
        xhr.open(method,url);
        xhr.setRequestHeader('Content-type', application/x-www-form-urlencode);
        xhr.send(str);
    }
    xhr.onreadystatechange = function (){
        clearInterval(timer);
        if(xhr.readyState === 4){
            if((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304){
                success();
            }
            else{
                error();
            }
        }
    }   
}
//method代表请求方式：post/get；url代表要查找数据的路径；
//obj代表；timeout代表超时时间（超过该时间未响应就执行error）；
//success代表响应成功后的执行事件；error代表响应失败后的执行事件。

//若URL中出现了中文，要进行转码
function obj2str(data){
    var res = [];
    for(var key in data){
        res.push(encodeURIComponent(key)+"="+encodeURIComponent(data[key]));
    }
    return res.join("&");
}

• 需要稍微注意的是，部分浏览器不支持设置超时，遇到这样的情况，超时的存在不必要时可以去掉，否则写兼容吧。
• 这个封装其实有点繁琐，有的地方也可以加以改进，希望看到的人可以提出批评指正。比如ajax的形参可以以一个对象的形式传，可以简化代码；再比如这些参数还可以设置默认值，可以增加应用场景。但大致就是如此了，不改了。