本篇文章主要的介紹了關於ajax的定義，還有關於ajax的具體使用方式，現在大家來一起閱讀本篇文章吧
1.什麼是Ajax？
允許瀏覽器與伺服器通訊而無需重新整理當前頁面的技術，叫做Ajax。而在實際編程過程中，常常將XMLHttpRequest作為Ajax的代名詞，XMLHttpRequest就是JavaScript的一個擴充。
2.XMLHttpRequest
2.1建立XMLHttpReques對象：
var request = new XMLHttpReques();
2.2XMLHttpReques對象常用的方法和屬性：
2.3使用JavaScript語言進行編程
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>HelloWorld</title><script type="text/javascript">window.onload = function(){//1.為a節點添加點擊事件document.getElementsByTagName("a")[0].onclick = function(){//3.建立XMLHttpRequest對象var request = new XMLHttpRequest();//4.準備請求參數url methodvar url = this.href + "?time=" + new Date();var method = "GET";//5.調用 XMLHttpRequest 對象的 open 方法request.open(method,url);//6.調用 XMLHttpRequest 對象的 send 方法request.send(null);//7.為XMLHttpRequest對象添加onreadystatechange響應函數request.onreadystatechange = function(){//8.判斷響應是否完成：XMLHttpReques對象的 readState 為 4if(request.readyState == 4){//9.再判斷響應是否可用： XMLHttpReques對象的status 為 200if(request.status == 200 || request.status == 304){//10.列印相應結果：responseTextalert(request.responseText);}}}//2.取消預設行為，阻止點擊頁面跳轉return false;}}</script></head><body><a href="hello.txt">Hello</a></body></html>
利用XMLHttpRequest執行個體與伺服器通訊包含了3個關鍵：
①onreadystatechange事件處理函數：
--|該事件處理函數由伺服器觸發，而不是使用者；
--|在 Ajax 執行過程中，伺服器會通知用戶端當前的通訊狀態。這依靠更新 XMLHttpRequest 對象的 readyState 來實現。改變 readyState 屬性是伺服器對用戶端串連操作的一種方式。每次 readyState 屬性的改變都會觸發 readystatechange 事件
②open(method, url, asynch)：
--|XMLHttpRequest 對象的 open 方法允許程式員用一個Ajax調用向伺服器發送請求。
--|method：請求類型，類似 “GET”或”POST”的字串。若只想從伺服器檢索一個檔案，而不需要發送任何資料，使用GET(可以在GET請求裡通過附加在URL上的查詢字串來發送資料，不過資料大小限制為2000個字元)。若需要向伺服器發送資料，用 POST。
--|在某些情況下，有些瀏覽器會把多個XMLHttpRequest請求的結果緩衝在同一個URL。如果對每個請求的響應不同，就會帶來不好的結果。在此將時間戳記追加到URL的最後，就能確保URL的唯一性，從而避免瀏覽器緩衝結果。
--|url：路徑字串，指向你所請求的伺服器上的那個檔案。可以是絕對路徑或相對路徑。
--|asynch：表示請求是否要非同步傳輸，預設值為true。指定true，在讀取後面的指令碼之前，不需要等待伺服器的相應。指定false，當指令碼處理過程經過這點時，會停下來，一直等到Ajax請求執行完畢再繼續執行（想看更多就到topic.alibabacloud.comAJAX開發手冊欄目中學習）
③send(data)：
--|open 方法定義了 Ajax 請求的一些細節。send 方法可為已經待命的請求發送指令
--|data：將要傳遞給伺服器的字串。
--|若選用的是 GET 請求，則不會發送任何資料， 給 send 方法傳遞 null 即可：request.send(null);
--|當向send()方法提供參數時，要確保open()中指定的方法是POST，如果沒有資料作為請求體的一部分發送，則使用null.
④setRequestHeader(header,value)：
--|當瀏覽器向伺服器請求頁面時，它會伴隨這個請求發送一組首部資訊。這些首部資訊是一系列描述請求的中繼資料(metadata)。首部資訊用來聲明一個請求是 GET 還是 POST。
--|Ajax 請求中，發送首部資訊的工作可以由 setRequestHeader該完成
--|參數header： 首部的名字; 參數value：首部的值。
--|如果用 POST 請求向伺服器發送資料，需要將 “Content-type” 的首部設定為 “application/x-www-form-urlencoded”.它會告知伺服器正在發送資料，並且資料已經符合URL編碼了。
--|該方法必須在open()之後才能調用
⑤readyState
--|readyState 屬性表示Ajax請求的目前狀態。它的值用數字代表。
----|0 代表未初始化。 還沒有調用 open 方法
----|1 代表正在載入。 open 方法已被調用，但 send 方法還沒有被調用
----|2 代表已載入完畢。send 已被調用。請求已經開始
----|3 代表互動中。伺服器正在發送響應
----|4 代表完成。響應發送完畢
--|每次 readyState 值的改變，都會觸發 readystatechange 事件。如果把 onreadystatechange 事件處理函數賦給一個函數，那麼每次 readyState 值的改變都會引發該函數的執行。
--|readyState 值的變化會因瀏覽器的不同而有所差異。但是，當請求結束的時候，每個瀏覽器都會把 readyState 的值統一設為 4
⑥status
--|伺服器發送的每一個響應也都帶有首部資訊。三位元的狀態代碼是伺服器發送的響應中最重要的首部資訊，並且屬於超文字傳輸通訊協定 (HTTP)中的一部分。
--|常用狀態代碼及其含義：
----|404 沒找到頁面(not found)
----|403 禁止訪問(forbidden)
----|500 內部伺服器出錯(internal service error)
----|200 一切正常(ok)
----|304 沒有被修改(not modified)
--|在 XMLHttpRequest 對象中，伺服器發送的狀態代碼都儲存在 status 屬性裡。通過把這個值和 200 或 304 比較，可以確保伺服器是否已發送了一個成功的響應
⑦responseText
--|XMLHttpRequest 的 responseText 屬性包含了從伺服器發送的資料。它是一個HTML,XML或普通文本，這取決於伺服器發送的內容。
--|當 readyState 屬性值變成 4 時, responseText 屬性才可用，表明 Ajax 請求已經結束。
⑧responseXML
--|如果伺服器返回的是 XML， 那麼資料將儲存在 responseXML 屬性中。
--|只用伺服器發送了帶有正確首部資訊的資料時， responseXML 屬性才是可用的。 MIME 類型必須為 text/xml
3.Ajax的資料格式（HTML XML JSON）
3.1 HTML
（1）HTML 由一些普通文本組成。如果伺服器通過 XMLHttpRequest 發送 HTML， 文本將儲存在 responseText 屬性中。
（2）不必從 responseText 屬性中讀取資料。它已經是希望的格式，可以直接將它插入到頁面中。
（3）插入 HTML 程式碼最簡單的方法是更新這個元素的 innerHTML 屬性。
window.onload = function(){var aNodes = document.getElementsByTagName("a");for(var i = 0;i < aNodes.length;i++){aNodes[i].onclick = function(){var request = new XMLHttpRequest();var method = "GET";var url = this.href;request.open(method,url);request.send(null);request.onreadystatechange = function(){if(request.readyState == 4){if(request.status == 200 || request.status == 304){document.getElementById("details").innerHTML = request.responseText;}}}return false;}}
3.2 XML
優點：
（1）XML 是一種通用的資料格式。
（2）不必把資料強加到已定義好的格式中，而是要為資料自訂合適的標記。
（3）利用 DOM 可以完全掌控文檔。
缺點：
（1）如果文檔來自於伺服器，就必須得保證文檔含有正確的首部資訊。若文件類型不正確，那麼 responseXML 的值將是空的。
（2）當瀏覽器接收到長的 XML 檔案後， DOM 解析可能會很複雜
window.onload = function(){var aNodes = document.getElementsByTagName("a");for(var i = 0;i < aNodes.length;i++){aNodes[i].onclick = function(){var request = new XMLHttpRequest();var method = "GET";var url = this.href;request.open(method,url);request.send(null);request.onreadystatechange = function(){if(request.readyState == 4){if(request.status == 200 || request.status == 304){//1擷取XML檔案內容var result = request.responseXML;/* * 解析XML檔案：<h2><a href="mailto:andy@clearleft.com">Andy Budd</a></h2> * <a href="http://andybudd.com/">http://andybudd.com/</a> */var name = result.getElementsByTagName("name")[0].firstChild.nodeValue;var website = result.getElementsByTagName("website")[0].firstChild.nodeValue;var email = result.getElementsByTagName("email")[0].firstChild.nodeValue;//建立節點，並且添加到p節點中var aNode = document.createElement("a");aNode.appendChild(document.createTextNode(name));aNode.href = "mailto:" + email;var h2Node = document.createElement("h2");h2Node.appendChild(aNode);var aNode2 = document.createElement("a");aNode2.appendChild(document.createTextNode(website));aNode2.href = website;var detailsNode = document.getElementById("details");detailsNode.innerHTML = "";detailsNode.appendChild(h2Node);detailsNode.appendChild(aNode2);}}}return false;}}}
3.3 JSON
（1）JSON（JavaScript Object Notation）一種簡單的資料格式，比xml更輕巧。JSON是JavaScript原生格式，這意味著在JavaScript中處理JSON資料不需要任何特殊的API或工具包。
（2）JSON的規則很簡單：對象是一個無序的“‘名稱/值’對”集合。一個對象以“{”（左括弧）開始，“}”（右括弧）結束。每個“名稱”後跟一個“:”（冒號）；“‘名稱/值’對”之間使用“,”（逗號）分隔。
window.onload = function(){var aNodes = document.getElementsByTagName("a");for(var i = 0;i < aNodes.length;i++){aNodes[i].onclick = function(){var request = new XMLHttpRequest();var method = "GET";var url = this.href;request.open(method,url);request.send(null);request.onreadystatechange = function(){if(request.readyState == 4){if(request.status == 200 || request.status == 304){var jsonStr = request.responseText;var jsonObject = eval("(" + jsonStr + ")");var name = jsonObject.person.name;var website = jsonObject.person.website;var email = jsonObject.person.email;var aNode = document.createElement("a");aNode.appendChild(document.createTextNode(name));aNode.href = "mailto:" + email;var h2Node = document.createElement("h2");h2Node.appendChild(aNode);var aNode1 = document.createElement("a");aNode1.appendChild(document.createTextNode(website));aNode1.href = website;var detailsNode = document.getElementById("details");detailsNode.innerHTML = "";detailsNode.appendChild(h2Node);detailsNode.appendChild(aNode1);}}}return false;}}}
4.使用jQuery實現Ajax技術
jQuery 對 Ajax 操作進行了封裝, 在 jQuery 中最底層的方法時 $.ajax(), 第二層是 load(), $.get() 和 $.post(), 第三層是 $.getScript() 和 $.getJSON()。
4.1 load() 方法
$(function(){$("a").click(function(){var url = this.href;var args = {"time":new Date()};$("#details").load(url);return false;});})
（1）load() 方法是 jQuery 中最為簡單和常用的 Ajax 方法, 能載入遠端 HTML 程式碼並插入到 DOM 中. 它的結構是: load(url[, data][,callback])，其中url：String類型，請求HTML頁面的URL地址；data（可選）：Object類型，發送到伺服器的key/value資料；callback（可選）：Function類型，請求完成時的回呼函數，無論請求成功還是失敗。
（2）如果只需要載入目標 HTML 頁面內的某些元素, 則可以通過 load() 方法的 URL 參數來達到目的. 通過 URL 參數指定選擇符, 就可以方便的從載入過來的 HTML 文檔中選出所需要的內容. load() 方法的 URL 參數的文法結構為 “url selector”(注意: url 和 選取器之間有一個空格)
$(function(){$("a").click(function(){//選擇返回HTML結果頁面中的h2後代a元素var url = this.href + " h2 a";var args = {"time":new Date()};$("#details").load(url);return false;});})
（3）傳遞方式: load() 方法的傳遞參數根據參數 data 來自動自定. 如果沒有參數傳遞, 採用 GET 方式傳遞, 否則採用 POST 方式
（4）對於必須在載入完才能繼續的操作, load() 方法提供了回呼函數, 該函數有三個參數: 代表請求返回內容的 data; 代表請求狀態的 textStatus 對象和 XMLHttpRequest 對象
4.2$.get()或$.post() 方法
4.2.1載入XML資料
$(function(){$("a").click(function(){var url = this.href;args = {"time" : new Date()};$.get(url,args,function(data){var name = $(data).find("name").text();var email = $(data).find("email").text();var website = $(data).find("website").text();$("#details").empty() .append("<h2><a href='mailto:" + email + "'>" + name +"</a></h2>") .append("<a href='" + website + "'>" + website + "</a>");})return false;});})
4.2.2載入HTML資料
$(function(){$("a").click(function(){var url = this.href;var args = {"time" : new Date()};$.get(url,args,function(data){$("#details").empty();$(data).appendTo($("#details"));});return false;});})
4.2.3載入JSON資料
$(function(){$("a").click(function(){var url = this.href;args = {"time" : new Date()};$.get(url,args,function(data){var name = data.person.name;var email = data.person.email;var website = data.person.website;$("#details").empty() .append("<h2><a href='mailto:" + email + "'>" + name +"</a></h2>") .append("<a href='" + website + "'>" + website + "</a>");},"JSON")return false;});})
（1）$.get() 方法使用 GET 方式來進行非同步請求. 它的結構是: $.get(url[, data][, callback][, type])，其中：url：String類型，請求HTML頁面的URL地址；data（可選）：Object類型，發送到伺服器的key/value資料；callback（可選）：Function類型，請求完成時的回呼函數，無論請求成功還是失敗；type（可選）：String類型，伺服器返回內容的格式，可以是xml,json,html,text等類型。
（2）$.get() 方法的回呼函數只有兩個參數: data 代表返回的內容, 可以是 XML 文檔, JSON 檔案, HTML 片段等; textstatus 代表請求狀態, 其值可能為: succuss, error, notmodify, timeout 4 種.
（3）$.get() 和 $.post() 方法時 jQuery 中的全域函數, 而 find() 等方法都是對 jQuery 對象進行操作的方法
5.$.getJSON()方法
$(function(){$("a").click(function(){var url = this.href;args = {"time" : new Date()};$.getJSON(url,args,function(data){var name = data.person.name;var email = data.person.email;var website = data.person.website;$("#details").empty() .append("<h2><a href='mailto:" + email + "'>" + name +"</a></h2>") .append("<a href='" + website + "'>" + website + "</a>");});return false;});})
本篇文章到這就結束了（想看更多就到topic.alibabacloud.comAJAX使用手冊欄目中學習），有問題的可以在下方留言提問。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
