|
|
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="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">.
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:
function(){$("#locat1").load("page2Show1.htm");}
where
- 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
- 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.
- 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.
|
|
|
