本篇文章主要講述了關於ajax的工作流程情況,還有ajax原理,一些常用的屬性介紹,現在讓我們一起來看這篇文章吧
# AJAX全稱為"Asynchronous JavaScript and XML"(非同步JavaScript和XML)。
#是一種創建互動式網頁應用程式的網頁開發技術。它:
使用XHTML CSS來表示訊息;
使用JavaScript操作DOM(Document Object Model)進行動態顯示及互動;
使用XML和XSLT進行資料物件交換及相關作業;
使用XML和XSLT進行資料物件交換及相關作業;
使用XML和XSLT進行資料物件交換及相關操作;## 與Web伺服器進行非同步資料交換;
使用JavaScript將所有的東西綁定在一起。 AJAX原理:
AJAX不是指單一的技術,而是有機地利用了一系列相關的技術。它的核心是JavaScript物件XmlHttpRequest,這個物件讓我們可以使用JavaScript向伺服器提出請求並處理回應,而不阻塞使用者。 AJAX採用非同步互動過程,它在使用者與伺服器之間引入一個中間媒介,從而消除了網路互動過程中的處理—等待—處理—等待缺點。使用者的瀏覽器在執行任務時即裝載了AJAX引擎,AJAX引擎以JavaScript語言編寫,通常藏在一個隱藏的框架中。它負責編譯使用者介面及與伺服器之間的互動。 AJAX引擎允許使用者與應用軟體之間的互動過程非同步進行,獨立於使用者與網路伺服器間的交流。現在,可以用Javascript呼叫AJAX引擎來取代產生一個HTTP的使用者動作,記憶體中的資料編輯、頁面導覽、資料校驗這些不需要重新載入整個頁面的需求可以交給AJAX來執行,使用AJAX,可以為JSP、開發人員、終端用戶帶來可見的便利。 既然Ajax的核心是XmlHttpRequest物件那就必須先介紹一下:
常用屬性:
Onreadystatechange 指定當readyState屬性改變時的事件處理函數。只寫
readyState 表示Ajax請求的目前狀態。只讀它的值用數字代表。
0 代表未初始化。目前還沒有打電話給 open 方法
1 代表載入中。 open 方法已被調用,但 send 方法尚未被調用
2 所代表已載入。 send 已被調用。請求已經開始
3 地為互動中所代表。伺服器正在發送回應
4 代表完成。回應寄放完成
每次 readyState 值的改變,觸發 readystatechange 事件。
responseText 將回應訊息作為字串傳回.唯讀。它是一個HTML,XML或普通文本,這取決於伺服器發送的內容。當 readyState 屬性值變成 4 時, responseText 屬性才可用,表示 Ajax 請求已經結束。 responseXML 將回應訊息格式化為Xml Document物件並返回,唯讀,只有伺服器傳送了帶有正確首部資訊的資料時, responseXML 屬性才是可用的。 MIME 類型必須為text/xml
status 返回目前要求的http狀態碼.唯讀
ound)
403 禁止使用(forbidden)
00 一切正常(ok)
304 沒有被修改(not modified)(伺服器返回304狀態,表示來源檔案沒有被修改)
在XMLHttpRequest 物件中,伺服器傳送的狀態碼都保存在status 屬性裡。透過把這個值和 200 或 304 比較,可以確保伺服器是否已發送了一個成功的回應
(想看更多就到PHP中文網AJAX開發手冊欄位中學習)
常用方法:
Open 建立一個新的http請求,並指定此請求的方法、URL以及驗證訊息
Send 發送請求到http伺服器並接收回應如果請求為get不會發送任何資料
setRequestHeader 單獨指定請求的某個http頭
AJAX工作流程:
1 物件初始化
##
function createXmlHttpRequest(){ var xmlHttp; try{ //Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); }catch (e){ try{ //Internet Explorer xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); }catch (e){ try{ xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); }catch (e){} } } return xmlHttp; }
2 發送請求呼叫XMLHttpRequest物件的open和send方法,依照順序,open調用完畢之後才呼叫send方法。
xmlHttp.open("get","../servlet/RegisterServlet?timeStamp="+new Date().getTime(),true) xmlHttp.send(null);
send的參數如果是以Post方式發出的話,可以是任何想傳給伺服器的內容,但必須先呼叫setRequestHeader方法,修改MIME類別:xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
3 伺服器接收處理資料並傳回,指定事件處理程序處理傳回訊息
每次readyState 屬性的改變都會觸發readystatechange 事件只要將對應的處理函數名稱賦給XMLHttpRequest物件的onreadystatechange屬性就可以了
xmlHttp.onreadystatechange = function(){ if (xmlHttp.readystate == 4) { if (xmlHttp.status == 200 || xmlHttp.status == 304) {//XMLHttpRequest对成功返回的信息有两种处理方式://responseText: 将传回的信息当字符串使用;//responseXML:将传回的信息当XML文档使用,可以用DOM处理。 } } };
4 用戶端接收5 修改用戶端頁面內容
這篇文章到這就結束了(想看更多就到PHP中文網AJAX使用手冊欄位學習),有問題的可以在下方留言提問。
以上是AJAX的工作流程有哪些? ajax的工作流程介紹(附實例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!