Web開(kāi)發(fā)的教程圖解

　　同時(shí)我還將展示，如何使用JavaScript腳本和Dom接口，來(lái)為網(wǎng)頁(yè)創(chuàng )建一個(gè)表格 ．將ajax請求的數據顯示到該表格內．

　　本次的ajax實(shí)例效果中請求的服務(wù)端網(wǎng)頁(yè)依然是：Web_ajax.Asp該網(wǎng)頁(yè)使用了Asp輸出xml技術(shù)．如果你還不知道如何使用Asp輸出xml請返回：＂ajax開(kāi)始準備篇＂

　　提醒：在每篇ajax教程的實(shí)例開(kāi)始之前，你必須查看當天的Web_ajax.asp文件中的數據結構．因為我們每次實(shí)例中要讀取的標簽和內容都不一樣．點(diǎn)擊：查看Web_ajax.Asp

　　上次我們讀取的是msg標簽．今天我們要讀取xml中新增的read標簽．我們要實(shí)現的效果是：將read標簽下的Html，Css，Dom，JavaScript，Ajax這些文本內容．顯示到我們網(wǎng)頁(yè)中的表格內．

　　先看下面的代碼．和實(shí)例演示

　　復制代碼 代碼如下:

　　function ajax_xmlhttp(){

　　//在IE中創(chuàng )建xmlhttpRequest,適用于IE5.0以上所有版本

　　var msXmlhttp = new Array("Msxml2.XMLHTTP.5.0","Msxml2.XMLHTTP.4.0","Msxml2.XMLHTTP.3.0","Msxml2.XMLHTTP","Microsoft.XMLHTTP");

　　for(var i=0; i

　　try

　　{

　　_xmlhttp=new ActiveXObject(msXmlhttp[i]);

　　}

　　catch(e)

　　{

　　_xmlhttp=null;

　　}

　　} //循環(huán)創(chuàng )建基于IE瀏覽器的xmlhttp.結束

　　//如果非IE瀏覽器，則創(chuàng )建基于FireFox等瀏覽器的xmlhttpRequest

　　if(!_xmlhttp && typeof XMLHttpRequest != "undefined")

　　{

　　_xmlhttp=new XMLHttpRequest();

　　}

　　return _xmlhttp;

　　}

　　//發(fā)送請求函數

　　function Post(){

　　var ajax = ajax_xmlhttp(); //將xmlhttprequest對象賦值給一個(gè)變量．

　　ajax.open("post","web_ajax.asp",true);//設置請求方式，請求文件，異步請求

　　ajax.onreadystatechange = function(){//你也可以這里指定一個(gè)已經(jīng)寫(xiě)好的函數名稱(chēng)

　　if(ajax.readyState==4){//數據返回成功

　　if(ajax.status==200){//http請求狀態(tài)碼返回ok

　　var xmlData = ajax.responseXML;//接收返回xml格式數據

　　var read = xmlData.getElementsByTagName("read");//獲取所有的read標簽

　　if(read.length!=0){

　　var t = document.createElement("table");//創(chuàng )建一個(gè)表格元素

　　t.setAttribute("border","1");

　　document.body.appendChild(t);//將表格添加到doby內

　　for(var i=0;i

　　var tr = t.Row(t.rows.length);//添加一行

　　var td = tr.Cell(0);//添加一列

　　td.innerHTML = read[0].childNodes[i].firstChild.nodeValue;//為單元格寫(xiě)入文本內容

　　}

　　}

　　}

　　}

　　}

　　ajax.send(null);

　　}

　　今天我們不再講昨天重復過(guò)的內容．同樣在Post的函數內．多了幾行代碼．可以跟上一篇＂ajax初始讀取數據篇＂進(jìn)行對比．

　　下面我們來(lái)講一下今天新增的代碼的作用．

　　if read.length!=0：即判斷read標簽是否被成功獲�。�如果其legnth屬性不等于0，則代表read已經(jīng)存在．可以對其進(jìn)行解析

　　開(kāi)始解析返回數據，但網(wǎng)頁(yè)中并沒(méi)有存在顯示數據的元素．所以我們創(chuàng )建一個(gè)表格：var t = document.createElement("table");．請參考：createElement

　　t.setAttribute("border","1");為表格添加一個(gè)邊框屬性．請參考：setAttribute

　　document.body.appendChild(t);將創(chuàng )建好的表格添加到網(wǎng)頁(yè)body元素內．請參考：appendChild

　　表格添加完成．開(kāi)始遍歷read標簽內的所有子元素．也就是：html,css,dom,javascript,ajax這些內容．

　　開(kāi)始一個(gè)循環(huán),read[0].childNodes.length的意思是獲取read標簽內所有子元素的個(gè)數．在這里會(huì )返回5． i=0;i<5條件ok! 每循環(huán)一次i變量會(huì )自動(dòng)+1，表格會(huì )增加一行，并為該行增加一列．同時(shí)為這一列寫(xiě)入read第i個(gè)子元素的文本內容．直到i=5,i不會(huì )再小于read子元素的個(gè)數．條件不滿(mǎn)足．循環(huán)停止．此時(shí)數據正好被顯示完畢！

　　為了讓每位讀者加深理解．我再陳述一遍該實(shí)例效果的實(shí)現流程：當你點(diǎn)擊了＂顯示數據＂按扭時(shí)，Post函數被啟用，函數內一個(gè)名字為ajax的變量被賦值XMLHTTPRequest對象的引用．然后便打開(kāi)了open方法．并使用send方法向服務(wù)端發(fā)出請求．無(wú)論是open還是send方法，都會(huì )引發(fā)readyState方法的狀態(tài)值發(fā)生變化．一旦readyState發(fā)生變化就會(huì )觸發(fā)onreadystatechange屬性． onreadystatechange屬性指定的程序將會(huì )執行．然后在程序內再次判斷readyState的狀態(tài)值是否等于4，如果是則證明整個(gè)發(fā)送請求與服務(wù)端返回數據已經(jīng)成功．同時(shí)并判斷status是否等200，如果是則代表http請狀態(tài)碼也已經(jīng)ok!此時(shí)可以放心的百分之百的接收數據，于是我們使用responseXML屬性來(lái)接收返回的數據．該屬性只限制接收xml格式的數據．我始終認為將xml格式的數據做為請求與回傳的中介．是ajax最標準的使用方法！

　　今天的ajax實(shí)例教程--＂ajax之讀取數據到表格＂就告一段落．我想是不是應該留個(gè)問(wèn)題讓各位讀者來(lái)解決一下？各位有沒(méi)有發(fā)現在實(shí)例演示中．你如果重復點(diǎn)擊＂顯示數據＂按扭．表格會(huì )被重復的創(chuàng )建．數據也會(huì )被重復的讀�。�我希望各位讀者可以解決該問(wèn)題．

【W(wǎng)eb開(kāi)發(fā)的教程圖解】相關(guān)文章：

ghost硬盤(pán)對拷圖解教程02-16

美甲教程步驟圖解02-28

WEB教程標準應用標簽03-30

集成spring與Web容器教程03-20

Java開(kāi)發(fā)web的幾種開(kāi)發(fā)模式12-13

金色漸變美甲教程圖解03-28

斜法式花朵兒美甲教程圖解03-30

Web Service的開(kāi)發(fā)與應用基礎03-19

web網(wǎng)頁(yè)開(kāi)發(fā)筆小知識03-30