ajax|xml|資料
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:
Send Data
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的文件物件模型來提取資訊,然後向瀏覽器顯示資訊。
<