本想翻譯IBM的一篇文章 Build apps using Asynchronous JavaScript with XML 但是發(fā)現(xiàn)不如就按照那個方式想怎么寫就怎么寫。之后有時間了會把其中的一個系列從基本應(yīng)用到使用DWR框架的翻出來，也許對一些被AJAX buzz word一直騷擾但是沒親密接觸的人有些用處。嗯，把dojo也列入計劃吧，但愿我能堅持。
由于JAVA版 servlet+web.xml配置起來稍顯麻煩，而且此處主要介紹前端javascript，并且是入門文章，所以來個PHP版本，算是IBM意譯PHP Ver.我會把code workthrough伴隨在講解當(dāng)中。
AJAX是asynchronous javascript and xml的簡稱。異步是通過由XMLHttpRequest對象替代傳統(tǒng)頁面刷新式請求來實現(xiàn)，異步的目的是提供更加連續(xù)的 友好的用戶交互。我想大多數(shù)人都討厭等待瀏覽器的processBar藍(lán)色慢慢變長的無聊過程和枯燥的白色無響應(yīng)頁面。
那組成AJAX的幾項關(guān)鍵技術(shù) javascript css DOM XMLHttpRequest，可能只有XMLHttpRequest對我們來說是相對來說陌生的，前3項，只要做過web app的都不可以說不了解。
XMLHttpRequest：XMLHttpRequest是一個可以讓用戶不刷新頁面的前提下直接提交和得到xml數(shù)據(jù)的對象。
這并不是一個xx組織的標(biāo)準(zhǔn)產(chǎn)生物，所以要得到一個這樣的對象，是通過不同瀏覽器的擴(kuò)展來實現(xiàn)。IE通過ActiveX Object來提供，所以大多數(shù)ajax應(yīng)用會看到對象的產(chǎn)生過程都有對瀏覽器的判斷以達(dá)到兼容。不要開始大罵MS,平臺給我們帶來的麻煩并非都是微軟造成。對于此對象，我不是個歷史學(xué)家，所以只能稍微查找些資料來了解。
It is not yet being embodied in any public standard (although something similar is in the works for the proposed W3C DOM Level 3 Load and Save spec)from XML.COM所以它不是一個標(biāo)準(zhǔn)而微軟不去執(zhí)行的例子。
Microsoft first implemented the XMLHttpRequest object in Internet Explorer 5 for Windows as an ActiveX object. Engineers on the Mozilla project implemented a compatible native version for Mozilla 1.0 (and Netscape 7). Apple has done the same starting with Safari 1.2. from apple.com
所以，可以感謝一下微軟，還是做了些創(chuàng)新的，估計是為了他的EXChangeServer的web client端服務(wù)的……我猜我猜。
Similar functionality is covered in a proposed W3C standard, Document Object Model (DOM) Level 3 Load and Save Specification. In the meantime, growing support for the XMLHttpRequest object means that is has become a de facto standard that will likely be supported even after the W3C specification becomes final and starts being implemented in released browsers (whenever that might be).from apple.com
所以我們還是要通過如下代碼方式創(chuàng)建一個對象：
function init() 
{
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
} else if (window.ActiveXObject) {
window.alert("ActiveXObject");
req = new ActiveXObject("Microsoft.XMLHTTP");
}
var url = "server.php";
req.open("POST", url, true);
req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
}
通過對不同瀏覽器的判斷，產(chǎn)生不同的對象。我想大至大家了解了此對象用處，http請求也是在一些標(biāo)準(zhǔn)協(xié)議中定義的header之后以名稱，值對的方式來向服務(wù)器發(fā)送，作為xml天生對數(shù)據(jù)良好描述的本領(lǐng)，擔(dān)任此任務(wù)小case，但是對于文件上穿等，還是用傳統(tǒng)form來解決滴吧。
備考：Table 1. Common XMLHttpRequest Object Methods
|
|
|
Method |
Description |
|
abort() |
Stops the current request |
|
getAllResponseHeaders() |
Returns complete set of headers (labels and values) as a string |
|
getResponseHeader("headerLabel") |
Returns the string value of a single header label |
|
open("method", "URL"[, asyncFlag[, "userName"[, "password"]]]) |
Assigns destination URL, method, and other optional attributes of a pending request |
|
send(content) |
Transmits the request, optionally with postable string or DOM object data |
|
setRequestHeader("label", "value") |
Assigns a label/value pair to the header to be sent with a request |
好了，廢話講完了，開始菜鳥級別的親密接觸。我想ajax是有應(yīng)用場景的，那么我舉個我感覺很貼切的應(yīng)用場景，在論壇注冊的時候，驗證是否已經(jīng)存在你要注冊的用戶名。在沒有ajax之前，我們都要單獨(dú)點(diǎn)一個button，彈出新窗口等待結(jié)果。這里面我們使用戶輸入完了用戶名之后，不影響其正常填寫其他內(nèi)容，神不知鬼不覺地完成驗證并提醒客戶是否已經(jīng)有人注冊了。
首先構(gòu)建一個注冊畫面 regForm.php
<html>
<head>
<script type="text/javascript" src="ajax.js" >
</script>
</head>
<body>
<font face="Arial,Helvetica,Verdana" size="3">
<form name="regForm" action="reg.php">
<b>Enter Your User ID: </b>
<input type="text" name="userID" onblur="validate(this.form)"/>
<!--Message -->
<span id="msg"></span>
<br/>
<input type=”password” name=”pwd”/>
.other input filed
<hr>
</body>
</html>
好啦，一個丑陋無比的注冊頁面搞定了。
緊接著，完成我們的ajax.js文件
var req;
var url;
定義req url全局變量 一個用來表示XMLHttpReqeust一個表示請求的服務(wù)器端資源。
function init() {
//。。。。。看上面
}
function validate(formObj) {
init();
req.onreadystatechange = userIDValidator;
req.send("userID ="+formObj.userID.value);
}
此函數(shù)便是當(dāng)用戶輸入完了用戶名，自鳴得意的去輸入其他的文本域時觸發(fā)的事件，它悄悄地執(zhí)行。由于在init()函數(shù)中我們?nèi)绱嗽O(shè)置req.open("POST", url, true);最后一個參數(shù)true就是異步的設(shè)置所在，如果未false,效果大家看看msn spaces的流言就知道了，葉面雖然不刷新但是要停止響應(yīng)一段時間，嗯，給你點(diǎn)看字的機(jī)會卻不讓你滾動邊上可愛的scroll翻頁。
既然我們設(shè)置了異步處理，那么執(zhí)行完了通知誰啊?通過此句req.onreadystatechange = userIDValidator;當(dāng)req狀態(tài)改變的時候，執(zhí)行userIDValidator。這是一個回調(diào)函數(shù)的應(yīng)用，不理解啥是回調(diào)沒關(guān)系，總之req狀態(tài)改變了，就執(zhí)行此函數(shù)名字的函數(shù)(你也可以寫匿名函數(shù)req.onreadystatechange=new Function{javascript真?zhèn)ゴ?SPAN lang=EN-US>}).一切就緒，向服務(wù)器發(fā)送請求。Send()方法中傳遞請求的參數(shù)。
當(dāng)服務(wù)器響應(yīng)了呢？那就是userIDValidator要干活的時候啦。
function userIDValidator() {
if (req.readystate == 4) {
if (req.status == 200) {
if(req.responseText!=”true”){
window.alert(“你怎么注冊別人有的用戶名啊?”);
document.getElementById(“msg”).innerHTML=”換一個換一個”;
};
}
}
}
req.readystate == 4代表請求響應(yīng)完成 具體的代碼意義如下
0 = uninitialized
1 = loading
2 = loaded
3 = interactive
4 = complete
req.status == 200這個是標(biāo)準(zhǔn)的http響應(yīng)狀態(tài)碼，有些時候你的ajax應(yīng)用響應(yīng)石沉大海，你就可以輸出這個req.status調(diào)試一下，看看是不是出現(xiàn)了404 202等咚咚。
待會我們看見那個極其簡單的服務(wù)器端php文件返回的text/html普通響應(yīng)，所以此刻我們用req.responseText。其實稍微復(fù)雜一些的應(yīng)用都要返回xml作為響應(yīng)結(jié)果，然后客戶端用腳本解析xml文件再通過操作DOM來改變頁面內(nèi)對象的內(nèi)容或者結(jié)構(gòu)等。也可以返回的xml對象通過xslt來解析，不過增加了學(xué)習(xí)的曲線。服務(wù)器端產(chǎn)生xml對象也是繁瑣的工程，所以出現(xiàn)了很多現(xiàn)成的框架幫助簡化開發(fā)，比如國產(chǎn)buffalo,洋貨DWR等，通過與前端dojo Rico等框架組合，產(chǎn)生強(qiáng)大的交互功能，一流的用戶體驗。
那么簡單的xml操作可參考ibm文章中做法：
var messageObj = req.responseXML.getElementsByTagName("message")[0];
var message = messageObj.childNodes[0].nodeValue;
if (message == "true") {
msg.innerHTML = "Subscription is valid";
document.forms[0].order.disabled = false;
} else {
msg.innerHTML = "Subscription not valid";
document.forms[0].order.disabled = true;
}
ok了，看看服務(wù)器端廬山真面目吧。
<?php
$userid = $_POST['userid'];
echo "true";
?>
我靠，太簡單了吧，你耍我呢啊？這個……我用寫全么？無非就是
<?php
echo isValide($_POST['userid']);
?>
isValide()中連接數(shù)據(jù)庫，查詢，返回結(jié)果……
ｏｋ，你已經(jīng)可以神不知鬼不覺地檢查用戶名，然后突然彈出窗口提示用戶，你的名字不對。
下一教程應(yīng)該是談?wù)搶ο笮蛄谢头葱蛄谢瘑栴} 之后是ＤＷＲ 之后是ｄｏｊｏ 之后是javascript的debug 之后是buffalo 之后是……之后是……