Ajax入門學習筆記

今天下午,隨便翻了幾本Ajax的書籍 .包括Lee Babin的 Beginning Ajax with PHP ; Ajax Hack 等。算是曉得Ajax是啥東西了。

Ajax依賴於Javascript和XML,實現異步的數據傳輸,在Web客戶端的表現就是頁面無需刷新。這玩意最早是、Microsoft提出來的,貌似現在還沒有國際標準,但所有主流瀏覽器都支持。Ajax核心是Javascript的 windows.XMLHttpRequest對象 (IE6以下版本是ActiveXObject)

要創建一個 Ajax實例,只需創建 XMLHttpRequest對象即可。但是IE6及以下版本必須用完全不同的ActiveXObject方式創建。所幸的是除了初始化外兩種方式創建的對象屬性和方法幾乎完全相同 .而且 IE7也開始支持標準XMLHttpRequest 對象.但現在貌似IE6還有人用..


 

XMLHttpRequest對象使用極其簡單,基本的用法如下:

function ajax(uri,id) {
var content=document.getElementById(id);
xmlhttp.open(“GET”,uri);
//xmlhttp是創建的XMLHttpRequest對象
xmlhttp.onreadystatechange=function() {
if( xmlhttp.readystate=4 && xmlhttp.status=200) {
content.innerHTML=xmlhttp.responseText;
}
xmlhttp.send(null);

}

 

所有複雜的Ajax運用,基本原理都是這樣 .XMLHttprequest的 open方法向服務器提交請求,GET是請求方式,也可以是POST.uri是目標文件URL,例如”abc.htm” ,” abc.php&a=1″之類,也可以是絕對路徑. XMLHttprequest 的 readystate有四種狀態: 0,1,2,3,4 分別表示 初始化,載入中,正在載入,交互中和完成. 用onreadystatechange監控這一值改變,當完成後 如果 服務器返回狀態碼是200 ,則將本地文檔里將特定id區塊內容設為服務器返回的內容 .這個ID通常是一個div塊級元素.這裡用的是基本的DOM操作 getElementById.

然後,在頁面里的a鏈接,表單,區塊等標籤里,加入onclick onfocus onmouseover 等事件監控程序,向上面建立的ajax函數傳遞參數即可.基本的Ajax應用就是這樣.

幾點簡單的說明:
1.使用Ajax動態改變頁面內容無需刷新,但仍需要一定時間.期間通常讓用戶知道服務器正在處理請求.一般的方法就是在點擊鏈接後顯示一個 “Loading …”的提示和GIF圖標,就像這樣:

Loading …

一般把這個提示放到一個div區塊里,這個區塊可以事先建立好空白的,把樣式visibility設為hidden .用時用getElementById(‘id’) 設置其中內容 ,並更改樣式為可見 .也可以需要的時候用Javascript直接新建區塊:
var example=document.ceateElement(‘id1′);
example.class=”css-class”;// 可以為區塊指定CSS樣式
var parent=document.getElementById(“parentid’);
parent.appengChild(example);
新建一個id為id1的 DIV區塊,添加到原有文檔id為parent的區塊最後.
Ajax本來就和DOM有密切關係,一些DOM操作都可以使用.

2.Ajax需要Javascript ,為了使網站在不支持JS的瀏覽器上保持兼容,最常見方法如下:

word

如果瀏覽器不支持JS,點擊鏈接正常請求page1.htm文件,否則用ajax動態請求並更改文檔內容.這種方式對搜索引擎也沒有影響.

3. Ajax會使瀏覽器的”後退” ,”前進” 按鈕完全失去作用,長期以來很多用戶習慣於使用瀏覽器的後退和前進功能,在Ajax下這不但不起作用,還可能造成填寫的表單數據丟失或其他問題. 目前看解決這個問題方法有兩個: 一是瀏覽器Hack ,當使用jacascript的 location.hash設置緢點時,瀏覽器會將目前頁面內容保存為一個狀態.或者改變頁面內iframe框架內容也有同樣效果 . (貌似,只對部分瀏覽器有效)

還有一種就是使用外部Jacascript腳本,改變瀏覽器history對象. 最著名的是Really Simple History,這是一個Javascript Library ,使用很方面.它可以使瀏覽器”保存”當前用ajax生成頁面的內容並能通過 後退 /前進按鈕正確工作.