| TechTip: Accessing XML Data Sources from JavaScript |
|
|
|
| Tips & Techniques - Web Languages | |||||||||||||||||||||||||||||||||||||
| Written by Mike Faust | |||||||||||||||||||||||||||||||||||||
| Thursday, 20 September 2007 18:00 | |||||||||||||||||||||||||||||||||||||
|
Asynchronous JavaScript and XML, or AJAX, gives us the ability to read data from a variety of sources. This data can be XML data, HTML data, or even a simple text file. This truly powerful capability further extends the usability of JavaScript as a mainstream development language for business programmers. In this TechTip, we'll explore what AJAX is and how to use AJAX to read server data into a JavaScript routine. The technology behind AJAX has actually been around for several years. This technology was developed by Microsoft and was initially known as remote scripting. The key component that makes AJAX possible is the XMLHttpRequest object. Microsoft Outlook Web Access, a popular solution for accessing business email remotely, is an example of an application built using the XMLHttpRequest object. AJAX is the key to dynamic Web sites. Google's Gmail and Google Maps services are examples of Web sites that are designed using AJAX. AJAX allows us to create programs with a user interface that is more like a standalone application than an application that's built in a Web browser. This is because the JavaScript application is able to send data to and receive data from a server without having to reload the entire page. The method we use to define an XMLHttpRequest object depends on which browser you are using. The code below illustrates the method that is used in Internet Explorer along with the method supported by Mozilla and other browsers. // Internet Explorer Method var objXML = new ActiveXObject("Microsoft.XMLHTTP"); // Mozilla, Netscape, etc... var objXML1 = new XMLHttpRequest();
The first method uses the ActiveXObject to create a reference to the Microsoft.XMLHTTP ActiveX control. The second method simply creates a new instance of the XMLHttpRequest object itself. Once this object has been defined, your client script has a set of properties and methods that can be used to retrieve data from a defined server. The table below contains a list of the properties supported by the XMLHttpRequest object.
The responseText property reads the response from the server as a text string. The responseXML property also reads the server response, but this property returns the data in an XML document object. The status property retrieves the numeric status of the XML request. Common codes returned by this property include 404 to indicate a document is "Not Found" or 200 for an "OK" status. The text associated with the status property can be retrieved via the statusText property. In addition to these properties, the XMLHttpRequest object also supports a set of methods, as shown in the following table:
open(method, URL, asnyc) The method parameter identifies the method used to send data to the server using a value of "GET" for retrieving data from the server or "POST" for sending data to the server. The URL value supplies the uniform resource locator (URL) location of the document to be read. The asnyc parameter represents a true/false value that identifies whether or not the connection is to be made asynchronously. If the connection is made asynchronously, the script continues execution without waiting for results from the server. If the ansyc value is false, the script will wait for a response from the server before continuing execution. Because many factors come into play when connecting to a remote system, it's not always the best idea to make connections that are not asynchronous. If, for example, a server is down or unreachable, you wouldn't want your script to hang indefinitely. var parms = encodeURI( "parm1=" + value1 + ";parm2=" + value2); var requestXML = new XMLHttpRequest(); requestXML.open("POST", "http://some.webserver.com/XMLdata"); requestXML.send(parms); In this example, the variable parms is created to contain data to be posted to the server. The XMLHttpRequest object is then defined and used with the open() method to connect to the defined Web server using the POST method. The send() method is then used to open the connection using the parameters defined in the first part of the script. req.sendRequestHeader('Content-Type', 'application/vnd.ms-excel'); Note that the first parameter identifies the header name, while the second parameter identifies the new value for the header. This example identifies that the MIME content type for the document being accessed is a Microsoft Excel file. | |||||||||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||||||||










You must be logged in to view or make comments on this article