DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX基礎知識 >> Ajax初試之讀取數據篇實現代碼
Ajax初試之讀取數據篇實現代碼
編輯:AJAX基礎知識     
是的,今天我們要實現的效果是.在不刷新網頁的情況下讀取並顯示服務端的數據.
拿出來我們上次准備好的東西.
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讀取數據到表格"
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved