Ajax初試之讀取資料篇實現代碼

來源:互聯網
上載者:User

是的,今天我們要實現的效果是.在不重新整理網頁的情況下讀取並顯示服務端的資料.
拿出來我們上次準備好的東西.
1:XMLHTTPRequest對象的函數.
2:Asp輸出xml格式的檔案.你可以點擊查看該檔案內容 複製代碼 代碼如下:<%
'出自:http://Www.Web666.Net
'作者:康董
'如需轉載請務必保留以上資訊
'定義一個變數,來儲存xml資料
dim xml
xml = "<?xml version='1.0' encoding='gb2312'?><body>"
xml = xml&"<msg>一個簡單的Asp輸出xml的樣本,以後在我們的ajax教程執行個體中,我們都將使用該檔案進行資料的讀取操作</msg>"
xml=xml&"</body>"
Response.Clear
Response.ContentType="text/xml"
Response.CharSet="gb2312"
Response.Write xml
Response.End
%>

開啟以後你會發現我們使用Asp技術動態輸出一個xml格式的資料.如果你對該技術還不瞭解,請返回閱讀:ajax開始準備篇 在這個輸出的資料裡面有一個msg標籤.標籤裡包含了一段文字內容.今天我們就讀取這個msg標籤.並將文字內容顯示到你的網頁上.
先看下面的代碼.並附上效果示範 複製代碼 代碼如下:<html>
<head>
<title>建立一個可用的xmlhttpreuqest對象</title>
</head>
<body>
<div id="str"></div><!--請求回來的資料將顯示在該div中-->
<input type="button" value="顯示資料" onclick="Post()" />
<script type="text/javascript">
function ajax_xmlhttp(){
//在IE中建立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<msXmlhttp.length; 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對象賦值給一個變數.
ajax.open("post","web_ajax.asp",true);//佈建要求方式,請求檔案,非同步請求
ajax.onreadystatechange = function(){//你也可以這裡指定一個已經寫好的函數名稱
if(ajax.readyState==4){//資料返回成功
if(ajax.status==200){//http請求狀態代碼返回ok
var xmlData = ajax.responseXML;
var msg = xmlData.getElementsByTagName("msg");//擷取所有的msg元素
var data = msg[0].firstChild.nodeValue;
document.getElementById("str").innerHTML = data;
}
}
}
ajax.send(null);
}
</script>
</body>
</html>

下面讓我來慢慢分析該執行個體是如何?的.在上面的代碼中除了昨天我們建立的XMLHTTPRequest函數以外.在最上面多了一個ID屬性為str的div, 該div的作用是用來顯示我們請求回的資料.然後我們新寫了一個名字為Post的函數.該函數的作用是當你點擊讀取資料按扭.發送請求,傳回資料, 顯示資料.
我們先來看Post函數的第一行:var ajax = ajax_xmlhttp(); 該行的意思是說將具有XMLHTTPRequest對象的函數賦值給一個名字為ajax的變數, 這時ajax變數的自身就等於了XMLHTTPRequest對象.我們可以使用這個變數來引用XMLHTTPRequest對象中的各個方法和屬性.
第二行:ajax.open("post","web_ajax.asp",true); 表示指定一個請求,請求方式為post,請求的服務端網頁為web_ajax.asp,true代表為非同步請求. 你可以參考:open方法
第三行:ajax.onreadystatechange=function(){},指定了一段自訂程式.我們看function裡的內容.當readyState狀態等於4的時候,readyState等於4即代表請求的資料已被成功返回!並且status 返回200,status代表http請求狀態代碼,返回200代表ok. 與此同時我們使用responseXML接收服務端傳回的所有資料.responseXML代表以xml格式來接收資料.
我們將服務端返回的所有xml資料賦值給一個xmlData的變數.xmlData.getElementsByTagName("msg");即代表擷取返回的xml資料中名字為msg所有的標籤.你可以參考:getElementsByTagName解釋與執行個體
msg[0]代表引用第一個msg標籤.事實上我們的資料內也只存在一個msg.並返回該標籤第一個子項目的常值內容.msg的第一個子項目即是那段文字.nodeValue代表擷取這些文字.參考:firstChild方法與nodeValue 當返回的資料成功被解析,找出頁面內id為str的div,使用innerHTML將資料顯示到網頁中.
Post函數中最後一行:ajax.send(null);這個大家一看便知.發送請求.null代表發送一個空的請求,沒有資料要提交.
最後我們重點講一下onreadysatechange這個屬性.說他是屬性,但他具有事件機制.也就是說你可以為他指定一個函數.onreadystatechange的工作原理是:每次readyState的狀態改變.都會執行onreadystatechange指定的那個函數. 其實在ajax.send(null)沒有執行之前.onreadystatechange已經被執行了至少一次了.因為當調用了open方法以後,readystate的狀態會發生變化.因此會觸發onreadystatechange的函數.這類似一個遞迴機制.readystate的狀態發生變化 執行onreadystatechange的函數.而我們又在函數裡判斷readysate狀態值,其實在一個完整的請求過程中,readyState至少會發生4次變化.根據瀏覽器會有所不同.只有當readystate等於4的時候.我們開始接收資料並解析.如果你還不夠明白,請仔細閱讀:onreadystatechange屬性 readyState方法,以及status
好,我們這次的"ajax初試之讀取資料篇"就到此為止,如果你還有不明白的地方,請加以練習,慢慢揣摩.相信會有所收穫.下一篇我們講:"ajax讀取資料到表格"

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.