Ajax Code Examples

For the Ajax examples below, do View...Source... on the chosen HTML page to see the code that performs the asynchronous HTTP call(s).

1. Ajax -  call a Java servlet

2. Ajax - call a C# web handler

3. Ajax - watch the readyState change

4. Javascript - inlining an HTML table's background

5. Ajax - call a SOAP 1.2 web service (written in C#)

6. Javascript - capability report for web browsers

7. Javascript - widgets and events

8. Ajax - multiple simultaneous HTTP calls

9. Ajax - using hidden frames

10. Ajax - C# web handler proxy to remote web service

Here are some server-side programs used in the examples which follow:

   Quote server (Java servlet QuoteServlet.java)
   Quote_server (C# webhandler QuoteHandler.ashx)
   Rumor_server (C# webhandler RumorHandler.ashx)

The following files are also used by each Ajaxed HTML page:

   createXMLHTTPRequest.js (boilerplate Javascript to get an HTTP object)
   StyleSheet.css (cascading style sheet for HTML formatting)

Example 1 - Ajax - call a Java servlet

 These two Ajax examples talk to a Java servlet:

   quoteByGet.htm
   quoteByPost.htm

Back to top

Example 2 - Ajax - call a C# webhandler

Here's a traditional form page (no Ajax):

   quoteTraditional.aspx  <-- REPLACE
       SERVER SOURCE: quoteTraditional.aspx and quoteTraditional.aspx.cs

This Ajax example talks to an ASP.NET webhandler written in C#:

   quoteByPost.htm and getQuoteRumorPost.htm

The browser pages for the quoteByPost.htm pages in Example 1 and Example 2 are identical except for the URL of the server program.  Each Ajaxed browser page has to be in the same web domain as the server program being called in the background.

Back to top

Example 3 - Ajax - watch the readyState change

The following two files are the quoteByPost.htm  file from Example 2,with the Javascript modified to show readyState values:

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

    showStates1.htm (slows it down with alert boxes so you can see everything)
    showStates2.htm (goes fast, mostly you just see state 4)

Back to top

Example 4 - Javascript - inlining an HTML table's background

The following page contains Javascript that changes the background and foreground colors used within a table.  I had it here to point out that Javascript has long been used to change things within an HTML page even without making background calls to a server.

     inlining_table_background.htm

Back to top

Example 5 - Ajax - call a SOAP 1.2 web service (written in C#)

For more on the technique used here, see chapter 16 of Phil Ballard's spunkly little book, Sam's Teach Yourself Ajax in 10 minutes.  All the details can be seen in the code from the source of the following page.

     index.htm

Back to top

Example 6 - Javascript - capability report for web browsers

This is an attempt to report all the browser capabilities which can be seen via the Javascript navigator object.

     navigator.htm

Back to top

Example 7 - Javascript - widgets and events

This is a summary of all the different input widgets you can create in a page with Javascript.  You can also see their events fire.

      javascript_widgets.html

Back to top

Example 8 - Ajax - multiple simultaneous Ajax calls

This is a rearrangement of the Ajax code we've done so far so that multiple HTTP requests can go on simultaneously.  To do this, the XMLHTTP request object must be instantiated inside the Javascript function that calls the server.  Furthermore, all code related to the request must be inside this function.  The callback function must be an anonymous inner function within the callServer() function, and the code which updates the page after the callback must also be within the anonymous inner function.

This makes the code harder to understand.  Hence, I have reverted to a different style of using curly braces which makes it easier to visualize what is nested where.

These examples call a web handler which deliberate waits 3 seconds before returning a quote.  This allows us to observe that the HTTP calls in the first file cannot overlap, whereas those in the second (using the technique described above) can overlap (both calls progress simultaneously using different HTTP requests).  In the first example below, if you overlap the calls, the second call takes over and the first call is terminated before it finished:

         getQuotePost.htm    <-- done the same way as in Examples 1-3 above; only one HTTP call at a time

         getQuotePostMany.htm   <-- multiple overlapping

Note also that both the above files have the callback error handling split into a separate Javascript file.  This new file, shown below, allows for more elaborate error messages in case of HTTP failure:

         handleHTTPerror.js

Back to top

Example 9 - Ajax - hidden frames

NOTE: Hidden frames, like regular XMLHTTP calls, must load from the same domain (otherwise, you get a permission error and the page fails to load in the background).

Here is the frameset that causes the hidden frame to load a static HTML page, which then calls back into the visible frame:

    frameset.htm
    left.htm
    hiddenPage.htm

The following example is the same as above, but the frame is not hidden (it's easier to see what's going on:

    frameset_visible.htm
    left.htm
    right.htm
    hiddenPage.htm

Here is a frameset that causes the hidden frame to invoke a web handler, which then sends an HTML page that calls back into the visible frame:

     frameset_handler.htm
     left1.htm
     testHandler.ashx  |  the handler's source code


 Back to top

Example 10 - Ajax - C# web handler proxy to remote web service

The page below provides a proxy to the Geocoder webservice (see its WSDL file):

    index.htm |  the handler's source code

Here's a C# Windows client that calls the service asynchronously.


 Back to top

Visitors: