理解同步交互和異步交互
* 同步:
提交請求->等待服務器處理->處理完畢返回 這個期間客戶端瀏覽器不能幹任何事。發送方發出數據後,等接收方發回響應以後才發下一個數據包的通訊方式。你現在傳輸,我要親眼看你傳輸完成,纔去做別的事 。
請求通過事件觸發->服務器處理(這時瀏覽器仍然可以作其他事情)->處理完畢。發送方發出數據後,不等接收方發回響應,接着發送下個數據包的通訊方式 。你傳輸吧,我去做我的事了,傳輸完了告訴我一聲 。
什麼是Ajax?
Ajax被認爲是(Asynchronous JavaScript and XML的縮寫)。現在,允許瀏覽器與服務器通信而無須刷新當前頁面的技術都被叫做Ajax.
Ajax並非一種新的技術,而是幾種原有技術的結合體。它由下列技術組合而成:
1.使用CSS和XHTML來表示。
2. 使用DOM模型來交互和動態顯示。
3.使用XMLHttpRequest來和服務器進行異步通信。
4.使用javascript來綁定和調用。
Ajax的工作原理
用戶的瀏覽器在執行任務時即裝載了AJAX引擎。AJAX引擎用JavaScript語言編寫,通常藏在一個隱藏的框架中。它負責編譯用戶界面及與服務器之間的交互。
AJAX引擎允許用戶與應用軟件之間的交互過程異步進行,獨立於用戶與網絡服務器間的交流。現在,可以用Javascript調用AJAX引擎來代替產生一個HTTP的用戶動作,內存中的數據編輯、頁面導航、數據校驗這些不需要重新載入整個頁面的需求可以交給AJAX來執行。
AJAX的原理簡單來說通過XmlHttpRequest對象來向服務器發異步請求,從服務器獲得數據,然後用javascript來操作DOM而更新頁面。這其中最關鍵的一步就是從服務器獲得請求數據。
瞭解XMLHttpRequest
XMLHttpRequest是ajax的核心機制,它是在IE5中首先引入的,是一種支持異步請求的技術。簡單的說,也就是javascript可以及時向服務器提出請求和處理響應,而不阻塞用戶。達到無刷新的效果。
XMLHttpRequest屬性有:
屬性 | 描述 |
onreadystatechange | 每次狀態改變所觸發事件的事件處理程序。 |
responseText | 從服務器進程返回數據的字符串形式。 |
responseXML | 從服務器進程返回的DOM兼容的文檔數據對象。 |
status | 從服務器返回的數字代碼,比如常見的404(未找到)和200(已就緒) |
status Text | 伴隨狀態碼的字符串信息 |
readyState | 對象狀態值,存有服務器響應的狀態信息。 每當 readyState 改變時,onreadystatechange 函數就會被執行。 |
readyState 屬性可能的值:
狀態 | 描述 |
---|---|
0 | 請求未初始化(在調用 open() 之前) |
1 | 請求已提出(調用 send() 之前) |
2 | 請求已發送(這裏通常可以從響應得到內容頭部) |
3 | 請求處理中(響應中通常有部分數據可用,但是服務器還沒有完成響應) |
4 | 請求已完成,此時可以通過responseXml和responseText獲取完整的迴應數據。 |
但是,由於各瀏覽器之間存在差異,所以創建一個XMLHttpRequest對象可能需要不同的方法。這個差異主要體現在IE和其它瀏覽器之間。下面是一個比較標準的創建XMLHttpRequest對象的方法。
- /*
- * 創建XMLHttpRequest對象
- * */
- function ajaxFunction(){
- var xmlHttp;
- try { // Firefox, Opera 8.0+, Safari
- xmlHttp = new XMLHttpRequest();
- }
- catch (e) { // Internet Explorer
- try {
- xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
- }
- catch (e) {
- try {
- xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
- }
- catch (e) {
- alert("您的瀏覽器不支持AJAX!");
- return false;
- }
- }
- }
- return xmlHttp;
- }
AJAX(客戶端)開發步驟:
- var xmlHttp = ajaxFunction();
- /* readyState 屬性存有服務器響應的狀態信息。每當 readyState 改變時,onreadystatechange 函數就會被執行。*/
- xmlHttp.onreadystatechange = function(){
- if(xmlHttp.readyState==4){
- var data=xmlHttp.responseText;
- alert("xmlHttp.responseText:"+data);
- }
- }
- /*
- * bstrMethod: http方法,例如:POST、GET、PUT及PROPFIND。大小寫不敏感。
- * bstrUrl: 請求的URL地址,可以爲絕對地址也可以爲相對地址。
- * varAsync[可選]:布爾型,指定此請求是否爲異步方式,默認爲true。如果爲真,當狀態改變時會調用onreadystatechange屬性指定的回調函數。
- * bstrUser[可選]:如果服務器需要驗證,此處指定用戶名,如果未指定,當服務器需要驗證時,會彈出驗證窗口。
- * bstrPassword[可選]:驗證信息中的密碼部分,如果用戶名爲空,則此值將被忽略。
- */
- xmlHttp.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword);
- /* varBody:欲通過此請求發送的數據。 */
- xmlHttp.send(varBody);