用Ajax讀取xml文件的簡單例子
更新時間：2008年04月28日 19:11:06 作者：
Ajax的原理很簡單，就是在客戶端創(chuàng)建一個XMLHttpRequest對象（用來與服務(wù)器進行異步通信，這就是Ajax的核心，其實我們早就在用異步通信了，只是沒把這項技術(shù)用在網(wǎng)頁設(shè)計中而已），為該對象的onreadystatechange 屬性添加一個事件，當對象的readyState改變的時候就會引發(fā)指定的事件。
到此就可以就發(fā)送請求讀取服務(wù)器端的XML數(shù)據(jù)了，最后要做的就是處理數(shù)據(jù)了。 關(guān)于XMLHttpRequest對象，請參考About XMLHttpRequest Object一文。
看例子：
//AjaxDemo.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Asynchronous JavaScript And XML</title>
</head>
<body>
<script type="text/javascript">
var xmlHttp=null;
function readyStateChangeHandle()
{
if(xmlHttp.readyState==4)
{
if(xmlHttp.status==200)
{
var xmlDOM=xmlHttp.responseXML;
var xmlRoot=xmlDOM.documentElement;
try
{
var xmlItem=xmlRoot.getElementsByTagName("item");
alert(xmlItem[0].firstChild.data);
}
catch(e)
{
alert(e.message);
}
}
}
}
function ajaxRequest()
{
if(window.XMLHttpRequest)
{
xmlHttp=new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlHttp.onreadystatechange=readyStateChangeHandle;
xmlHttp.open("GET","data.xml",true);
xmlHttp.send(null);
}
</script>
<input type="button" onclick="ajaxRequest()" value="Take me to the world of AJAX" />
</body>
</html>
//data.xml
<?xml version="1.0" encoding="GB2312" ?>
<root>
<item>Welcome to the world of AJAX(Asynchronous JavaScript And XML)!</item>
</root>
看例子：
//AjaxDemo.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Asynchronous JavaScript And XML</title>
</head>
<body>
<script type="text/javascript">
var xmlHttp=null;
function readyStateChangeHandle()
{
if(xmlHttp.readyState==4)
{
if(xmlHttp.status==200)
{
var xmlDOM=xmlHttp.responseXML;
var xmlRoot=xmlDOM.documentElement;
try
{
var xmlItem=xmlRoot.getElementsByTagName("item");
alert(xmlItem[0].firstChild.data);
}
catch(e)
{
alert(e.message);
}
}
}
}
function ajaxRequest()
{
if(window.XMLHttpRequest)
{
xmlHttp=new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlHttp.onreadystatechange=readyStateChangeHandle;
xmlHttp.open("GET","data.xml",true);
xmlHttp.send(null);
}
</script>
<input type="button" onclick="ajaxRequest()" value="Take me to the world of AJAX" />
</body>
</html>
//data.xml
<?xml version="1.0" encoding="GB2312" ?>
<root>
<item>Welcome to the world of AJAX(Asynchronous JavaScript And XML)!</item>
</root>
您可能感興趣的文章:
- AJAX使用post發(fā)送數(shù)據(jù)xml格式接受數(shù)據(jù)
- jQuery+ajax讀取并解析XML文件的方法
- Jquery Ajax學(xué)習實例 向頁面發(fā)出請求，返回XML格式數(shù)據(jù)
- javascript解析ajax返回的xml和json格式數(shù)據(jù)實例詳解
- jquery $.ajax()取xml數(shù)據(jù)的小問題解決方法
- JS通過ajax動態(tài)讀取xml文件內(nèi)容的方法
- 用Ajax讀取XML格式的數(shù)據(jù)
- 通過AJAX的JS、JQuery兩種方式解析XML示例介紹
- JS使用ajax從xml文件動態(tài)獲取數(shù)據(jù)顯示的方法
- 用JQuery 實現(xiàn)AJAX加載XML并解析的腳本
- Ajax對xml信息的接收和處理操作實例分析
相關(guān)文章
ajax技術(shù)制作得在線歌詞搜索功能...2006-09-09
Jquery $.ajax函數(shù)外的一段代碼的執(zhí)行順序
調(diào)用了JQuery的異步函數(shù)$.ajax ，然后在$.ajax函數(shù)外之后又有一段Jquery 代碼。每次都是在$.ajax之后的代碼先執(zhí)行2014-06-06
Ajax商品分類三級聯(lián)動的簡單實現(xiàn)(案例)
下面小編就為大家?guī)硪黄狝jax商品分類三級聯(lián)動的簡單實現(xiàn)(案例)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
本文由腳本之家小編跟大家分享的ajax請求Session失效問題，感興趣的朋友一起看看吧2015-09-09![[js]輕便的XMLHttpRequest應(yīng)用函數(shù)：downloadUrl()](http://img.jbzj.com/images/xgimg/bcimg4.png)
[js]輕便的XMLHttpRequest應(yīng)用函數(shù)：downloadUrl()
[js]輕便的XMLHttpRequest應(yīng)用函數(shù)：downloadUrl()...2007-04-04
Ajax并不神秘：揭下各種Ajax控件和類庫的小褲衩...2007-03-03
jQuery+Ajax實現(xiàn)表格數(shù)據(jù)不同列標題排序(為表格注入活力)
CSS也使得表格的布局越來越光彩耀人。但是，無論如何，都掩飾不了那些包裝下的死板，接下來為大家介紹下讓那些死板的數(shù)據(jù) 更具有可讀性、可用性2013-04-04
Ajax返回數(shù)據(jù)之前的loading等待效果
我們通過ajax請求，向后臺傳遞參數(shù)，然后后臺經(jīng)過一系列的運算之后向前臺返還數(shù)據(jù)，我希望在等待數(shù)據(jù)成功返還之前可以展示一個loading.gif圖。接下來通過本文給大家分享Ajax返回數(shù)據(jù)之前的loading等待效果,需要的朋友可以參考下2017-08-08
本文通過實例代碼給大家介紹了Ajax實現(xiàn)動態(tài)加載組合框功能，感興趣的朋友一起看看吧2017-08-08