Get Dynamic Web Content with HTTPRequest

By Doug Davis
2005-04-11

Along came the HttpRequest object

The HttpRequest object is wonderful in that it does nothing more than allow you to issue a GET or POST on any URL. Look at a subset of its properties and methods:

Property       Value

readyState     State of the document 

status         HTTP response code 

responseText   Document as a string 

responseXML    Document as XML

Methods                                      Value 

open( method, URL, async, user, password )   Creates a connection to the specified URL 

send( data )                                 Issue the request

Start with the methods and their parameters:

• For the open() method:
· The method parameter is the HTTP method (that is, GET or POST).
· The URL is obvious.
· The async parameter indicates whether the request is done asynchronously or not. Basically, if not done asynchronously, then the entire browser blocks (or hangs) until the request is finished. Clearly, setting this to true is the preferred way to go.
· The user and password parameters allow you the option of passing in the authentication information as needed.
• The send() method actually makes the request.
· When you do a GET, the data parameter can be null. To send data to the server, that is, do a POST, then you set the data parameter to send the contents of the POST.

Look at the properties:

• The readyState property represents the state of the document at the URL. You can use this to know when the document has finished loading (more on this in a bit).
• The status property contains the HTTP response code (for example, 200) after the request is completed.
• The responseText and responseXML properties contain the document itself, either as a string or as XML. You are free to use either one depending on which is easier for your use.

To look at this in action, examine the sample HTML page in Listing 1:

Listing 1. background.html



  <html>

    <script>

      var xmlDoc = null ;

  

      function load() {

        if (typeof window.ActiveXObject != 'undefined' ) {

          xmlDoc = new ActiveXObject("Microsoft.XMLHTTP");

          xmlDoc.onreadystatechange = process ;

        }

        else {

          xmlDoc = new XMLHttpRequest();

          xmlDoc.onload = process ;

        }

        xmlDoc.open( "GET", "background.html", true );

        xmlDoc.send( null );

      }

  

      function process() {

        if ( xmlDoc.readyState != 4 ) return ;

        document.getElementById("output").value = xmlDoc.responseText ;

      }

  

      function empty() {

        document.getElementById("output").value = '<empty>' ;

      }

    </script>

  

    <body>

      <textarea id="output" cols='70' rows='40'><empty></textarea>

      <br></br>

      <button onclick="load()">Load</button>  

      <button onclick="empty()">Clear</button>

    </body>

  </html>

If you copy and paste the code in Listing 1 into an HTML file named background.html and bring it up in your browser, you should see a page that looks like Figure 1:

Figure 1.The background.html file as seen in your browser

When you view the example Web page (background.html) in your browser, click Load. The JavaScript asynchronously (in the background) does a GET of background.html and places the result in the <textarea>, which then looks like Figure 2:

Figure 2.The resulting code

In examining the code itself, look at the load() function first:

Listing 2. The load() function



    function load() {

      if (typeof window.ActiveXObject != 'undefined' ) {

        xmlDoc = new ActiveXObject("Microsoft.XMLHTTP");

        xmlDoc.onreadystatechange = process ;

      }

      else {

        xmlDoc = new XMLHttpRequest();

        xmlDoc.onload = process ;

      }

      xmlDoc.open( "GET", "background.html", true );

      xmlDoc.send( null );

    }

In this function, you create a new HttpRequest object. Notice that the first thing in Listing 2 is an if-statement that figures out whether the browser is Microsoft Internet Explorer or not. If the result of the condition is true, and the browser is Internet Explorer, then you create the ActiveX version of the HttpRequest object; otherwise you assume that the browser is Mozilla and use the built-in XMLHttpRequest object. In either case, you then tell it to call the process() method when the browser finishes loading the page (notice the property is named slightly different depending on the browser). This code works on Internet Explorer 6.0 and Mozilla Firefox 1.0. I make no claim about any other browser or browser version. You then use the open() method to define the HTTP method, URL and the async flag. And finally, you issue the request using the send() method. This method returns immediately, because the async parameter is set to true, allowing normal Web page activity to continue.

When the request for the page is finally completed, the browser automatically calls process() which updates the contents of the <textarea>. It is important to note the first line in process():

if ( xmlDoc.readyState != 4 ) return ;

This is important is because, depending on which browser you use, it might call the process() method before the URL completely loads. That's why it's imperative to check the status of the document and continue only if it's ready (and shows a value of 4). Once ready, you then update the contents of the <textarea> with the document at the URL you specified -- in this case, the example Web page itself. Hopefully, you can see how with this technique, in combination with DHTML, you can dynamically and asynchronously update portions of a Web page with minimal impact on the reader.

Tutorial Pages:
» A refreshing approach to page refreshes
» Are applets healthy?
» Along came the HttpRequest object
» In Conclusion
» Resources

First published by IBM DeveloperWorks

Related Tutorials:
» All about JAXP, Part 1
» Make Database Queries Without the Database
» Load List Values for Improved Efficiency
» 2 Ways To Implement Session Tracking
» A Simple Way to Read an XML File in Java
» Develop Aspect-Oriented Java Applications with Eclipse and AJDT

Advertise with Us!

Tutorials

Scripts

Web Hosting

Developer Manuals

Resources