Here's the detailed sequence of steps typically found in an AJAX-enabled web page:
- [@web browser] Some event occurs (e.g., onload or after clicking something)
- [@web browser] An XMLHttpRequest Object is created
- [@web browser] HttpRequest sent to web server
- [@web SERVER] HttpRequest processed, typically by a PHP script
- [@web SERVER] A response is generated (e.g., by looking up a database entry)
- [@web SERVER] Response is sent back to browser
- hello1.html -- "Hello World" example, where after clicking the "Change Content" button, a request is sent to the web server for file hello_ajax.txt which is retrieved by the browser and used to change the content of the page.
- hello3.html -- same with the previous example, but now instead of a static file read from the web server, the content is generated by calling hello_ajax.php (source -- run) which computes the date and picks a random pair of words to show.
- hello4.html -- same with the previous example, but now the PHP script at the web server hello_ajax_d.php (source -- run) includes a time delay of 2 seconds. This is used to demonstrate the asynchronous nature of AJAX. Notice the difference of the two timestamps displayed.
- suggest.html -- generate suggestions for first names (that have the same prefix as what has been typed), after one or more letters are typed. Relies on gethint.php
- suggest2.html -- generate suggestions for first names (that contain these letters), after one or more letters are typed. Relies on gethint2.php
- AJAX Tutorial: www.w3schools.com/ajax/default.asp