一、原生JS實現:
var request = new XMLHttpRequest(); //創建XMLHttpRequest()對象
//啟動一個HTTP請求,但未發送請求到服務端,最后一個參數默認為false,異步發送。
request.open("GET/POSt", url, true/false); //使用GET方法時直接在的url上傳遞參數。
//使用POST方法時要通過send方法傳遞參數給服務端
var data = "str"; //str為獲取表單元素的值或其它需要更新的內容
//設置頭信息,表明發送的是表單元素
request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//發送請求到服務端
request.send(null/data);
//onreadystatechange事件會在readystate屬性改變時觸發,監控readyState屬性
request.onreadystatechange = function() {
//狀態碼為4表示請求已完成,響應內容已就緒
if (request.readyState === 4) {
//狀態碼304表示請求資源沒有被修改,可以使用瀏覽器緩存
if ((request.status >= 200 && request.status < 300) || request.status == 304) {
//服務器返回的是json對象,使用JSON.parse()方法格式化為js對象。
var data = JSON.parse(request.responseText);
if (data.success) {
//處理響應成功返回的數據
} else {
//處理響應失敗返回的數據
}
} else {
//處理請求失敗返回的數據
}
}
}
//前后端交互約定,約定success為true或者false時返回不同的信息,
//通過success屬性可以方便前端調用返回的信息。
{
"success" : true,
"msg": "xxx",
}
二、jQuery實現