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.
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:
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.
"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:
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 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
MC Press books written by Mike Faust available now on the MC Press Bookstore.
 |
||
 |
|
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 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 Unleash the full power of SQL with these highly useful tools. List Price $49.95
Now On Sale
|
More than ever, there is a demand for IT to deliver innovation. Your IBM i has been an essential part of your business operations for years. However, your organization may struggle to maintain the current system and implement new projects. The thousands of customers we've worked with and surveyed state that expectations regarding the digital footprint and vision of the company are not aligned with the current IT environment.
TRY the one package that solves all your document design and printing challenges on all your platforms. Produce bar code labels, electronic forms, ad hoc reports, and RFID tags – without programming! MarkMagic is the only document design and print solution that combines report writing, WYSIWYG label and forms design, and conditional printing in one integrated product. Make sure your data survives when catastrophe hits. Request your trial now! Request Now.
Forms of ransomware has been around for over 30 years, and with more and more organizations suffering attacks each year, it continues to endure. What has made ransomware such a durable threat and what is the best way to combat it? In order to prevent ransomware, organizations must first understand how it works.
Disaster protection is vital to every business. Yet, it often consists of patched together procedures that are prone to error. From automatic backups to data encryption to media management, Robot automates the routine (yet often complex) tasks of iSeries backup and recovery, saving you time and money and making the process safer and more reliable. Automate your backups with the Robot Backup and Recovery Solution. Key features include:
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.
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:
LATEST COMMENTS
MC Press Online