理解同步交互和異步交互

舉個例子：普通B/S模式(同步) ? ? ? AJAX技術(shù)(異步)
? ? ? ?* ?同步：

? ? ? 提交請求->等待服務(wù)器處理->處理完畢返回 ?這個期間客戶端瀏覽器不能干任何事。

? ? ? ?發(fā)送方發(fā)出數(shù)據(jù)后，等接收方發(fā)回響應(yīng)以后才發(fā)下一個數(shù)據(jù)包的通訊方式。 ?

? ? ? ?你現(xiàn)在傳輸，我要親眼看你傳輸完成，才去做別的事 。

? ? ? ?* ?異步：?

? ? ? 請求通過事件觸發(fā)->服務(wù)器處理（這時瀏覽器仍然可以作其他事情）->處理完畢。

? ? ? ?發(fā)送方發(fā)出數(shù)據(jù)后，不等接收方發(fā)回響應(yīng)，接著發(fā)送下個數(shù)據(jù)包的通訊方式 。

? ? ? ?你傳輸吧，我去做我的事了，傳輸完了告訴我一聲 。 ?

?

?

什么是Ajax？

? ? ? ?Ajax被認(rèn)為是(Asynchronous JavaScript and XML的縮寫）。現(xiàn)在，允許瀏覽器與服務(wù)器通信而無須刷新當(dāng)前頁面的技術(shù)都被叫做Ajax.

? ? ? ?Ajax并非一種新的技術(shù)，而是幾種原有技術(shù)的結(jié)合體。它由下列技術(shù)組合而成:?

1.使用CSS和XHTML來表示。?

2. 使用DOM模型來交互和動態(tài)顯示。?

3.使用XMLHttpRequest來和服務(wù)器進(jìn)行異步通信。?

4.使用javascript來綁定和調(diào)用。

?

Ajax的工作原理

? ? ? ?AJAX采用異步交互過程。AJAX在用戶與服務(wù)器之間引入一個中間媒介，從而消除了網(wǎng)絡(luò)交互過程中的處理—等待—處理—等待缺點。
? ? ? ?用戶的瀏覽器在執(zhí)行任務(wù)時即裝載了AJAX引擎。AJAX引擎用JavaScript語言編寫，通常藏在一個隱藏的框架中。它負(fù)責(zé)編譯用戶界面及與服務(wù)器之間的交互。
? ? ? ?AJAX引擎允許用戶與應(yīng)用軟件之間的交互過程異步進(jìn)行，獨立于用戶與網(wǎng)絡(luò)服務(wù)器間的交流。現(xiàn)在，可以用Javascript調(diào)用AJAX引擎來代替產(chǎn)生一個HTTP的用戶動作，內(nèi)存中的數(shù)據(jù)編輯、頁面導(dǎo)航、數(shù)據(jù)校驗這些不需要重新載入整個頁面的需求可以交給AJAX來執(zhí)行。?

? ? ? ?AJAX的原理簡單來說通過XmlHttpRequest對象來向服務(wù)器發(fā)異步請求，從服務(wù)器獲得數(shù)據(jù)，然后用javascript來操作DOM而更新頁面。這其中最關(guān)鍵的一步就是從服務(wù)器獲得請求數(shù)據(jù)。

?

了解XMLHttpRequest

　 ? XMLHttpRequest是ajax的核心機(jī)制，它是在IE5中首先引入的，是一種支持異步請求的技術(shù)。簡單的說，也就是javascript可以及時向服務(wù)器提出請求和處理響應(yīng)，而不阻塞用戶。達(dá)到無刷新的效果。

XMLHttpRequest屬性有：

?

屬性	描述
onreadystatechange?	每次狀態(tài)改變所觸發(fā)事件的事件處理程序。
responseText ? ? ? ?	從服務(wù)器進(jìn)程返回數(shù)據(jù)的字符串形式。
responseXML ? ? ?	從服務(wù)器進(jìn)程返回的DOM兼容的文檔數(shù)據(jù)對象。
status ? ? ? ? ? ? ? ? ? ? ?	從服務(wù)器返回的數(shù)字代碼，比如常見的404（未找到）和200（已就緒）
status Text?	伴隨狀態(tài)碼的字符串信息
readyState ? ? ? ? ? ? ?	對象狀態(tài)值,存有服務(wù)器響應(yīng)的狀態(tài)信息。 每當(dāng) readyState 改變時，onreadystatechange 函數(shù)就會被執(zhí)行。

?readyState 屬性可能的值：

? 狀態(tài) ??描述

? ? 0	? 請求未初始化（在調(diào)用 open() 之前）
? ? 1	? 請求已提出（調(diào)用 send() 之前）
? ? 2	? 請求已發(fā)送（這里通常可以從響應(yīng)得到內(nèi)容頭部）
? ? 3	? 請求處理中（響應(yīng)中通常有部分?jǐn)?shù)據(jù)可用，但是服務(wù)器還沒有完成響應(yīng)）
? ? 4	? 請求已完成,此時可以通過通過responseXml和responseText獲取完整的回應(yīng)數(shù)據(jù)。?

