Interested in functions, hooks, classes, or methods? Check out the new WordPress Code Reference!AJAX
Contents
What is AJAX?
AJAX is a JavaScript based technology that allows a web page to fetch new information and present itself without refreshing the page. The idea behind AJAX is to make the web page more responsive and interactive from the user's point of view.
Normally, a web page must be refreshed to view new information. For example, when you fill out an online form such as a credit card purchase online, some sites need you to click next to let you know if you filled out something incorrectly. However, with AJAX, not only can the form let you know if you filled out something incorrectly, but it can also let you know if you've already made a previous purchase, or if your credit card was expired. Another example of useful AJAX is viewing online maps. Before AJAX, Google Maps required you to click the arrows to navigate their maps, and the page had to reload in order to see the new portion of the map you were interested in. However, Google Maps now utilizes the power of AJAX to fetch the new portions of the map and "redraw" the page where the map moves.
If you already know about Ajax, and want to use it in a plugin you are developing, skip to AJAX in Plugins.
How does Ajax work?
Ajax technology is actually fairly simple to describe. Basically, the web programmer connects a link, button, or some other type of user interface element on the web page to a JavaScript program. When the user activates the interface (clicks on the link, drags the mouse, etc.), the JavaScript program sends some information or a request for data to a URL on the web server. Next, a program on the web server (probably also created by the web programmer) processes the request and sends back a response or some data. Typically the data is in XML format, but that is not actually required. When the data or response arrives in the browser, the JavaScript program receives an "asynchronous" notification, so that it can be processed or displayed appropriately.
Today, Ajax is supported in some form by most visual web browsers (though only if the user has JavaScript turned on). Of course, like most complex JavaScript, there are differences between how browsers implement JavaScript. However, these are not too difficult to overcome. The only real restriction on Ajax is that the URL you send the information to has to be on the same website as the URL the JavaScript came from. Other than that, the uses for the technology are only limited to what you can figure out how to program.
Ajax in WordPress
Because of its responsiveness, Ajax technology is being adopted by all sorts of websites -- and WordPress is no exception. Currently, the core of WordPress uses Ajax only in the administration screens. For instance, Ajax is used for instant updates when you are doing comment moderation, and when you are adding and deleting items from lists such as categories, blogroll, and posts; Ajax is also the technology behind the auto-save functionality on post and page editing screens. Several themes and plugins also use Ajax; for instance, some post rating plugins use Ajax to store the visitor's rating in the database and then display an updated average rating.
Further Reading
General Information
Developer Information
- Codex - Ajax in Plugins - WordPress-specific information on how to add Ajax to plugins
- WP_Ajax_Response Class Reference - Responding to Ajax requests
- Working Examples of Ajax
- Simplified Ajax - SAJAX
Generally Speaking
- "Eleven Emerging Ideas for SOA Architects in 2007" from Hinchcliffe.org; "This allows widgets, Ajax applications, and mashups to be wired together so quickly it can almost be done in real-time with the latest tools."
