AJAX hacks hack 4. Receive data in XML format

ajax|xml| data AJAX hacks hack 4. Receive data in XML format

Many of the current data interchange technologies use XML-formatted data because XML-formatted data is widely used and supported. Therefore, different users can have the technology to generate, send, receive XML data without the need to use other tools to transform the format of the data.

A typical example is a GPS device that can share the data it needs anywhere. Whether on a long journey or outdoors, when you plug the device into the computer's UBS interface, you can send data to the Web. GPS software is set to default to support XML-formatted data. The web also uses XML-formatted data.

Although this book does not introduce XML as a focus, the reader also has an understanding of XML. XML uses tags to describe and differentiate between different information. XML data to begin with, of course, this is optional, followed by the root element of the file. For example:


Garmin

Forerunner 301

Here GPS is with elements, Gpsmaker and gpsdevice are child elements.

Ajax and request object can receive XML-formatted data, which is useful for processing web responses. When the HTTP request completes, the request object holds a property named Responsexml. Ajax uses this DOM document object. Here's an example:

function Handleresponse () {

if (request.readystate = = 4) {

if (Request.status = = 200) {

var doc = Request.responsexml;

...

}

In the above code, the doc variable is a DOM document object that provides a simple API for browser display pages. This hack accepts XML data from the server and then uses DOM programming to process the XML data.

If you only want to view the XML text, use Request.responsetext to replace it.

The HTML file for this hack is the same as the previous one, but a DIV element is added behind to display the returned XML information. The code is as follows:

"Http://www.w3.org/tr/1999/rec-html401–19991224/strict.dtd" >

A Few Facts About yourself ...

Javascript:void%200>

The name:

Last Name:

Gender:

Country of Origin:

Send Data

Figure 1-3 input before the screen.

The JavaScript code in file Hack3.js uses the Post method to send a request to the server and then receive the data in the XML format that the server responds to. The field confirmation section jumps over here, when it is essential to make it.

Similar to other examples in this chapter, the data format that the server program returns to the customer is: Bruce.

The code is as follows:

var request;

var querystring; Used to store the post data

function SendData () {

Setquerystring ();

var url= "Http://www.parkerriver.com/s/sender";

HttpRequest ("POST", url,true);

}

XMLHttpRequest processing function

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 is already constructed * *

function Initreq (reqtype,url,bool) {

/* Specify the function that would 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 ... 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

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 uses the Request.overridemimetype () function to force formatting the format of pictographic data, using Request.overridemimetype ("Text/xml"). Do not have to do this in IE.

Receive the response after posts the data, and then call the function GetDocInfo (), which displays the information for the XML document:

var doc = Request.responsexml;

var info = getdocinfo (doc);

The GetDocInfo () function obtains the root element of the XML (var root = doc.documentelement; Creates a string to hold the information of the root element and its child elements). The next Stylizediv () function is used to display the string.

function Stylizediv (bdytxt,div) {

Reset div Content

Div.innerhtml= "";

Div.style.backgroundcolor= "Yellow";

Div.innerhtml=bdytxt;

}

This hack is mainly about how to extract information from the response XML file, use the DOM's Document Object model to extract information, and then display the information to the browser.

<