If you remember way back in Class 5, we saw examples of using JQuery, the Javascript framework. Some of those examples used JQuery to create event handlers for mouseover, mouseout, page load, etc.
In particular, the show/hide example showed how to change the contents of the page in response to user events. In this case, we were making an element show up or disappear depending on user actions. This is basic DHTML.
You can think of AJAX as doing something similar. With AJAX we often make things show up on the page that were not there before. The difference between our old show/hide example and an AJAX version is that the content that shows up on the page using AJAX would not be pre-loaded on the page, as it is in the show/hide example.
AJAX is a way of making requests to the server without reloading the entire page. You can think of it as being a behind-the-scenes way of making requests to the server.
Sometimes AJAX is used to load new content to display on the current page. Other times, AJAX is used to autotmatically submit form data to the server without requiring the user to actually submit a form in the normal way.
Here are the AJAX examples we covered in class today:
- simple page that uses AJAX to load up different snippets of HTML from files on the server, depending on which link was clicked
- a more dynamic page that uses AJAX to pass data from the page to a script on the server, and then display the response from the server on the page
- an example that both uses AJAX to submit data to the server, and uses AJAX to update the contents of the page. In the example, the data is all stored and retrieved from a MySQL database table.