DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX詳解 >> AJAX Hacks之Hack 4. 接收XML格式的數據
AJAX Hacks之Hack 4. 接收XML格式的數據
編輯:AJAX詳解     
AJax Hacks之Hack 4. 接收XML格式的數據

當前的許多交換數據的技術都使用XML格式的數據,那是因為XML格式的數據被廣泛的使用和支持。因此,不同用戶可以已有的技術來生成、發送、接收XML數據而不需要使用別的工具轉換數據的格式。

一個典型的例子就是一個GPS設備可以在任何地方共享它需要的數據。無論是在遠行、或是戶外活動,當把設備插入到計算機的UBS接口後,就可以向web發送數據了。GPS軟件被設置為默認支持XML格式的數據。而web也使用XML格式的數據。

盡管本書不會將XML作為重點介紹,但是讀者也對XML也有所了解。XML使用標記來描述和區分不同的信息。XML數據以 開始,當然這是可選的,接下來是文件的根元素。例如:


Garmin

Forerunner 301

在這裡gps是跟元素,gpsMaker和gpsDevice是子元素.

AJax和request object可以接收XML格式的數據,這對處理web響應是非常有用的。當HTTP請求完成後,request對象持有一個名為responseXML的屬性. AJax可是使用這個DOM文檔對象。這有一個例子:

function handleResponse( ){

if(request.readyState == 4){

if(request.status == 200){

var doc = request.responseXML;

...

}

在上述的代碼中,doc變量是一個DOM文檔對象,它為浏覽器顯示頁面提供了一個簡單的API。本hack從服務器接受xml數據,然後利用DOM編程來對XML數據進行處理。

如果你只想查看一下XML文本,使用request.responseText來進行替代.

本hack的Html文件和上一個的相同,但在後邊加了一個div元素,用來顯示返回的XML信息。代碼如下:


“http://www.w3.org/TR/1999/REC-Html401–19991224/strict.dtd”>

A Few Facts About Yourself...

Javascript:void%200>

First name:



Last name:



Gender:



Country of origin:



Figure 1-3 輸入前的畫面.

文件hack3.JS中的JavaScript代碼使用POST方法向服務器發送請求,然後接收服務器響應的XML格式的數據。字段確認部分在這裡跳過去了,當讓這是必不可少的。

和本章其他例子相似,服務器程序返回給客戶的數據格式為:Bruce.

代碼如下:

var request;

var queryString; //用來存儲post的數據

function sendData( ){

setQueryString( );

var url=“http://www.parkerriver.com/s/sender”;

httpRequest(“POST”,url,true);

}

//XMLHttpRequest處理函數

function handleResponse( ){

if(request.readyState == 4){

if(request.status == 200){

var doc = request.responseXML;

var info = getDocInfo(doc);

stylizeDiv(info,document.getElementById(““docDisplay“”);

} else {

alert(““A problem occurred with communicating between “”+

““the XMLHttpRequest object and the server program.“”;

}

}//end outer if

}

/* Initialize a request object that is already constructed */

function initReq(reqType,url,bool){

/* Specify the function that will handle the HTTP response */

request.onreadystatechange=handleResponse;

request.open(reqType,url,bool);

request.setRequestHeader(““Content-Type“”,

““application/x-www-form-urlencoded; charset=UTF-8“”;

/* Only works in Mozilla-based browsers */

//request.overrideMimeType(““text/XML“”;

request.send(queryString);

}

/* Wrapper function for constructing a request object.

Parameters:

reqType: The HTTP request type, such as GET or POST.

url: The URL of the server program.

asynch: Whether to send the request asynchronously or not. */

function httpRequest(reqType,url,asynch){

//Snipped…See Hack #1

}

function setQueryString( ){

queryString=“”;

var frm = document.forms[0];

var numberElements = frm.elements.length;

for(var i = 0; i < numberElements; i++) {

if(i < numberElements-1) {

queryString = frm.elements[i].name"="+

encodeURIComponent(frm.elements[i].value)+“&”;

} else {

queryString = frm.elements[i].name"="+

encodeURIComponent(frm.elements[i].value);

}

}

}

/* Provide the div element‘s content dynamically. We can add

style information to this function if we want to jazz up the div */

function stylizeDiv(bdyTxt,div){

//reset DIV content

div.innerHtml=“”;

div.style.backgroundColor=“yellow”;

div.innerHtml=bdyTxt;

}

/* Get information about an XML document via a DOM Document object */

function getDocInfo(doc){

var root = doc.documentElement;

var info = ”

Document root element name:

"+ root.nodeName;

var nds;

if(root.hasChildNodes( )) {

nds=root.childNodes;

info+= ”

Root node’s child node names/values:

";

for (var i = 0; i < nds.length; i++){

info+= nds[i].nodeName;

if(nds[i].hasChildNodes( )){

info+= “ : \\“+nds[i].firstChild.nodeValue+“\\”
";

} else {

info+= ” : Empty
";

}

}

}

return info;

}

Mozilla Firefox可是使用request.overrideMimeType( )函數強制格式化象形數據的格式類型,使用 request.overrideMimeType("text/XML"). IE中不必這麼做。

在POSTs完數據後接收響應,然後調用函數getDocInfo( ), 該函數用來顯示XML文檔的信息:

var doc = request.responseXML;

var info = getDocInfo(doc);

geTDocInfo( )函數取得XML的根元素(var root = doc.documentElement; 建立一個string來保存root元素的信息以及其子元素的信息。接下來stylizeDiv( )函數用來顯示該string.

function stylizeDiv(bdyTxt,div){

//reset div content

div.innerHtml=“”;

div.style.backgroundColor=“yellow”;

div.innerHtml=bdyTxt;

}

本hack主要講如何從響應的XML文件中提取信息,使用DOM的文檔對象模型來提取信息,然後向浏覽器顯示信息。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved