DIV CSS 佈局教程網

AJax學習
編輯:AJAX詳解     

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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved