1一些概念:
DHtml,XML,XML衍生語言(XUL,XAML,XAMJ.MXML),Javascript,CSS,XMLHttpRequest,DOM,JSON
AJax 的應用:google maps,google mail,google suggest,amazon的搜索工具,
2AJax的第一篇文章:
Jesse James Garrett of Adaptive Path:AJax:A new approach to web applications
http://adaptivepath.com/publications/essays/archives/000385.PHP
http://www.Javalobby.org/articles/AJax/
3一些關鍵理念
以前的web是基於請求/響應模式的,對於每個請求都會重新加載整個頁面,原來的頁面被放到浏覽器的歷史棧中。
AJax使這種模式發生改變,這是AJax的核心所在。
用AJax可以自由地與服務器進行異步的交互。雖然以前也能異步交互,但是稱不上自由。
AJax最初是Asynchronous Javascript + XML,現在這個詞被擴展了:所有允許浏覽器與服務器通信而無需刷新當前頁面的技術。
4AJax的典型使用(用Javascript實現):
a。新建XHR對象
function createXMLHttpRequest()
{
if (window.ActiveXObject)//IE
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequestI)
{
xmlHttp = new XMLHttpRequest();
}
}
b。指定XHR.onreadystatechange對應的函數,onreadystatechange其實是一個事件處理器,在XHR狀態變化時被調用。通常用來捕捉請求,響應的狀態。
通常在一個函數中做出定義,該函數在向服務器請求服務時被調用。
同時指定請求的方法,及請求資源的URL等
function startRequest()
{
createXMLHttpRequest();
XMLHttp.onreadystatechange= handleStateChange;
XMLHttp.open("GET","innerHtml.XML",true);
XMLHttp.send(null);//.發出請求
}
c。定義onreadystatechange對應的處理函數。
function handleStateChange()
{
...
}
d。在Html中相應的位置,指定對服務器的請求。
<input type="button" />
5DOM的使用
服務器對請求的響應,可能以文本的方式,或XML的方式,發送回來。
在handleStateChange()中分別用xmlHttp.responseText,xmlHttp.responseXML來捕捉。
後者返回一個DOM對象。
DOM是與平台和語言無關的接口,允許程序和腳本動態地訪問和更新文檔的內容、結構、樣式。文檔可以進一步處理,處理結果可以放回到所提供的頁面中。
DOM面向的文檔是Html,XML。
Javascript中將web頁面視為一系列元素按一定結構構成的,可以用一個DOM來訪問。
6發送請求參數
上面的例子中,send(null)這個發送請求的函數沒有參數,
現在要發送請求參數。另外,請求發送有兩種方式,get,post。
不改變數據模型狀態,用get,否則用post。
兩者第二個區別:get將請求以字符串的形式附在URL中發送,
post將請求以請求體的方式發送。
請求參數:content
send(content),content可以是DOM,輸入流,串,XML等。
xml可以發送復雜的參數,但是XML本身比較復雜,有一個解決方案用JSON來發送參數。JSON是一種輕量級數據交換方式,是文本方式的,提供了多種語言的支持。如java,Javascript,詳見www.JSon.org