JavaScript——AJAX

概念

AJAX是异步的JavaScript和XML（Asynchronous JavaScript And XML）。简单点说，就是使用 XMLHttpRequest 对象与服务器通信。 它可以使用JSON，XML，HTML和text文本等格式发送和接收数据。AJAX最吸引人的就是它的“异步”特性，也就是说他可以在不重新刷新页面的情况下与服务器通信，交换数据，或更新页面。

你可以使用AJAX最主要的两个特性做下列事：

• 在不重新加载页面的情况下发送请求给服务器。
• 接受并使用从服务器发来的数据。

手写AJAX

三步走

1. 创建XMLHttpRequest对象，发送请求
2. 发送请求，处理响应
3. 创建响应函数

function makeRequest(){
    // 1.创建XMLHttpRequest对象，发送请求
    var xmlHttp
    if (window.XMLHttpRequest){
        xmlHttp = new XMLHttpRequest()
    }else if(window.ActiveXObject){
        xmlHttp = new ActiveXObject()
    }

    // 2.发送请求，处理响应
    if(xmlHttp){
        xmlHttp.open("POST","",true)               // 打开链接，指定请求              
        xmlHttp.send(formData)                     // 发送内容给服务器，如这里发一个表单 
        xmlHttp.onreadystatechange = state_change  // 指定响应函数，对服务器的响应进行处理
    }else{
        alert("Your browser does not support XMLHTTP.")
    }

    // 3. 创建响应函数
    function state_change(){
        if (xmlHttp.readyState == 4){   //检查请求的状态
            if(xmlHttp.status == 200){  //检查状态码
                document.getElementById("").innerHTML = xmlHttp.responseText    //以文本形式获得相应内容
            }
        }else{
            alert("Problem retrieving XML data.")
        }
    }
}

使用回调函数

把AJAX请求成功后获得的结果用在回调函数中，进行其他操作

function makeAjaxCall(url, methodType, callback){
   var xhr = new XMLHttpRequest();
   xhr.open(methodType, url, true);
   xhr.send();
   xhr.onreadystatechange = function(){
     if (xhr.readyState === 4){
        if (xhr.status === 200){
           console.log("xhr done successfully");
           var resp = xhr.responseText;
           var respJson = JSON.parse(resp);
           callback(respJson);
        } else {
           console.log("xhr failed");
        }
     } else {
        console.log("xhr processing going on");
     }
   }
   console.log("request sent succesfully");
}
document.getElementById("userDetails").addEventListener("click", function(){
 //git hub url to get a user details
 var userId = document.getElementById("userId").value;
 var URL = "https://api.github.com/users/"+userId;
 makeAjaxCall(URL, "GET", processUserDetailsResponse); //回调函数1
});
document.getElementById("repoList").addEventListener("click", function(){
 // git hub url to get btford details
 var userId = document.getElementById("userId").value;
 var URL = "https://api.github.com/users/"+userId+"/repos";
 makeAjaxCall(URL, "GET", processRepoListResponse); //回调函数2
});
// 创建回调函数1
function processUserDetailsResponse(userData){
 console.log("render user details", userData);
}
// 创建回调函数2
function processRepoListResponse(repoList){
 console.log("render repo list", repoList);
}

使用Promise处理AJAX的成功和失败情况

用了Promise可以处理多个回调函数的异步，不仅可以实现用回调函数处理成功结果，还可以处理失败的信息

具体使用分两部分：在请求函数内部，在请求函数外部

// 1. 在请求函数内部
function makeSomeAsyc(){
  // 1.1 创建Promise对象
  var promiseObj = new Promise(function(fullfill, reject){
      ... //Add ajax code here.
      ... // on success, call fullfill method, to resolve
      ... // on error, call reject method, to reject
  });
  // 1.2 返回Promise对象
  return promiseObj;
}

// 创建resolve和reject调用的函数（即回调函数）
function handleSuccess() {   ...   }
function handleError() {   ...   }

// 2.调用请求函数时处理结果 
var pobj = makeSomeAsyc();
//Attaching success handler to promise
pobj.then(handleSuccess, handleError);

具体例子

function makeRequest(method, url){
    var promiseObj = new Promise(function(resolved, rejected){
        var xmlHttp
        if (window.XMLHttpRequest){
            xmlHttp = new XMLHttpRequest()
        }else if(window.ActiveXObject){
            xmlHttp = new ActiveXObject()
        }

        xmlHttp.open(method, url, true)
        xmlHttp.send()
        xmlHttp.onreadystatechange = function(){
            if(xmlHttp.readyStatw === 4){
                if(xmlHttp.status === 200){
                    console.log("request success")
                    var respText = xmlHttp.respondText
                    var resp = JSON.parse(respText)
                    resolve(resp)
                }else{
                    reject(xmlHttp.status)
                }
            } 
        }   
    })
    return promiseObj
}

function handleSuccess(resp){
    console.log(resp)
}

function handleError(status){
    console.log(status)
}

makeRequest(GET, "domain").then(handleSuccess,handleError)

参考
MDN
Ajax — Async, Callback & Promise