Welcome!

PowerBuilder Authors: Chris Pollach, Yeshim Deniz, Jayaram Krishnaswamy, Kevin Benedict, Avi Rosenthal

Related Topics: PowerBuilder

PowerBuilder: Article

Dynamic Web Page Content

Without refreshing the page

Dropdown filtering is one of the most requested features in web applications and one of the seemingly more difficult tasks. There are many ways to provide dropdown filtering including retrieving all possible values and filtering on the client side with JavaScript as well as making round trips to the server to reload the page with a filtered dropdown.

Here we will explore a more sophisticated approach that uses the XMLHttpRequest DOM object to retrieve the data from the server using XML and repopulate the dropdown without refreshing the page. Our main purpose is to show you how to use the XMLHttpRequest object. It's more useful than just for dropdown filtering. It can, for instance, be used to validate the client-side data, get data dynamically and call Web Services.

What is the XMLHttpRequest object? The XMLHttpRequest document is a client-side object that can process HTTP calls with any valid URL. Although it's called the XMLHttpRequest object, it's not limited to being used with XML, it can request or send any type of HTTP-compliant data using standard HTTP calls.

What we basically do with this object is send data to the server side and get content back, all in the background. The data returned could be a simple string like "true" or a more complex XML document. The return could also be binary content, but that could be a little difficult to handle in JavaScript.

Microsoft first implemented the XMLHttpRequest object in Internet Explorer 5 for Windows as an ActiveX object. Firefox and Safari also come with a native version of the object.

Using the XMLHttpRequest object in JavaScript
The script for using the object is simple. The following steps are involved:

  1. Create the object.
  2. Make a request to the server page.
  3. [optional] Check for errors.
  4. [optional] Process the data returned.
Take a look at the very simple script below:

1 var xmlHttp = ActiveXObject ("Microsoft.XMLHTTP ");
2 xmlHttp.open ("GET", "customerlist.jsp", false);
3 xmlHttp.send ();
4 var returnValue = xmlHttp.responseText;

The code on line 1 is creating the object. In Internet Explorer, you can create the object using a script depending on the version of MSXML installed.

new ActiveXObject ("Msxml2.XMLHTTP")

or

new ActiveXObject ("Microsoft.XML HTTP")

In Firefox and Safari you use this code instead:

new XMLHttpRequest()

A call to the "open" function in line 2 opens the http request and specifies the information. The method signature is:

Open ("method", "URL"[, asyncFlag[, "username"[, "password"]]])

In this method we are telling the object the page name (URL), what method to use (GET/POST) and whether we want the call to be synchronous or asynchronous, true by default (more on this argument in a minute). We can optionally supply the username and password to be used for the call.

The call to the "send" method in line 3 sends the http request to the server. Line 4 captures the data sent back from the server.

Synchronous and Asynchronous Calls
An important though optional third parameter to the open method is a Boolean value that controls whether the upcoming transaction should be handled asynchronously. The default behavior (true) is to act asynchronously, which means that script processing carries on immediately after the send method is invoked, without waiting for a response.

If you set this value to false, however, the script waits for the request to be sent and for a response to arrive from the server. While it might seem like a good idea to wait for a response before continuing processing, you run the risk of your script hanging if a network or server problem prevents the completion of the transaction.

It's safer to send asynchronously and design your code around the onready-statechange event for the request object. The script below is an example of how to make an asynchronous call.

1 var xmlHttp = ActiveXObject
   ("Microsoft.XMLHTTP ");
2 xmlHttp.onreadystatechange =
   processCustomerList;
3 xmlHttp.open ("GET",
   "customerlist.jsp");
4 xmlHttp.send ();

Line 2 in script above tells the object what to do when the call is completed. Now the question becomes how to make sure the call was successfully completed. Take a look at the script below to get an idea.

1  function processCustomerList () {
2   if (xmlHttp.readyState == 4) {
3    if (xmlHttp.status == 200) {
4    // Process the list
5    }else{
6     alert ("Problem occurred
     retrieving the Customer
     List. " +
7    xmlHttp.statusText);
8   }
9   }10 }

PowerBuilder Makes It Easy
With DataWindow's XML feature, all we really need to do is send the XML content back. So the same DW that you've been using for dropdowns can now be used with various templates and sent back to the client. To be able to filter dropdowns dynamically, we will need a JSP to return the XML to the client side with the data and display values. So, to achieve this, create a JSP and call the PB component that would generate the XML from the DW. On the client side we will need to parse this XML and repopulate the dropdown. The responseXML property of the object can be used to get the XML that is returned by the server.

To see a basic live example, please see this page: http://demos.cynergysystems.com/eafexamples/customerorder.jsp. This example is built using PB 10 abd EAF. As you can see, on this page we have a DW with two columns, Customer and Order. Order DDDW is filtered on change of Customer. In itemchanged event of the DW, we grab the customer ID and pass it to the order JSP via XMLHttpRequest and get the orders XML back, which is then parsed and populated in the order dropdown.

References
You might find following links useful for further reading:

  • Using the XML HTTP Request object: http://jibbering.com/2002/4/httprequest.html
  • Dynamic HTML and XML: The XMLHttpRequest Object: http://developer.apple.com/internet/webcontent/xmlhttpreq.html
  • How to Submit Form Data by Using XMLHTTP or ServerXMLHTTP Object: http://support.microsoft.com/default.aspx?scid=KB;EN-US;Q290591&ID=KB;EN-US;Q290591
  • Get dynamic Web content with HTTPRequest: A refreshing approach to page refreshes: www-106.ibm.com/developerworks/web/library/wa-httpget/

    You also might want to read about how Google uses XMLHttpRequest object in its Gmail and Google Suggest applications. This link might help:

  • Chris Justus - Server Side Guy: "Google Suggest Dissected...": http://serversideguy.blogspot.com/2004/12/google-suggest-dissected.html
  • More Stories By Rahul Jain

    Rahul Jain has rich experience in developing enterprise Web and client/server applications using PowerBuilder and EAServer. He works as a principal consultant with Keane, Inc., in Washington, DC.

    Comments (0)

    Share your thoughts on this story.

    Add your comment
    You must be signed in to add a comment. Sign-in | Register

    In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.