AJax指南(1)---- Hello,world
在開始之前,首先解釋一下什麼是AJAX,AJax的英文全稱是Asynchronous Javascript and XML,即異步JavaScript與XML。它是一種新興的用於開發RIA程序的web開發技術。目前比較典型的應用包括GMail,Google maps,Google group。
對於用戶來說它的最大好處就是不必每次都刷新整個頁面,而只需對發生變化的部分進行更新,從而有效提高網頁的加載速度。對於開發者來說,AJAX提供了一 種高效的RIA(胖客戶端程序)開發模型,由於AJAX使用的都是已經存在好多年的"舊"技術,因此進入門檻很低,並且這些技術都已經標准化,並得到了主 流廠商的支持,因此AJAX具有良好的跨平台特性,還有很重要的一點,同商業的RIA解決方案(比如MicroMedia的Flex)比較起來,AJAX 幾乎是免費,一般來說,要開發一個AJax應用,一個寫字板就足夠了。
介紹了這麼多,下面就讓我們先從最簡單的Hello World開始吧!
與傳統的Web應用僅由服務端構成不同,AJax應用分為客戶端和服務端兩個部分,客戶端的作用在於它可以異步的從服務端獲取數據並將其動態插入到 HTML中,因此我們首先需要構造一個靜態的HTML頁面hello.Html,並為它添加一個DIV標簽:
<Html>
<HEAD>
<TITLE> AJax指南(1) ---- Hello,world! </TITLE>
</HEAD>
<BODY >
<DIV ID="AJax-sample">
</DIV>
</BODY>
</Html>
接下來我們要做的事情就是從服務端異步的獲取一條信息並將他插入到DIV標簽內,要從服務端獲取消息,首先我們需要獲取一個HTTP請求對象,下面的 JavaScript函數可以做到這一點:
//獲取Http請求對象,這個對象用於客戶端向服務
//端發送異步的http請求
function getHTTPObject()
{
var http;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer")
{
//如果用戶使用IE,就返回XMLHTTP的ActiveX對象
http = new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
//否則返回一個XMLHttpRequest對象
http = new XMLHttpRequest();
}
return http;
}
得到HTTP請求對象之後,我們需要向服務段發送請求,假設服務端為hello.PHP,下面的代碼負責獲取服務端的響應:
//獲取全局的HTTP請求對象
var http = getHTTPObject();
//處理請求狀態變化
function getHello()
{
//4表示請求已完成
if (http.readyState == 4)
{
//獲取服務段的響應文本
var helloStr = http.responseText;
//插入響應到ID為AJax-sample的DIV標簽內
document.getElementById("AJax-sample").innerHtml = helloStr;
}
}
function HelloWorld()
{
var url = "hello.PHP";
//指定服務端的地址
http.open("GET", url, true);
//請求狀態變化時的處理函數
http.onreadystatechange = getHello;
//發送請求
http.send(null);
}
將上面這段代碼插入Head標簽,然後將Body標簽的onload屬性設為HelloWorld方法,整個客戶端就完工了。
服務端(hello.PHP )相當簡單,它只是向客戶端發送一個Hello World消息:
<?PHP
echo "Hello, world!";
?>
最後需要注意的是,出於安全方面的考慮,HTTP請求對象只能向同一個域(domain)發送請求,也就是hello.Html和hello.PHP必須屬於同一個域,但是允許使用.和..,也就是說他們可以處於不同的目錄。