去年開(kāi)始看AJAX時(shí)候所寫(xiě)的第一個(gè)小程序，整理了下。應(yīng)該算AJAX最簡(jiǎn)單的應(yīng)用了。
?
首先，演示一下實(shí)際運(yùn)行的
效果。點(diǎn)擊彈出新頁(yè)面中的“See Author”鏈接，你將會(huì)看到該頁(yè)面作者。從頁(yè)面提交到顯示從服務(wù)器獲得的結(jié)果，這段過(guò)程你將不會(huì)發(fā)現(xiàn)頁(yè)面的重刷新。
下面給出該示例的代碼：
1. ajax.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>A simple AJAX example</title>
<script type="text/javascript"><!--
? function findAuthor(file){
???? var xmlObj = null;
??? ?if(window.XMLHttpRequest){
???? ?? xmlObj = new XMLHttpRequest();
?? ? } else if(window.ActiveXObject){
????? ?? xmlObj = new ActiveXObject("Microsoft.XMLHTTP");
?? ? } else {
????? return;
? ? }
?? ?xmlObj.onreadystatechange = function(){
???? ? if(xmlObj.readyState == 4){
?????? ??? updateObj('author',
?????? ?xmlObj.responseXML.getElementsByTagName('name')[0].firstChild.data);
??? ?? }
?????}
??? xmlObj.open ('GET', file, true);
??? xmlObj.send ('');
? }
? function updateObj(obj, data){
?? var textNode = document.createTextNode(data);
?? document.getElementById(obj).appendChild(textNode);
? }
? //--></script>
</head>
<body>
<h1>A simple AJAX program</h1>
<p id="obj">This page is powered by <a id='link' href="data.xml"
?title="View the author."
?onclick="findAuthor('data.xml'); this.style.display='none'; return false">See
Author.</a><span id="author" style="color: olive; font-weight: bolder"></span></p>
</body>
</html>
?
2.data.xml
<?xml version="1.0" encoding="UTF-8"?>
<author>
?<name>www.jsfchina.org</name>
</author>
?
解析下。
該例應(yīng)該算是最簡(jiǎn)單的ajax應(yīng)用了。為了盡求簡(jiǎn)單性，這里沒(méi)有使用到任何服務(wù)器端技術(shù)，諸如servlet,cgi等等。這里并沒(méi)有使用到任何業(yè)務(wù)方法，而是直接從服務(wù)器的一個(gè)xml文檔(data.xml)中讀取數(shù)據(jù)。為了簡(jiǎn)潔性，本例將JavaScript文件也集成到了ajax.html中，實(shí)際應(yīng)用中完全可以獨(dú)立出去使用。
該例通過(guò)點(diǎn)擊鏈接，激發(fā)了一個(gè)javascript的方法然后進(jìn)行交互處理。
AJAX的核心是XMLHttpRequest，本例通過(guò)下列代碼創(chuàng)建這個(gè)對(duì)象
? var xmlObj = null;
? if(window.XMLHttpRequest){
????? xmlObj = new XMLHttpRequest();
? } else if(window.ActiveXObject){
????? xmlObj = new ActiveXObject("Microsoft.XMLHTTP");
? } else {
????? return;
? }
if(window.XMLHttpRequest)處理了瀏覽器是mozilla的情況，而if(window.ActiveXObject)則處理了瀏覽器為IE的情況，目的都是一個(gè)：創(chuàng)建了一個(gè)XMLHttpRequest對(duì)象。創(chuàng)建這個(gè)對(duì)象的目的就是讓XMLHttpRequest對(duì)象與服務(wù)器交互，而不影響用戶(hù)正在瀏覽的頁(yè)面。這也是AJAX稱(chēng)謂的由來(lái)，異步j(luò)avascript交互xml處理。
創(chuàng)建好XMLHttpRequest對(duì)象之后，調(diào)用的函數(shù)將會(huì)監(jiān)聽(tīng)該對(duì)象狀態(tài)的變化，即onreadystatechange屬性。XMLHttpRequest對(duì)象有5個(gè)狀態(tài)，從0－4的整數(shù)，也就是說(shuō)onreadystatechange調(diào)用的函數(shù)（示例中function(){...}）將會(huì)執(zhí)行4次。示例中我們?cè)谠搶?duì)象處于完成狀態(tài)(readyState=4)時(shí)進(jìn)行處理（此時(shí)服務(wù)器已經(jīng)傳回所有信息），為id為“author”的span對(duì)象添加了一個(gè)textNode節(jié)點(diǎn)，該textNode是data.xml文檔中name節(jié)點(diǎn)的第一個(gè)子元素的值。
好了，這就是完成一次異步交互所需要的步驟。
以下是一些注意點(diǎn)。
第一，本例中使用的http的GET方法，你也可以使用POST，但是要設(shè)定Content-Type值，即xmlObj.setRequestHeader("Content-Type","application/x-www-form-urlencoded")，這個(gè)方法用來(lái)設(shè)置了MIME類(lèi)型。還有一點(diǎn)要注意，這些方法最好都大寫(xiě)，否則在firefox下將沒(méi)有作用。
第二，xmlObj.open ('GET', file, true)。該方法會(huì)建立與服務(wù)器的鏈接，‘GET’指明了http調(diào)用方法；file指明了調(diào)用的url；true指明了該調(diào)用是異步處理，可以省略，默認(rèn)為'true'。
第三，xmlObj.send(para)向服務(wù)器發(fā)出請(qǐng)求。是以POST向服務(wù)器發(fā)出request，其參數(shù)格式為:name=namevalue&so=on。（參考注意點(diǎn)一）
?
轉(zhuǎn)貼注明出處
www.jsfchina.org
posted on 2006-04-04 09:54
KingWell 閱讀(1284)
評(píng)論(2) 編輯 收藏 所屬分類(lèi):
AJAX和web2.0