Scrubbing Your Web Data with Elbow Grease and AJAX

Published: January 9, 2008

by Bob Butcher

Note: The code accompanying this article is available for download here.

Our salespeople were complaining that they could never get at customer information when making customer visits. Everything was green-screen on our AS/400, the VPN was slow, and an initiative was presented to me to see if I could create something Web-based for the salespeople to use in the field. After three months, my project was complete. The new Website, written with Active Server Pages (ASP), connected to our AS/400, and had all the bells and whistles. I was so proud that I had enabled our sales folks to have access to customer invoices, purchase orders, and orders information via the Internet.

But soon I started getting some complaints from our sales force. It seems the initial load of the Web page required me to read 10 different AS/400 files to populate the different dropdown menus that contained critical customer information. Every time a salesperson selected a dropdown option--whether it was something like a specific order or invoice--I had to fire off JavaScript and reload the page. It was taking a great deal of time to reread my AS/400 files and repopulate the page. I had to find an alternative that would allow me to refresh only a specific section of the screen without reloading the entire page, and do it quickly. This something, I discovered, was AJAX.

AJAX 101

If you have used Google Maps or Google Suggest then you actually have experienced an AJAX-based solution already. AJAX, which stands for "Asynchronous JavaScript and XML," isn't a downloadable piece of software, but is a combination of technologies that enable dynamic, asynchronous behavior on Web pages without the need for annoying browser page refreshes. Utilizing AJAX, users can interact with Web pages almost as they would with rich desktop applications. These technologies are:

• Browser-based presentation using Cascading Style Sheets (CSS) and HTML
• XML formatted data on the server
• The XMLHttpRequest object contained with the browser
• JavaScript

JavaScript is the scripting language that most browsers support and is the mechanism that allows you to fetch data behind the scenes. The only prerequisite for AJAX implementation is knowledge of JavaScript.

Let's briefly review how AJAX works. In your browser, you will use JavaScript to respond to a browser event that has just occurred. Some of the more popular browser events are:

• onclick--occurs when a user clicks an element
• onchange--occurs when data in a control changes
• onmouseover--occurs when the user moves the mouse over an element, most likely an image

The JavaScript uses the "XMLHttpRequest" object, which is found in all of the major browsers, to send a request to the server for more data. The Web page isn't reloaded and doesn't stop all activity while waiting for data to come back from the server. The data is loaded asynchronously, meaning the browser grabs data whenever it needs it from the server and doesn't have to disrupt the existing Web page by refreshing it.

AJAX technology allows the actions of the page to be taken care of on the client side, not the server side. This results in less waiting and less frustration for the site visitor. In this article I will give you a small sample of the power of AJAX and how to can populate a section of a simple Web page with fictitious AS/400 customer data. We will build a list of customer names and, based on which customer gets selected in our dropdown menu, we will update a section of the Web page with customer data.

An AJAX Example

Let's jump into some actual AJAX code so we can see how this works. What we will be doing is building a simple ASP page that populates a dropdown list with customers. The customers are retrieved from a customer master file on the AS/400. When the user clicks on a customer in the dropdown, JavaScript fires off the AJAX code and updates the Web page.

First let's talk about the customer files on our AS/400. The file structure is like so:

R CSTFMT                                             
   	   CUSTID          5         TEXT('CUSTOMER ID')      
   	   CSTNAM        20        TEXT('CUSTOMER NAME')    
   	   CSTCTY         20        TEXT('CUSTOMER CITY')    
               CSTSTE          2         TEXT('CUSTOMER STATE')   
  	   CSTPHN        20         TEXT('CUSTOMER PHONE')  

I populated my file with four sample records for our exercise. The CUSTID field is a unique field that will allow us to retrieve the other fields later on in the exercise.

The next thing you'll need is an ODBC connection from your Web server. Remember the Data Source Name (DSN) name because it will be critical when we create the ASP connection object in the two Web pages: ajax.asp and ajax1.asp. (These pages are available for download here.) In my code, I have used the DSN name ITJUNGLE and my user profile name BOB and my password. Please adjust your code to whatever your DSN and AS/400 settings are. Please note this code is written with ASP and your Web server or local machine must be running IIS for it to work.

Open up the ajax.asp page and let's examine what the heck all of this AJAX stuff is about. I am going to try and keep this as simple as possible so I won't get into too much techie detail and lose my audience. The key to AJAX is what is going on in the header section, marked between the <head> and </head> tags. This is where the JavaScript lives and performs its magic. Just a little side note about JavaScript: It is case sensitive. Keep that in mind. You'll save yourself countless hours when you are troubleshooting.

Let's talk about this portion of the code first:

 var http_request = false;
	
    if (window.XMLHttpRequest) { // Mozilla, Safari,...
       http_request = new XMLHttpRequest();
    } else if (window.ActiveXObject) { // IE
       http_request = new ActiveXObject("Microsoft.XMLHTTP");
	}

