ajax的理解

  前端在与后端的交互中，ajax 起着重要作用，这篇主要是从ajax的原理、优缺点以及实现原理来进行阐述。
ajax的优点：

1. 无刷新更新数据。页面无刷新，在页面内与服务器通信，用户体验好。
2. 异步与服务器通信。使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。
3. 界面与应用分离。数据与呈现分离，有利于分工合作。
4. 被广泛支持。不需要下载浏览器插件或小程序，但需要允许JS在浏览器上运行。

ajax的缺点：

1. ajax干掉了后退功能。在动态更新页面的情况下，用户无法回到前一个页面的状态，因为浏览器仅能记忆静态页面的变化。用户通常希望在点击后退按钮之后能够取得前一次操作。但在ajax应用程序中，这是无法实现的。
2. 安全问题。会暴露比以前更多的服务器逻辑，可能会收到更多的攻击，如跨站脚本攻击、SQL注入攻击。
3. 如果使用不当，ajax会增大网络数据流量，降低整个系统的性能。

ajax的原理：
  ajax相当于在用户与服务器之间加了一个中间层，使用操作与服务器响应异步化，并不是所有用户请求都会提交给服务器。只有确定需要从服务器读取新数据时再由ajax引擎代向服务器提交请求。
  它的原理简单来说就是通过XMLHTTPRequest对象向服务器发送异步请求，从服务器获得数据，然后用JS操作DOM来更新页面。

ajax的实现：

function ajax(obj){
    var xhr = new XMLHTTPRequest();
    obj.data = params(obj.data);              //序列化数据
    if(obj.type.toLowercase() === 'get'){           //如果是get方法，则改造url
        obj.url += obj.url.indexOf('?') === -1 ? '?' + obj.data : '&' + obj.data;
    }
    
    if(obj.async){                          //如果是异步方式，则监听readyState的变化
        xhr.onreadyStateChange = function(){
            if(xhr.readyState === 4){
                if(xhr.status === 200){
                    obj.success(xhr.responseText);
                }
            }
        }
    }
    
    xhr.open(obj.type, obj.url, obj.async);           
    
    if(obj.type.toLowercase() === 'get'){               //get方法不发送数据
        xhr.send(null);
    }
    else{
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.send(obj.data);
    }
    
    if(!obj.async){
        if(obj.status === 200){
            obj.success(xhr.respnseText);
        }
    }
}

function params(data){
    var s = [];
    for(var name in data){
        s.push(URIComponentEncode(name)+'='+URIComponentEncode(data[name]));
    }
    return s.join('&');
}