TechTip: Accessing XML Data Sources from JavaScript

Web Languages
Typography
  • Smaller Small Medium Big Bigger
  • Default Helvetica Segoe Georgia Times
Fortunately, there is an alternate means by which a client-side JavaScript routine can gain access to server data.

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.

 

Properties Supported by the XMLHttpRequest Object
Property
Description
onreadystatechange
Event handler that is launched each time the ready state changes
readyState
The ready state of the request
responseText
The server response as a text string
responseXML
The server response in an XML document
status
The HTTP numeric status ("404" = not found, for example)
statusText
The HTTP status as a text string ("Not Found," for example)


The onreadystatechange property defines a function to be called when the value of the readyState property changes. The readyState property returns a value identifying the state of the XML request. Values returned are shown below:

  • 0 = uninitialized
  • 1 = loading
  • 2 = loaded
  • 3 = interactive
  • 4 = complete

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:

 

Methods Supported by the XMLHttpRequest Object
Method
Description
abort()
Aborts the current XML request
getAllResponseHeaders()
Returns the HTTP headers associated with the request
getResponseHeader()
Returns a value for the HTTP header specified on the defined parameter
open()
Defines parameters associated with an XML request, including the URL and method
send()
Sends the XML request to the server
setRequestHeader()
Defines request header values for the XML request


The open() method allows us to define information related to the server and document from which the data is being retrieved. The parameters supplied on this method are as shown here:

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.

The open() method defines the connection to the server, but the connection is not actually initiated until the send() method is executed. The optional parameter for this method is used to supply data to be posted to the server as a string. As mentioned earlier, when a connection is made asynchronously, the script continues execution immediately after this statement is executed; otherwise, the script will wait for a response from the server before continuing. Below is a sample of the code required to make a connection using these two methods and the XMLHttpRequest object.

 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.

The setRequestHeader() method identifies HTTP header values. The two string parameters supplied to this method represent the HTTP header name and the value to be supplied for that header. The example below illustrates the use of this method to define the HTTP header Content-Type value:

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.

These basic properties and methods of the XMLHttpRequest object give us the ability to retrieve a plethora of information from readily available Web services. Next time, we'll explore a practical example of utilizing AJAX within an HTML Web page.

Mike Faust

Mike Faust is a senior consultant/analyst for Retail Technologies Corporation in Orlando, Florida. Mike is also the author of the books Active Server Pages Primer, The iSeries and AS/400 Programmer's Guide to Cool Things, JavaScript for the Business Developer, and SQL Built-in Functions and Stored Procedures. You can contact Mike at This email address is being protected from spambots. You need JavaScript enabled to view it..


MC Press books written by Mike Faust available now on the MC Press Bookstore.

Active Server Pages Primer Active Server Pages Primer
Learn how to make the most of ASP while creating a fully functional ASP "shopping cart" application.
List Price $79.00

Now On Sale

JavaScript for the Business Developer JavaScript for the Business Developer
Learn how JavaScript can help you create dynamic business applications with Web browser interfaces.
List Price $44.95

Now On Sale

SQL Built-in Functions and Stored Procedures SQL Built-in Functions and Stored Procedures
Unleash the full power of SQL with these highly useful tools.
List Price $49.95

Now On Sale

BLOG COMMENTS POWERED BY DISQUS

LATEST COMMENTS

Support MC Press Online

$

Book Reviews

Resource Center

  •  

  • LANSA Business users want new applications now. Market and regulatory pressures require faster application updates and delivery into production. Your IBM i developers may be approaching retirement, and you see no sure way to fill their positions with experienced developers. In addition, you may be caught between maintaining your existing applications and the uncertainty of moving to something new.

  • The MC Resource Centers bring you the widest selection of white papers, trial software, and on-demand webcasts for you to choose from. >> Review the list of White Papers, Trial Software or On-Demand Webcast at the MC Press Resource Center. >> Add the items to yru Cart and complet he checkout process and submit

  • SB Profound WC 5536Join us for this hour-long webcast that will explore:

  • Fortra IT managers hoping to find new IBM i talent are discovering that the pool of experienced RPG programmers and operators or administrators with intimate knowledge of the operating system and the applications that run on it is small. This begs the question: How will you manage the platform that supports such a big part of your business? This guide offers strategies and software suggestions to help you plan IT staffing and resources and smooth the transition after your AS/400 talent retires. Read on to learn: