Ajax: Tips and Tricks

Cross-origin Resource Sharing (CORS) is a mechanism for requesting fonts, scripts, and other resources from an origin (defined, as above, as the combination of domain, protocol, and port) other than the requesting origin.

An Ajax login form can send data to the server and display an error message without requiring a page refresh. This can make the process of logging in less painful for the user. Here's how to program an Ajax login form.

If a user is idle for a certain amount of time, it is often a good idea to set up an automatic session timeout with Ajax to force a logout, especially if there might be sensitive data on the screen. This is normally handled on the server side; however, if we want to hide the data on the screen and alert the user that the session has ended, we'll need to handle the session on the client as well. One way to handle this is described below:

Callback functions are used to handle responses from the server in Ajax. A callback function can be either a named function or an anonymous function. Follow the steps below to create and use the different kinds of callback functions.

Ajax web applications use JavaScript to interact with a server and update web pages without reloading them. The following eight steps show how to develop a simple Ajax web application.

Although the HTTP specification identifies several methods of HTTP requests, the most commonly supported (and used) methods are GET, POST, and HEAD.

jQuery's core ajax() method is a powerful and straightforward way of creating Ajax requests. To start using it, follow these six steps.

In some cases, you need to get quick information from a database, but you don't want to process an entire page. For example, you may have a form for requesting information about an order. The form might have multiple fields, one of which is the order number. The order number is not required, but if it's filled in it must match an existing order number in the database. Rather than waiting to check the order number until the user fills out and submits the entire form, you can use Ajax to flag a bad order number as soon as the user tabs out of that field.

Google Maps (http://maps.google.com) was one of the applications that brought so much attention to Ajax. One of the cool things about it is it allows the user to drag maps around the screen seamlessly loading new sections. It does this by preloading the sections around the map that the user is likely to drag on to the screen. This same concept can be applied to other applications, such as slideshows. Create a slideshow with Ajax in the following steps.

Because Ajax calls are asynchronous, we can't be sure when the response will come, so we must write code to wait for the response and handle it when it arrives.

For our Ajax courses, you will need Node.js, a modern web browser, an editor, and our class files.

Sometimes it is nice to be able to edit a page without displaying form elements by default. For example, if you want to allow people who are logged in as administrators to edit sections of a page, you could make it so that the administrator could click on those sections to turn them into form elements and perform inline editing using Ajax.

Google Maps (http://maps.google.com) was one of the applications that brought so much attention to Ajax. One of the cool things about it is that it allows the user to drag maps around the screen seamlessly loading new sections. It does this by preloading the sections around the map that the user is likely to drag on to the screen. This same concept can be applied to other applications, such as navigable tables. Learn how to create a navigable table with Ajax in the following steps.