首頁 > web前端 > js教程 > Ajax的基本開發你知道嗎? ajax的基本開發步驟詳解(內有實例)

Ajax的基本開發你知道嗎? ajax的基本開發步驟詳解(內有實例)

寻∝梦
發布: 2018-09-10 16:01:52
原創
1200 人瀏覽過

這篇文章主要講述就是關於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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板