Skip to main content  
        IBM i home   |   Easy400  
Public Source
  XML Ajax
XML Ajax CGI example 1
XML Ajax CGI example 2
 JQuery Ajax
jQuery Ajax CGI example 1
JQuery Ajax CGI example 2

How to ... Ajax  
by Giovanni B. Perotti (Italy)

JQuery Ajax

JQuery provides a very simplified way to use Ajax.
Instead of coding in your HTML the rather complex javascript functions for XML Java (GetXmlHttpObject() and AjaxRequest()) you just invoke some existing JQuery functions.
In your HTML script, link to JQuery in the following way:
<script src="">.
Then you must use some JQuery function.
The syntax of JQuery function is rather different from the that of the simple Javascript functions. If you do not know it, you will learn through the following examples.
You can learn much more about JQuery from the W3Schools JQuery Ajax Tutorial.

Loading an Ajax page

Use the JQuery load function. In this function you must specify the ID of a section where the external file must be loaded and the URL of the page to be loaded:
  • locat1 is the ID where the page must be loaded (example: <span>id="locat1"</span>), and
  • page2Show1.htm is the external file to be loaded at the given ID of the HTML page.
Click here to show the Ajax code used

About the AJAX response from a CGI program
The response of a CGI program to an AJAX request usually is an HTML script to be inserted in the area identified by the given id. Such a HTML script should always start with the HTTP header Content-type: text/html, followed by any other HTTP header, followed by an empty line, followed by the HTML text to be inserted in the area identified by the given id, see Figure 1.
The response may contain just HTTP headers and one empty line.
This is for instance the case when you just want to set a cookie via a Set-Cookie header, see Figure 2 (you may run our CGI program JQRACOOKIE).
Content-type: text/html
empty line
text to be inserted in the identified area
Figure 1
Content-type: text/html
Set-Cookie header
empty line
Figure 2

About the origin of merged texts
Requests for Ajax text should always be directed to the HTTP server servicing the original request. A request to a different HTTP server results to a null response.

Some notes

  1. If you display the page source from the browser, you do not see any of the Ajax responses. This is because the save of the page source is performed at page load time and receiving an Ajax response is not consirered as a page load.
  2. In our JQuery CGI example 1 (pgm JQRACOOKIE) each different Ajax response is received in a different point, while in our JQuery CGI example 2 (pgm JQRASAMPLE)the area where Ajax responses are received is always the same.