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的文档对象模型来提取信息，然后向浏览器显示信息。
<