Ajax的基本開發你知道嗎？ajax的基本開發步驟詳解（內有執行個體）

本篇文章主要講述就是關於ajax的的基本開發步驟介紹，想更深入的瞭解ajax的開發就必須要會開發步驟，雖然是最基本的，但是也能讓人知道如何用ajax開發。現在開始閱讀本篇文章吧

1. 何為ajax？有什麼用？
    Ajax全稱是“Asynchrous（非同步） Javascript And XML”，是指一種建立互動式網頁應用的的網頁開發技術。是一種用於提高瀏覽器和伺服器互動效率的快速建立動態網頁技術。能夠替換傳統傳統的web互動模式。

2. 如何理解這個同步非同步？

   傳統同步互動模式是怎樣的？
    在傳統模型中，使用的是同步互動模式，用戶端瀏覽器向伺服器提出請求，然後在伺服器響應這個請求之前，一直處於等待的狀態，並且不能進行別的操作。
   主流技術非同步互動模式是怎樣的？
    在Ajax非同步互動模式中，在用戶端瀏覽器和伺服器當中，多了一個傳遞對象Ajax引擎，當用戶端瀏覽器是向Ajax引擎提交請求，然後由Ajax引擎負責和伺服器進行請求資訊轉交，這樣就能實現在用戶端瀏覽器發送請求後，能夠繼續操作，而不是處於等待狀態。當伺服器處理完Ajax引擎請求後，將響應傳遞給Ajax引擎，Ajax引擎會更新用戶端瀏覽器頁面。

3. Ajax開發步驟
   第一步：擷取XMLHttpRequest對象。
    在w3school的xml文檔中就能查到範例程式碼。

