ajax非同步編程

㈠ 什麼是AJAX

教程請到原文獲取：https://zhuanlan.hu.com/p/7

AJAX准備知識：JSON

什麼是 JSON ？

• JSON 指的是 JavaScript 對象表示法（JavaScript Object Notation）

• JSON 是輕量級的文本數據交換格式

• JSON 獨立於語言 *

• JSON 具有自我描述性，更易理解

* JSON 使用 JavaScript 語法來描述數據對象，但是 JSON 仍然獨立於語言和平台。JSON 解析器和 JSON 庫支持許多不同的編程語言。

啥都別多說了，上圖吧！

㈡ 一分鍾學會什麼是Ajax及Ajax請求的五個步驟

AJAX的意思就是非同步的JavaScript和XML。簡而言之，它是使用XMLHttpRequest對象與伺服器端通信的腳本語言。它可以發送及接收各種格式的信息，包括JSON、XML、HTML和文本文件。AJAX最為吸引人的就是它的「非同步」特性，AJAX可以無需刷新頁面而與伺服器端進行通信。

Ajax請求的五個步驟：

1、建立xmlHttpRequest對象

if(window.XMLHttpRequest) {

xmlHttp = new XMLHttpRequest();

if(xmlHttp.overrideMimeType) {

xmlHttp.overrideMimeType("text/xml");
}
} else if(window.ActiveXobject) {

var activeName = ["MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];

for(var i = 0; i < activeName.length; i++) {

try {

xmlHttp = new ActiveXobject(activeName[i]);

break;

} catch(e) {}

}

}

if(!xmlHttp) {

alert("創建xmlhttprequest對象失敗");

} else {}

2、設置回調函數

xmlHttp.onreadystatechange= callback;

function callback(){}

3、使用OPEN方法與伺服器建立連接xmlHttp.open("get","ajax?name="+ name,true)

此步注意設置http的請求方式（post/get）,如果是POST方式，注意設置請求頭信息xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded")

4、向伺服器端發送數據

xmlHttp.send(null)；如果是POST方式就不為空

5、在回調函數中針對不同的響應狀態進行處理

if(xmlHttp.readyState == 4){ //判斷交互是否成功

if(xmlHttp.status == 200){ //獲取伺服器返回的數據 //獲取純文本數據

var responseText =xmlHttp.responseText;

document.getElementById("info").innerHTML = responseText;

}

}

(2)ajax非同步編程擴展閱讀：

Ajax優缺點

優點：

1、非同步請求，不妨礙用戶瀏覽頁面或者其他操作。

2、局部刷新，無需重新刷新頁面。

3、界面與應用分離。有利於分工合作、減少非技術人員對頁面的修改造成的WEB應用程序錯誤、提高效率、也更加適用於現在的發布系統。

4、基於標准被廣泛支持。

5、前端和後端負載平衡。最大程度的減少冗餘請求和響應對伺服器造成的負擔，提升站點性能。

缺點：

1、back和History,對瀏覽器機制的破壞。

2、安全問題。易受到黑客攻擊。

3、對搜索引擎支持較弱。

4、不能很好支持移動設備。

5、違背URL和資源定位的初衷。