?
首先，演示一下實際運行的
效果。點擊彈出新頁面中的“See Author”鏈接，你將會看到該頁面作者。從頁面提交到顯示從服務器獲得的結果，這段過程你將不會發現頁面的重刷新。
下面給出該示例的代碼：
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>
?
解析下。
該例應該算是最簡單的ajax應用了。為了盡求簡單性，這里沒有使用到任何服務器端技術，諸如servlet,cgi等等。這里并沒有使用到任何業務方法，而是直接從服務器的一個xml文檔(data.xml)中讀取數據。為了簡潔性，本例將JavaScript文件也集成到了ajax.html中，實際應用中完全可以獨立出去使用。
該例通過點擊鏈接，激發了一個javascript的方法然后進行交互處理。
AJAX的核心是XMLHttpRequest，本例通過下列代碼創建這個對象
? 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的情況，目的都是一個：創建了一個XMLHttpRequest對象。創建這個對象的目的就是讓XMLHttpRequest對象與服務器交互，而不影響用戶正在瀏覽的頁面。這也是AJAX稱謂的由來，異步javascript交互xml處理。
創建好XMLHttpRequest對象之后，調用的函數將會監聽該對象狀態的變化，即onreadystatechange屬性。XMLHttpRequest對象有5個狀態，從0－4的整數，也就是說onreadystatechange調用的函數（示例中function(){...}）將會執行4次。示例中我們在該對象處于完成狀態(readyState=4)時進行處理（此時服務器已經傳回所有信息），為id為“author”的span對象添加了一個textNode節點，該textNode是data.xml文檔中name節點的第一個子元素的值。
好了，這就是完成一次異步交互所需要的步驟。
以下是一些注意點。
第一，本例中使用的http的GET方法，你也可以使用POST，但是要設定Content-Type值，即xmlObj.setRequestHeader("Content-Type","application/x-www-form-urlencoded")，這個方法用來設置了MIME類型。還有一點要注意，這些方法最好都大寫，否則在firefox下將沒有作用。
第二，xmlObj.open ('GET', file, true)。該方法會建立與服務器的鏈接，‘GET’指明了http調用方法；file指明了調用的url；true指明了該調用是異步處理，可以省略，默認為'true'。
第三，xmlObj.send(para)向服務器發出請求。是以POST向服務器發出request，其參數格式為:name=namevalue&so=on。（參考注意點一）
?
轉貼注明出處
www.jsfchina.org
posted on 2006-04-07 11:33
Nelson Lee 閱讀(391)
評論(5) 編輯 收藏