這幾天正在學ASP.NET Ajax，學的有點迷糊，所以決定先學Ajax，再向ASP.NET Ajax過渡，本文將帶大家初識Ajax，從宏觀上看Ajax，再從細節部分學習，文章脈絡如下。
Ajax定義
Ajax組成
XMLHttpRequest
常見Ajax使用
Ajax用戶端生命週期
實現原理
一個簡單的執行個體
Ajax定義
Ajax是Asynchronous JavaScript and XML(非同步JavaScript和XML)的縮寫，它不是一種新的程式設計語言，而是一種使用現有標準的新方法。看全稱好像只有JavaScript和XML，其實Ajax並不是只包含JavaScript和XML，Ajax是由JavaScript、XML、CSS、DOM和XMLHttpRequest等組成的。
Ajax組成
除了Json和XMLHttpRequest，其它的以前都學習過，所以簡略介紹一下。
1、HTML/XHTML：用於描述Ajax頁面的初始樣式，即首次載入顯示的頁面。
2、DOM：Document Object Model(檔案物件模型)，用來表示XML資料結構。
3、CSS：Cascading Style Sheet(層疊樣式表)達式，用來表示HTML檔案中元素出現的樣式。
4、XML和JSON：XML是標準的資料樣式，無論是伺服器端還是用戶端都可以很好地對其進行解釋，
JSON：JavaScript Object Notation，因為JSON的格式和JavaScript中定義對象的文法一致， 對於同樣的資料，JSON要比XML更簡短，減少了網路流量。
5、伺服器端處理瀏覽器請求：開發人員可以選擇他所熟悉的方式進行伺服器端設計實現。
6、XMLHttpRequest對象：它允許開發人員在javaScript中以非同步方式向伺服器發出HTTP請求並得到響應。
7、JavaScript：通過JavaScript可以將上述元素聯絡在一起，例如通過JavaScript查看修改DOM、CSS等。
XMLHttpRequest對象
XMLHttpRequest對象是AJAX和Web 2.0應用程式的技術基礎，AJAX利用XMLHttpRequest來實現發送和接收HTTP請求與響應資訊。一個經由XMLHttpRequest對象發送的HTTP請求不需要頁面中擁有或回寄一個＜form＞元素。AJAX中的"A"代表了"非同步"，這意味著XMLHttpRequest對象的send()方法可以立即返回，從而讓Web頁面上的其它HTML/JavaScript繼續其瀏覽器端處理而由伺服器處理HTTP請求並發送響應。預設情況下請求是非同步進行的，你也可以選擇發送同步請求，這將會暫停其它Web頁面的處理，直到該頁面接收到伺服器的響應為止，在使用XMLHttpRequest對象發送請求和處理響應之前，必須先用JavaScript建立一個XMLHttpRequest對象。（想看更多就到topic.alibabacloud.comAJAX開發手冊欄目中學習）
XMLHttpRequest屬性
屬 性 |
描 述 |
onreadystatechange |
每個狀態改變時都會觸發這個事件處理器，通常會調用一個JavaScript函數 |
readyState |
請求的狀態。有5個可取值：0 = 未初始化，1 = 正在載入，2 = 已載入，3 = 互動中，4 = 完成 |
responseText |
伺服器的響應，表示為一個串 |
responseXML |
伺服器的響應，表示為XML。這個對象可以解析為一個DOM對象 |
status |
伺服器的HTTP狀態代碼（200對應OK，404對應Not Found（未找到），等等） |
statusText |
HTTP狀態代碼的相應文本（OK或Not Found（未找到）等等） |
XMLHttpRequest方法
方 法 |
描 述 |
abort() |
停止當前請求 |
getAllResponseHeaders() |
把HTTP請求的所有響應首部作為鍵/值對返回 |
getResponseHeader("header") |
返回指定首部的串值 |
open("method", "url") |
建立對伺服器的調用。method參數可以是GET、POST或PUT。url參數可以是相對URL或絕對URL。這個方法還包括3個可選的參數 |
send(content) |
向伺服器發送請求 |
setRequestHeader("header", "value") |
把指定首部設定為所提供的值。在設定任何首部之前必須先調用open() |
Ajax的使用
為什麼使用Ajax？因為它可以實現非同步通訊，可以對頁面部分重新整理，同時減少了資料轉送量，最重要的一點是給了使用者更好的體驗。
Ajax在當前web中非常常見，比如Google的地圖，每次拖動都會重新載入該地區，但頁面並沒有重新整理；百度的搜尋方塊，輸入後出現匹配的內容；微博上面的內容更新，也未重新載入頁面……
Ajax用戶端生命週期
把這個周期分成了六個容易區分的過程，如下：
（1）使用者對某個網址提出瀏覽請求。
（2）伺服器將HTML頁面內容發送給瀏覽器。
（3）瀏覽器根據所收到的HTML內容，在記憶體中建立DOM。
（4）使用者觸發非同步請求給伺服器。此舉不會影響既有的DOM，即使用者操作不會被打斷。
（5）瀏覽器將XML格式資料發送給原頁面中的JavaScript函數進行處理。
（6）瀏覽器解析結果，接著更新記憶體中的DOM，網頁部分內容被更新，非常平順地顯示頁面。
實現原理
Ajax的載入和傳統Web應用相同：首先，輸入URL地址或點選連結引發了瀏覽器一次HTTP請求；然後伺服器處理請求，產生合適的HTML、CSS以及JavaScript，並發送至用戶端；用戶端瀏覽器將這一段HTML顯示出來；此後的使用者操作的響應開始不同：使用者的這些操作將不會引發瀏覽器的另一次HTTP請求，而是將引發用戶端的某段JavaScript代碼的執行。
再怎麼形象的描述也不如一張圖：
一個簡單的執行個體：不重新載入頁面擷取book.xml中的書名。
HTML代碼：
<html xmlns="http://www.w3.org/1999/xhtml"><head><title>book</title><script type="text/javascript"> function loadXMLDoc() { var xmlhttp; var txt, x, i; if (window.XMLHttpRequest) { // 當今主流瀏覽器 xmlhttp = new XMLHttpRequest(); } else { // IE5、IE6 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } //狀態 xmlhttp.onreadystatechange = function () { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { xmlDoc = xmlhttp.responseXML; txt = ""; //擷取全部書名 x = xmlDoc.getElementsByTagName("書名"); for (i = 0; i < x.length; i++) { txt = txt + x[i].childNodes[0].nodeValue + "<br />"; } //把書名寫到myp中 document.getElementById("myp").innerHTML = txt; } } //使用get，非同步項為true xmlhttp.open("GET", "book.xml", true); xmlhttp.send(); }</script></head><body><h2>我的藏書:</h2><br/><p id="myp"></p><br/><br/><button type="button" onclick="loadXMLDoc()">擷取我的藏書</button> </body></html>
book.xml
<書籍> <書 類別="網路"> <書名 lang="en">WEB開發</書名> <作者>M</作者> <年份>2008</年份> <價格>35</價格> </書> <書 類別="電腦"> <書名 lang="en">儲存體</書名> <作者>C</作者> <年份>2012</年份> <價格>30</價格> </書></書籍>
運行結果：未重新整理顯示結果如下
本篇文章到這就結束了（想看更多就到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
