Web開發的教程圖解
同時我還將展示,如何使用JavaScript指令碼和Dom介面,來為網頁建立一個表格 .將ajax請求的資料顯示到該表格內.
本次的ajax例項效果中請求的服務端網頁依然是:Web_該網頁使用了Asp輸出xml技術.如果你還不知道如何使用Asp輸出xml請返回:"ajax開始準備篇"
提醒:在每篇ajax教程的例項開始之前,你必須檢視當天的Web_檔案中的資料結構.因為我們每次例項中要讀取的標籤和內容都不一樣.點選:檢視Web_
上次我們讀取的`是msg標籤.今天我們要讀取xml中新增的read標籤.我們要實現的效果是:將read標籤下的Html,Css,Dom,JavaScript,Ajax這些文字內容.顯示到我們網頁中的表格內.
先看下面的程式碼.和例項演示
複製程式碼 程式碼如下:
function ajax_xmlhttp(){
//在IE中建立xmlhttpRequest,適用於IE5.0以上所有版本
var msXmlhttp = new Array("TTP.5.0","TTP.4.0","TTP.3.0","TTP","TTP");
for(var i=0; i
try
{
_xmlhttp=new ActiveXObject(msXmlhttp[i]);
}
catch(e)
{
_xmlhttp=null;
}
} //迴圈建立基於IE瀏覽器的xmlhttp.結束
//如果非IE瀏覽器,則建立基於FireFox等瀏覽器的xmlhttpRequest
if(!_xmlhttp && typeof XMLHttpRequest != "undefined")
{
_xmlhttp=new XMLHttpRequest();
}
return _xmlhttp;
}
//傳送請求函式
function Post(){
var ajax = ajax_xmlhttp(); //將xmlhttprequest物件賦值給一個變數.
("post","web_",true);//設定請求方式,請求檔案,非同步請求
adystatechange = function(){//你也可以這裡指定一個已經寫好的函式名稱
if(yState==4){//資料返回成功
if(us==200){//http請求狀態碼返回ok
var xmlData = onseXML;//接收返回xml格式資料
var read = lementsByTagName("read");//獲取所有的read標籤
if(th!=0){
var t = teElement("table");//建立一個表格元素
ttribute("border","1");
ndChild(t);//將表格新增到doby內
for(var i=0;i
var tr = (th);//新增一行
var td = (0);//新增一列
rHTML = read[0]dNodes[i]Value;//為單元格寫入文字內容
}
}
}
}
}
(null);
}
今天我們不再講昨天重複過的內容.同樣在Post的函式內.多了幾行程式碼.可以跟上一篇"ajax初始讀取資料篇"進行對比.
下面我們來講一下今天新增的程式碼的作用.
if th!=0:即判斷read標籤是否被成功獲取.如果其legnth屬性不等於0,則代表read已經存在.可以對其進行解析
開始解析返回資料,但網頁中並沒有存在顯示資料的元素.所以我們建立一個表格:var t = teElement("table");.請參考:createElement
ttribute("border","1");為表格新增一個邊框屬性.請參考:setAttribute
ndChild(t);將建立好的表格新增到網頁body元素內.請參考:appendChild
表格新增完成.開始遍歷read標籤內的所有子元素.也就是:html,css,dom,javascript,ajax這些內容.
開始一個迴圈,read[0]th的意思是獲取read標籤內所有子元素的個數.在這裡會返回5. i=0;i<5條件ok! 每迴圈一次i變數會自動+1,表格會增加一行,併為該行增加一列.同時為這一列寫入read第i個子元素的文字內容.直到i=5,i不會再小於read子元素的個數.條件不滿足.迴圈停止.此時資料正好被顯示完畢!
為了讓每位讀者加深理解.我再陳述一遍該例項效果的實現流程:當你點選了"顯示資料"按扭時,Post函式被啟用,函式內一個名字為ajax的變數被賦值XMLHTTPRequest物件的引用.然後便打開了open方法.並使用send方法向服務端發出請求.無論是open還是send方法,都會引發readyState方法的狀態值發生變化.一旦readyState發生變化就會觸發onreadystatechange屬性. onreadystatechange屬性指定的程式將會執行.然後在程式內再次判斷readyState的狀態值是否等於4,如果是則證明整個傳送請求與服務端返回資料已經成功.同時並判斷status是否等200,如果是則代表http請狀態碼也已經ok!此時可以放心的百分之百的接收資料,於是我們使用responseXML屬性來接收返回的資料.該屬性只限制接收xml格式的資料.我始終認為將xml格式的資料做為請求與回傳的中介.是ajax最標準的使用方法!
今天的ajax例項教程--"ajax之讀取資料到表格"就告一段落.我想是不是應該留個問題讓各位讀者來解決一下?各位有沒有發現在例項演示中.你如果重複點選"顯示資料"按扭.表格會被重複的建立.資料也會被重複的讀取.我希望各位讀者可以解決該問題.