JS之Ajax

Ajax是什么

• Ajax的全称是Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

• Ajax是一种技术方法，但并不是一种新技术。

• Ajax在无需重新加载网页的情况下，能够更新部分网页。

• Ajax依赖的是现有的CSS/HTML/JavaScript，而其中最核心的依赖是浏览器提供的XMLHttpRequest对象，是这个对象使得浏览器可以发出HTTP请求和接收HTTP响应

用一句话总结Ajax和XMLHttpRequest的关系就是：我们使用XMLHttpRequest对象发送一个Ajax请求。

Ajax的使用

GET方式

var xhr = new XMLHttpRequest();

xhr.open("GET","https://easy-mock.com/mock/5aec212c4fb0ed3c601b0032/example/ajax-get?name=Henry",true);
xhr.onreadystatechange = function(){
    if(xhr.readyState === 4){
        if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
      console.log("这是GET方式："+xhr.responseText);
        }
    }
};

xhr.send();

POST方式

var xhrPost = new XMLHttpRequest();

xhrPost.open("POST","https://easy-mock.com/mock/5aec212c4fb0ed3c601b0032/example/ajax-post",true);
xhrPost.onload = function(){
  if((xhrPost.status >=200 && xhrPost.status < 300) || xhrPost.status == 304){
    console.log("这是POST方式："+xhrPost.responseText);
  }
};
xhrPost.send("name=Henry");

readystatechange事件会在document对象上的readyState属性的属性值发生变化时触发。当document文档正在加载时,readyState属性值为"loading"。当文档结束渲染但在加载内嵌资源时，返回"interactive"，并引发DOMContentLoaded事件。当文档加载完成时,返回"complete"，并引发load事件。

封装一个Ajax

ajax({
    url: "/json.html",
    data: {
        city: "北京"
    },
    onsuccess: function(ret){
        console.log(ret);
    },
    onerror: function(){
        console.log("服务器异常");
    }
})

function ajax(obj){
    var url = obj.url;
    var type = obj.type || "GET";
    var dataType = obj.dataType || "json";
    var data = obj.data || {};
    var onsuccess = obj.onsuccess || function(){};
    var onerror = obj.onerror || function(){};

    //将data转换成字符串
    var dataStr = [];
    for(key in data){
        dataStr.push(key+"="+data[key]);
    }
    dataStr = dataStr.join("&");

    //如果type为GET，将dataStr拼接到url中
    if(type === "GET"){
        url += "?"+dataStr;
    }

    var xhr = new XMLHttpRequest();
    xhr.open(type,url,true);
    xhr.onload = function(){
        if((xhr.status>=200 && xhr.status<300) || xhr.status==304){
            if(dataType === "json"){
                onsuccess(JSON.parse(xhr.responseText));
            }else{
                onsuccess(xhr.responseText);
            }
        }
    }
    xhr.onerror = onerror;
    if(type === "POST"){
        xhr.send(dataStr);
    }else{
        xhr.send();
    }
}

Ajax的优点和缺点

优点

1. 页面无刷新，用户体验非常好
2. 使用异步方式与服务器通信，具有更加迅速的响应能力
3. 可以把以前一些服务器负担的工作转嫁到客户端，利用客户端的闲置能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。Ajax的原则是“按需取数据”，可以最大程度的减少冗余请求和响应对服务器造成的负担
4. 基于标准化并被广泛支持的技术，需要下载插件或者软件
5. Ajax可使因特网应用程序更小，更快，更友好

缺点

1. Ajax不支持浏览器back按钮
2. 安全问题（Ajax暴露了与服务器交互的细节）
3. 对搜索引擎支持较弱
4. 破坏了程序的异常机制
5. 不容易调试