web編程之日程表模塊
一，AJAX基礎
傳統的javascript編程中，獲取服務端的數據或者向服務端發送信息，必須通過使用HTML中的表單進行GET或POST的方法，返回頁面數據在進行重載，非常不友好。
在AJAX模式中，步驟如下：
1）用戶在web頁面執行某一操作，例如點擊某個連接。
2）根據用戶操作，頁面產生相應DHTML事件。
3）調用註冊到該DHTML時間的客戶端javascript事件處理函數。其中，需要創建並初始化一個用以向服務器發送異步請求的XMLHttpRequest對象，同時指定一個回調函數。當服務器端的響應返回時，自動調用該回調函數。
4）服務器收到XMLHttpRequest對象的請求後，根據請求進行一系列的的處理。
5）處理完畢，服務端向客戶端返回所需數據。
6）數據到達客戶端之後執行javascript回調函數，並根據返回的數據對用戶顯示界面進行更新。
7）用戶獲得自己操作所需的數據，對應看到顯示界面的變化。
二，AJAX 與服務端數據庫進行交互式通信
AJAX與服務端的通信通過XML來實現，XML的特性如下：
1）XML是一種標記性語言，類似HTML.
2)XML的設計宗旨是傳輸數據，而不是顯示數據
3）XML標籤沒有被預定義，需要自行定義標籤
例如：創建Ajax.xml ，代碼如下：
<?xml version="1.0" encoding="utf8" ?>
<family>
<member>
<name>
mark
</name>
<doing>task1
</doing>
</member>
<member>
<name>
annie
</name>
<doing>task2
</doing>
</member>
<member>
<name>
nathan
</name>
<doing>task3
</doing>
</member>
<member>
<name>
chris
</name>
<doing>task4
</doing>
</member>
</family>接下來就是創建一個Ajaxdemo.html 用來讀取和處理以上xml文檔的數據，代碼如下：
<html>
<head>
<title>sspku</title>
<script language="javascript">
function GetXmlHttpObject()
{
xmlHttp=null;
try{
xmlHttp = new XMLHttpRequest(); //Firefox,Opera,Safari瀏覽器
}
catch(){
try{
xmlHttp = new ActiveObject("Msxm12.XMLHTTP") //IE6.0+瀏覽器
}
catch()
{
try{
xmlHttp=new ActiveObject("Microsoft.XMIHTTP") //IE6.0-
}
catch(){
alert("對不起，您的瀏覽器不支持AJAX");
return false;
}
}
}
return xmlHttp;
}
//狀態改變
function state_Changed()
{
if（xmlHttp.readyState!=4） return;
if(xmlHttp.status!=200)
{
alert("加載XML文件失敗");
return;
}
txt="<table border='1'>";
x=xmlHttp.responseXML.documentElement.getElementsByTagName("member");
for(i=0;i<x.length;i++)
{
txt=txt+"<tr>";
xx=x[i].getElementsByTagName('name'); //傳回名稱爲name的元素集合
{
try
{
txt=txt+"<td>"+xx[0].firstChild.nodeValue+"</td>";
}
catch
{
txt=txt+"<td></td>";
}
txt=txt+"</tr>";
}
}
txt=txt+"</table>";
document.getElementById("name").innerHTML=txt;
}
function showXML(url)
{
xmlHTTP=GetXmlHttpObject();
if(xmlHTTP!=null)
{
xmlHTTP.onreadystatechange=state_Changed();
xmlHTTP.open("GET",url,true);
xmlHTTP.send(null);
}
}
</script>
</head>
<body>
<span id ="name"></span>
<input type="button" value="顯示xml" οnclick="showXML('Ajax.xml')"/>
</body>
</html>