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. 如何理解這個同步非同步？

   傳統同步互動模式是怎麼樣的？
    在傳統模型中，使用的是同步互動模式，客戶端瀏覽器向伺服器提出請求，然後在伺服器回應這個請求之前，一直處於等待的狀態，並且不能進行別的操作。 （想看更多就到PHP中文網AJAX開發手冊欄位中學習）
   主流技術非同步互動模式是怎麼樣的？
    在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回應接收完成。

狀態值	代表的狀態釋義

 這篇文章到這就結束了（想看更多就到PHP中文網

AJAX使用手冊欄位中學習），有問題的可以在下方留言提問。

以上是Ajax的基本開發你知道嗎？ ajax的基本開發步驟詳解（內有實例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！