　　但是，由于各瀏覽器之間存在差異，所以創(chuàng)建一個XMLHttpRequest對象可能需要不同的方法。這個差異主要體現(xiàn)在IE和其它瀏覽器之間。下面是一個比較標(biāo)準(zhǔn)的創(chuàng)建XMLHttpRequest對象的方法。

?

/** 創(chuàng)建XMLHttpRequest對象* */function ajaxFunction(){var xmlHttp;try { // Firefox, Opera 8.0+, SafarixmlHttp = new XMLHttpRequest();} catch (e) { // Internet Explorertry {xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");} catch (e) {try {xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");} catch (e) {alert("您的瀏覽器不支持AJAX！");return false;}}}return xmlHttp;}

?

?

?

AJAX(客戶端)開發(fā)步驟：

1.創(chuàng)建XMLHttpRequest對象

var xmlHttp = ajaxFunction();

2.接受服務(wù)器端的響應(yīng)

/* readyState 屬性存有服務(wù)器響應(yīng)的狀態(tài)信息。每當(dāng) readyState 改變時，onreadystatechange 函數(shù)就會被執(zhí)行。*/ xmlHttp.onreadystatechange = function(){if(xmlHttp.readyState==4){var data=xmlHttp.responseText;alert("xmlHttp.responseText:"+data);} }

3.打開和服務(wù)器的連接

/** bstrMethod: http方法，例如：POST、GET、PUT及PROPFIND。大小寫不敏感。 * bstrUrl: 請求的URL地址，可以為絕對地址也可以為相對地址。 * varAsync [可選]:布爾型，指定此請求是否為異步方式，默認(rèn)為true。如果為真，當(dāng)狀態(tài)改變時會調(diào)用onreadystatechange屬性指定的回調(diào)函數(shù)。 * bstrUser [可選]:如果服務(wù)器需要驗證，此處指定用戶名，如果未指定，當(dāng)服務(wù)器需要驗證時，會彈出驗證窗口。 * bstrPassword [可選]:驗證信息中的密碼部分，如果用戶名為空，則此值將被忽略。 */ xmlHttp.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword); //POST方式向服務(wù)器發(fā)送AJAX請求時要通過設(shè)置請求頭來指定為application/x-www-form-urlencoded編碼類型, 代碼如下： xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

4.發(fā)送請求到http服務(wù)器

/* varBody:欲通過此請求發(fā)送的數(shù)據(jù)。 */ xmlHttp.send(varBody);

?

個人博客：學(xué)習(xí)園

原文地址：http://www.xuexiyuan.cn/article/detail/192.html

?

?

?

?

?

?

?

?

?

?

總結(jié)

以上是生活随笔為你收集整理的AJAX入门——工作原理的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。