var xmlhttp = null;if(window.XMLHttpRequest){    //這個是針對瀏覽器IE7及其7以上的版。    xmlhttp = new XMLHttpRequest();}else if(window.ActiveXObject){    //這個是針對瀏覽器5到7的版本。    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}

第二步：註冊回呼函數。

 xmlhttp.onreadystatechange = function(){ };

onreadystatechange是一個事件處理器，用於每個狀態變化所觸發的事件。

第三步：open(“method”,”URL”,async,”uname”,”pswd”)
 只用於佈建要求方式、URL路徑、以及是否同步，並不發送請求。

參數	作用
method	發送請求的方式，可選的參數有：GET、POST和PUT。
URL	要發送的URL路徑，可以使用絕對路徑和相對路徑。
async	請求是否要被非同步處理。也可以不寫，預設為true。
	true，指令碼處理會在send()發送之後繼續處理，即非同步處理。
	false，在繼續指令碼處理之前，指令碼會等待某個響應，即同步處理。
uname	目前還沒用過，文檔也沒有說明。直接不寫就行。
pswd	目前還沒用過，文檔也沒有說明。直接不寫就行。

如果URL要求帶參數呢？
 如果是get請求的話，將參數直接在url後面進行拼接。
例如：xmlhttp.open(“get”,”http://www.baidu.com?name=xiaosan“);

 如果是post請求的話，則要進行多項設定作業：
例如：xmlhttp.open(“post”,”http://www.baidu.com“);
 xmlhttp.setRequestHeader(“content-type”,”application/x-www-form-urlencoded”);
xmlhttp.send(“name=xiaosan”);
其中，setRequestHeader(“label”,”value”)的作用是想要被發送的http前序添加lable/value對。

第四步：send（content）
 發送請求。如果沒有參數，則寫成send(null)。

第五步：在回呼函數中進行具體的資料操作。
在這之前要先瞭解XMLHttpRequest的一些屬性。

屬性	描述
onreadystatechange	狀態發生改變的時候，能觸發一些事情。
readyState	詳情見下表
status	數字返回狀態，比如”OK”為200，”Not Found”為404等
statusText	字串返回狀態，比如”OK”,”Not Found”等
responseText	以字串返迴響應。
responseXML	以XML返迴響應。返回的是一個XML對象，可以用DOM進行解析

下表是一個readyState的狀態值以及狀態值所代表的含義：

狀態值	代表的狀態釋義
0	未初始化的狀態，代表XMLHttpRequest對象被建立之前
1	載入中的狀態，open操作。
2	已載入的狀態，send操作。
3	互動的狀態，接收到了響應資料，但只有回應標頭，本文還沒別接收。
4	完成的狀態，所有的http響應接收完成。

1. 何為ajax？有什麼用？
    Ajax全稱是“Asynchrous（非同步） Javascript And XML”，是指一種建立互動式網頁應用的的網頁開發技術。是一種用於提高瀏覽器和伺服器互動效率的快速建立動態網頁技術。能夠替換傳統傳統的web互動模式。

2. 如何理解這個同步非同步？

   傳統同步互動模式是怎樣的？
    在傳統模型中，使用的是同步互動模式，用戶端瀏覽器向伺服器提出請求，然後在伺服器響應這個請求之前，一直處於等待的狀態，並且不能進行別的操作。 （想看更多就到topic.alibabacloud.comAJAX開發手冊欄目中學習）
   主流技術非同步互動模式是怎樣的？
    在Ajax非同步互動模式中，在用戶端瀏覽器和伺服器當中，多了一個傳遞對象Ajax引擎，當用戶端瀏覽器是向Ajax引擎提交請求，然後由Ajax引擎負責和伺服器進行請求資訊轉交，這樣就能實現在用戶端瀏覽器發送請求後，能夠繼續操作，而不是處於等待狀態。當伺服器處理完Ajax引擎請求後，將響應傳遞給Ajax引擎，Ajax引擎會更新用戶端瀏覽器頁面。

3. Ajax開發步驟
   第一步：擷取XMLHttpRequest對象。
    在w3school的xml文檔中就能查到範例程式碼。

var xmlhttp = null;if(window.XMLHttpRequest){    //這個是針對瀏覽器IE7及其7以上的版。    xmlhttp = new XMLHttpRequest();}else if(window.ActiveXObject){    //這個是針對瀏覽器5到7的版本。    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}

第二步：註冊回呼函數。
 xmlhttp.onreadystatechange = function(){
};
onreadystatechange是一個事件處理器，用於每個狀態變化所觸發的事件。

第三步：open(“method”,”URL”,async,”uname”,”pswd”)
 只用於佈建要求方式、URL路徑、以及是否同步，並不發送請求。

參數	作用
method	發送請求的方式，可選的參數有：GET、POST和PUT。
URL	要發送的URL路徑，可以使用絕對路徑和相對路徑。
async	請求是否要被非同步處理。也可以不寫，預設為true。
	true，指令碼處理會在send()發送之後繼續處理，即非同步處理。
	false，在繼續指令碼處理之前，指令碼會等待某個響應，即同步處理。
uname	目前還沒用過，文檔也沒有說明。直接不寫就行。
pswd	目前還沒用過，文檔也沒有說明。直接不寫就行。

如果URL要求帶參數呢？
 如果是get請求的話，將參數直接在url後面進行拼接。
例如：xmlhttp.open(“get”,”http://www.baidu.com?name=xiaosan“);

 如果是post請求的話，則要進行多項設定作業：
例如：xmlhttp.open(“post”,”http://www.baidu.com“);
 xmlhttp.setRequestHeader(“content-type”,”application/x-www-form-urlencoded”);
xmlhttp.send(“name=xiaosan”);
其中，setRequestHeader(“label”,”value”)的作用是想要被發送的http前序添加lable/value對。

第四步：send（content）
 發送請求。如果沒有參數，則寫成send(null)。

第五步：在回呼函數中進行具體的資料操作。
在這之前要先瞭解XMLHttpRequest的一些屬性。

屬性	描述
onreadystatechange	狀態發生改變的時候，能觸發一些事情。
readyState	詳情見下表
status	數字返回狀態，比如”OK”為200，”Not Found”為404等
statusText	字串返回狀態，比如”OK”,”Not Found”等
responseText	以字串返迴響應。
responseXML	以XML返迴響應。返回的是一個XML對象，可以用DOM進行解析

下表是一個readyState的狀態值以及狀態值所代表的含義：

狀態值	代表的狀態釋義
0	未初始化的狀態，代表XMLHttpRequest對象被建立之前
1	載入中的狀態，open操作。
2	已載入的狀態，send操作。
3	互動的狀態，接收到了響應資料，但只有回應標頭，本文還沒別接收。
4	完成的狀態，所有的http響應接收完成。

本篇文章到這就結束了（想看更多就到topic.alibabacloud.comAJAX使用手冊欄目中學習），有問題的可以在下方留言提問。