1乾闰、關(guān)于ajax的名字
ajax?的全稱是Asynchronous JavaScript and XML，其中盈滴，Asynchronous?是異步的意思涯肩，它有別于傳統(tǒng)web開發(fā)中采用的同步的方式。
2巢钓、關(guān)于同步和異步
步傳輸是面向字符的傳輸病苗，它的單位是字符；而同步傳輸是面向比特的傳輸症汹，它的單位是楨硫朦，它傳輸?shù)臅r(shí)候要求接受方和發(fā)送方的時(shí)鐘是保持一致的。
具體來說背镇，異步傳輸是將比特分成小組來進(jìn)行傳送咬展。一般每個(gè)小組是一個(gè)8位字符泽裳，在每個(gè)小組的頭部和尾部都有一個(gè)開始位和一個(gè)停止位，它在傳送過程中接收方和發(fā)送方的時(shí)鐘不要求一致破婆，也就是說涮总，發(fā)送方可以在任何時(shí)刻發(fā)送這些小組，而接收方并不知道它什么時(shí)候到達(dá)祷舀。一個(gè)最明顯的例子就是計(jì)算機(jī)鍵盤和主機(jī)的通信瀑梗，按下一個(gè)鍵的同時(shí)向主機(jī)發(fā)送一個(gè)8比特位的ASCII代 碼，鍵盤可以在任何時(shí)刻發(fā)送代碼裳扯，這取決于用戶的輸入速度夺克，內(nèi)部的硬件必須能夠在任何時(shí)刻接收一個(gè)鍵入的字符。這是一個(gè)典型的異步傳輸過程嚎朽。異步傳輸存在 一個(gè)潛在的問題铺纽，即接收方并不知道數(shù)據(jù)會(huì)在什么時(shí)候到達(dá)。在它檢測到數(shù)據(jù)并做出響應(yīng)之前哟忍，第一個(gè)比特已經(jīng)過去了狡门。這就像有人出乎意料地從后面走上來跟你說 話，而你沒來得及反應(yīng)過來锅很，漏掉了最前面的幾個(gè)詞其馏。因此，每次異步傳輸?shù)男畔⒍家砸粋€(gè)起始位開頭爆安，它通知接收方數(shù)據(jù)已經(jīng)到達(dá)了叛复，這就給了接收方響應(yīng)、接收 和緩存數(shù)據(jù)比特的時(shí)間扔仓；在傳輸結(jié)束時(shí)褐奥，一個(gè)停止位表示該次傳輸信息的終止。按照慣例翘簇，空閑（沒有傳送數(shù)據(jù)）的線路實(shí)際攜帶著一個(gè)代表二進(jìn)制1的信號撬码。步傳輸?shù)拈_始位使信號變成0，其他的比特位使信號隨傳輸?shù)臄?shù)據(jù)信息而變化版保。最后呜笑，停止位使信號重新變回1，該信號一直保持到下一個(gè)開始位到達(dá)彻犁。例如在鍵盤上數(shù)字“1”叫胁，按照8比特位的擴(kuò)展ASCII編碼，將發(fā)送“00110001”汞幢，同時(shí)需要在8比特位的前面加一個(gè)起始位驼鹅，后面一個(gè)停止位。
同步傳輸?shù)谋忍胤纸M要大得多。它不是獨(dú)立地發(fā)送每個(gè)字符谤民，每個(gè)字符都有自己的開始位和停止位，而是把它們組合起來一起發(fā)送疾宏。我們將這些組合稱為數(shù)據(jù)幀张足，或簡稱為幀。
數(shù)據(jù)幀的第一部分包含一組同步字符坎藐，它是一個(gè)獨(dú)特的比特組合为牍，類似于前面提到的起始位，用于通知接收方一個(gè)幀已經(jīng)到達(dá)岩馍，但它同時(shí)還能確保接收方的采樣速度和比特的到達(dá)速度保持一致碉咆，使收發(fā)雙方進(jìn)入同步。
幀的最后一部分是一個(gè)幀結(jié)束標(biāo)記蛀恩。與同步字符一樣疫铜，它也是一個(gè)獨(dú)特的比特串，類似于前面提到的停止位双谆，用于表示在下一幀開始之前沒有別的即將到達(dá)的數(shù)據(jù)了壳咕。
同步傳輸通常要比異步傳輸快速得多。接收方不必對每個(gè)字符進(jìn)行開始和停止的操作顽馋。一旦檢測到幀同步字符谓厘，它就在接下來的數(shù)據(jù)到達(dá)時(shí)接收它們。另外寸谜，同步傳輸?shù)拈_銷也比較少竟稳。例如，一個(gè)典型的幀可能有500字節(jié)（即4000比特）的數(shù)據(jù)熊痴，其中可能只包含100比特的開銷他爸。這時(shí)，增加的比特位使傳輸?shù)谋忍乜倲?shù)增加2.5%果善，這與異步傳輸中25 %的增值要小得多讲逛。隨著數(shù)據(jù)幀中實(shí)際數(shù)據(jù)比特位的增加，開銷比特所占的百分比將相應(yīng)地減少岭埠。但是盏混，數(shù)據(jù)比特位越長，緩存數(shù)據(jù)所需要的緩沖區(qū)也越大惜论，這就限制了一個(gè)幀的大小许赃。另外，幀越大馆类，它占據(jù)傳輸媒體的連續(xù)時(shí)間也越長混聊。在極端的情況下，這將導(dǎo)致其他用戶等得太久乾巧。
3句喜、ajax所包含的技術(shù)
ajax并非一種新的技術(shù)预愤，而是幾種原有技術(shù)的結(jié)合體。它由下列技術(shù)組合而成咳胃。
1.使用CSS和XHTML來表示植康。
?? 2.?使用DOM模型來交互和動(dòng)態(tài)顯示。
?? 3.使用XMLHttpRequest來和服務(wù)器進(jìn)行異步通信展懈。
?? 4.使用javascript來綁定和調(diào)用销睁。
在上面幾中技術(shù)中，除了XmlHttpRequest對象以外存崖，其它所有的技術(shù)都是基于web標(biāo)準(zhǔn)并且已經(jīng)得到了廣泛使用的冻记，XMLHttpRequest雖然目前還沒有被W3C所采納，但是它已經(jīng)是一個(gè)事實(shí)的標(biāo)準(zhǔn)来惧，因?yàn)槟壳皫缀跛械闹髁鳛g覽器都支持它冗栗。
4、ajax原理和XmlHttpRequest對象
Ajax的原理簡單來說通過XmlHttpRequest對象來向服務(wù)器發(fā)異步請求供搀，從服務(wù)器獲得數(shù)據(jù)贞瞒，然后用javascript來操作DOM而更新頁面。這其中最關(guān)鍵的一步就是從服務(wù)器獲得請求數(shù)據(jù)趁曼。要清楚這個(gè)過程和原理军浆，我們必須對XMLHttpRequest有所了解。
XMLHttpRequest是ajax的核心機(jī)制挡闰，它是在IE5中首先引入的乒融，是一種支持異步請求的技術(shù)。簡單的說摄悯，也就是javascript可以及時(shí)向服務(wù)器提出請求和處理響應(yīng)赞季，而不阻塞用戶。達(dá)到無刷新的效果奢驯。
?? 所以我們先從XMLHttpRequest講起申钩，來看看它的工作原理。
?? 首先瘪阁，我們先來看看XMLHttpRequest這個(gè)對象的屬性撒遣。
? 它的屬性有：
? onreadystatechange??每次狀態(tài)改變所觸發(fā)事件的事件處理程序。
? responseText?????從服務(wù)器進(jìn)程返回?cái)?shù)據(jù)的字符串形式管跺。
? responseXML?? ?從服務(wù)器進(jìn)程返回的DOM兼容的文檔數(shù)據(jù)對象义黎。
? status???????????從服務(wù)器返回的數(shù)字代碼，比如常見的404（未找到）和200（已就緒）
? status Text???????伴隨狀態(tài)碼的字符串信息
? readyState???????對象狀態(tài)值
0 (未初始化)?對象已建立豁跑，但是尚未初始化（尚未調(diào)用open方法）
1 (初始化)?對象已建立廉涕，尚未調(diào)用send方法
2 (發(fā)送數(shù)據(jù)) send方法已調(diào)用，但是當(dāng)前的狀態(tài)及http頭未知
3 (數(shù)據(jù)傳送中)?已接收部分?jǐn)?shù)據(jù)，因?yàn)轫憫?yīng)及http頭不全狐蜕，這時(shí)通過responseBody和responseText獲取部分?jǐn)?shù)據(jù)會(huì)出現(xiàn)錯(cuò)誤宠纯，
4 (完成)?數(shù)據(jù)接收完畢,此時(shí)可以通過通過responseXml和responseText獲取完整的回應(yīng)數(shù)據(jù)
但是，由于各瀏覽器之間存在差異层释，所以創(chuàng)建一個(gè)XMLHttpRequest對象可能需要不同的方法婆瓜。這個(gè)差異主要體現(xiàn)在IE和其它瀏覽器之間。下面是一個(gè)比較標(biāo)準(zhǔn)的創(chuàng)建XMLHttpRequest對象的方法湃累。
function CreateXmlHttp() {
//非IE瀏覽器創(chuàng)建XmlHttpRequest對象
if (window.XmlHttpRequest) {
xmlhttp = new XmlHttpRequest();
}
//IE瀏覽器創(chuàng)建XmlHttpRequest對象
if (window.ActiveXObject) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {
try {
xmlhttp = new ActiveXObject("msxml2.XMLHTTP");
}
catch (ex) { }
}
}
}
function Ustbwuyi() {
var data = document.getElementById("username").value;
CreateXmlHttp();
if (!xmlhttp) {
alert("創(chuàng)建xmlhttp對象異常勃救！");
return false;
}
xmlhttp.open("POST", url, false);
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4) {
document.getElementById("user1").innerHTML = "數(shù)據(jù)正在加載...";
if (xmlhttp.status == 200) {
document.write(xmlhttp.responseText);
}
}
}
xmlhttp.send();
}
