Ajax 學習筆記(1)

技術的核心是採用XmlHttp來請求和接收回應。XmlHttp只是一種技術規範，具體的實現上IE和Firefox有所不同，IE是用ActiveX方式，而Firefox是內建實現的。

IE下建立XmlHttp對象：
A=new ActiveXObject('Msxml2.XMLHTTP');

Firefox下建立XmlHttp對象：
A=new XMLHttpRequest();

還可以用下面的寫法，可以比較好的相容IE和Firefox：
function createXH(){
var A=null;
try { A=new ActiveXObject('Msxml2.XMLHTTP') } catch(e) {
 try{A=new ActiveXObject('Microsoft.XMLHTTP') } catch(oc) { A=null }
}
if ( !A && typeof XMLHttpRequest != 'undefined' ) { A=new XMLHttpRequest() }
return A
}

建立好XmlHttp之後，接下來就是發送請求和接收回應：
var xmlhttp=createXH();
xmlhttp.open('POST', 'Message/CheckNew.aspx', false);
false - 表示發送訊息之後一直等待回應（即同步執行的方式）；
true - 表示發送訊息之後不等待回應，繼續執行下一步（即非同步執行的方式）；

下面是同步執行的代碼寫法：
xmlhttp.open('POST', 'Message/CheckNew.aspx', false);
xmlhttp.send(''); // 這裡也可以在請求時發送一些資料，如果沒有資料，也要發個空資料
var rt=xmlhttp.responseText；
// rt 就是接受回應的資料，接下來就是用戶端對rt進行分析處理

同步執行的寫法一般情況最好不要用，因為如果請求的伺服器端半天不回應或者網路不太穩定的情況下，瀏覽器會一直等待回應，而且在等待期間瀏覽器幾乎死掉，CPU佔用接近100%！
用非同步執行的方式就可以避免這個問題，如下：
var xmlhttp = createXH();
function checkNewMessages(){
 xmlhttp.open('POST', 'Message/CheckNew.aspx', true);
 xmlhttp.onreadystatechange=continue;
 xmlhttp.send('');
}
function continue(){
 if(xmlhttp.readyState==4){
 var rt = xmlhttp.responseText;
}
}

xmlHttp.responseText返回的字串，如何處理這些字串？一些Ajax架構對這個處理過程進行了封裝，增加很多種資料類型，甚至還可以處理DataSet。如果不想用這些架構，也可以使用簡單類型，如請求時將請求資料格式化為Xml方式（便於伺服器端的Aspx處理），而返回結果則寫成javascript的數組運算式形式（方便用戶端進行處理）。

如：
發送時
var xml='<message><receiver>kathy</receiver><content>message context!</content></message>';
...
xmlhttp.send(xml);
接收時伺服器端返回的字串為：
['rrooyy','2005-05-01 08:22:12','See you!']
var rt=xmlhttp.responseText;
var msg=eval(rt);
然後就可以按照數組方式對資料進行處理了；