This code needs to run on every page that is going to fire off an AJAX script. The most important object in our JavaScript is XMLHttpRequest, which is used to communicate behind the scenes with a server. Here we determine what type of browser the client is using. If our browser is Firefox or Netscape Navigator, we create a new object with new XMLHttpRequest(). If our browser is Internet Explorer, we create our object slightly different by executing the new ActiveXObject("Microsoft.XMLHTTP") line of code.

The next part of our code, the "getAJAXdata" function, is where we see "http_request", which is a reference to our XMLHttpRequest object, in action:

function getAJAXdata(dataSource, divID) {
			
	 if(http_request) {
	   var obj = document.getElementById(divID);
	   http_request.open("GET", dataSource);
	   
	   http_request.onreadystatechange = function() {
		 if (http_request.readyState == 4 && http_request.status == 200) {
                obj.innerHTML = http_request.responseText;
            } 
        }
		 
       http_request.send(null);
	 
	  }
	
	}

The first thing you'll note is that there are two parameters that get passed to this function. The parameter "dataSource" is the path of the Web page that you'd like to process in the background. The second parameter "divID", is where to "place" the changes to the Website without reloading the whole page. In our case, we will be updating a section of our Web page that is defined with a <div> tag that is named "targetDiv."

Next, we ensure that the "http_request" object exists. If it does, then we create an object named "obj" that actually refers to our <div> tag. The next thing we do is "open" the URL, using the open method, where we wish to fetch the data from. When using AJAX, you usually use GET to primarily retrieve data or POST if you are going to send a bunch of data to the server.

The last thing that we do is check the property values of "readyState" and "status." If readyState is equal to four, which means that all of the data has been downloaded, and status is equal to 200, which means everything is fine, then we are going to take the results of the URL that was passed to the open method, and return them to our obj reference, which is our <div> tag. For more information regarding these two properties, AJAX for Dummies by Steve Holzner and this site are excellent resources for more detail, which I purposely left out to keep from rambling on and on. The last function, GoGetCustomer, is what we will execute when a customer gets selected from our dropdown list. We'll talk more about that function in a bit.

This is what your Web page should look like when you fire it off:

Notice a couple of things. First, if you've set up your DSN connection to the AS/400 correctly, then your dropdown list should contain all of the customers found on the AS/400. These are sorted alphabetically by the customer name. When the customer dropdown list gets populated in our ASP code, the <option> value for each customer is their unique customer ID. This is hidden from us but it does exist. The area marked "Your selection will go here" is actually the text found with our <div> tag that is identified as "targetDiv" on ajax.asp. Go ahead and dropdown the customer list box. Your Web page should now look like below:

This is where the browser events and firing off the AJAX code come into play. If you find the <select> tag where the customers get populated, you will see a browser event called "onchange." The onchange event occurs when a customer is selected and fires off the script contained within it. This script calls our function, GoGetCustomer, which passes two parameters. The first is a reference to the select tag and the second is where we are going to put our results on the Web page.

Here is the GoGetCustomer function:

function GoGetCustomer(sel,divtag)
	{
	
		var entry = sel.options[sel.selectedIndex].value;
		var urlpath = "ajax1.asp?id=" + entry;
		
		getAJAXdata(urlpath,divtag);
			
	}

What this is doing is retrieving the customer who was selected and getting its respective value, from the parameter sel, which is our unique customer ID, and passing it as a parameter to another Web page, which we called ajax1.asp. The ID is actually a parameter that we will retrieve in ajax1.asp. Then we fire off the getAJAXdata function, which we discussed above, and repopulate our <div> tag area. I selected customer Dorey Miller, and now we’ll see what the browser looks like in the figure below:

The code in ajax1.asp is called from our getAJAXdata function. A call is made to the AS/400, which retrieves the customer ID that was passed to the page from the ID parameter, builds a very simple table in html code, and jams it into the targetDiv tag. No reloads, just updating a section of our Web page quickly.

Once you have coded the JavaScript I recommend leaving it as a standalone .js script and link it into all of your pages. You don't need to rewrite it, just reuse it over and over and over. Some usages of AJAX that I have used or foresee using are:

• Real-time form validation--validating that information is correct when moving from one text field to another without submitting the entire form
• Partial form submits--ability to submit a form data without reloading the whole page
• Advanced user effects and interface controls--things like tree view controls, progress bars, and calendars all for better user interaction without reloading the whole page
• Refreshing data--data that is always updated, like sports scores, stocks, and weather information

I am always finding new uses for it as I develop more Web applications for clients. With some knowledge of AJAX you can create some very robust Web applications that have the look and feel of desktop apps. You will be amazed by the performance enhancements as opposed to reloading entire Web pages. I only scratched the surface and didn't even talk about how AJAX can be used with XML and CSS. The possibilities are endless. Instead of reloading a Web page time and time again, dig down and scrub some AJAX into your code for some amazing effects.

Bob Butcher is a software consultant with over 20 years experience in the IT arena. He specializes in all phases of the Web world, including ASP, CSS, JavaScript, and AJAX. He can be reached at bbutcher@samicsoft.com.

                     Post this story to del.icio.us
               Post this story to Digg
    Post this story to Slashdot