Ajax初試之讀取數據篇
2024-09-01 08:29:19
供稿：網友
拿出來我們上次準備好的東西．１：XMLHTTPRequest對象的函數．２：Asp輸出xml格式的文件．你可以點擊查看該文件內容：Asp輸出xml格式的數據
打開以后你會發現我們使用Asp技術動態的輸出一個xml格式的數據．如果你對該技術還不了解，請返回閱讀：ajax開始準備篇 在這個輸出的數據里面有一個msg標簽．標簽里包含了一段文字內容．今天我們就讀取這個msg標簽．并將文字內容顯示到你的網頁上．
先看下面的代碼．并附上效果演示
web_ajax.asp
代碼如下:
<?xml version="1.0" encoding="gb2312" ?>
<body>
<msg>一個簡單的Asp輸出xml的示例，以后在我們的ajax教程實例中，我們都將使用該文件進行數據的讀取操作</msg>
<read>
<li>Html</li>
<li>Css</li>
<li>Dom</li>
<li>JavaScript</li>
<li>Ajax</li>
</read>
</body>
下面是靜態頁面內容
代碼如下:
<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的函數．該函數的作用是當你點擊讀取數據按扭．發送請求，傳回數據， 顯示數據．
