Ajax what is

Try it Yourself ». AJAX is a misleading name. AJAX allows web pages to be updated asynchronously by exchanging data with a web server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page. AJAX calls have a wide range of applications but are particularly useful for websites who have a large amount of personal information which can prevent full HTML document caching.

Ecommerce websites are among those that can use AJAX calls to load cart contents, account information, and product recommendations without embedding that information direclty into the HTML of a page. At Section we regularly use AJAX calls combined with Varnish Cache to allow for the caching of dynamic content without sharing personalized information between users. As a basic example you could configure a page counter that changed each time a page is reloaded by programming a snippet that is loaded after the main content:.

Because this is called following the rest of the page, you can cache the entire HTML document of the page without worrying that the dynamic content will be broken. AJAX calls are beneficial for several reasons. In order to make an HTTP request to the server with JavaScript, you need an instance of an object with the necessary functionality.

Note: For illustration purposes, the above is a somewhat simplified version of the code to be used for creating an XMLHttp instance.

For a more realistic example, see step 3 of this article. After making a request, you will receive a response back. At this stage, you need to tell the XMLHttp request object which JavaScript function will handle the response, by setting the onreadystatechange property of the object and naming it after the function to call when the request changes state, like this:.

Note that there are no parentheses or parameters after the function name, because you're assigning a reference to the function, rather than actually calling it. Alternatively, instead of giving a function name, you can use the JavaScript technique of defining functions on the fly called "anonymous functions" to define the actions that will process the response, like this:.

Next, after declaring what happens when you receive the response, you need to actually make the request, by calling the open and send methods of the HTTP request object, like this:. The parameter to the send method can be any data you want to send to the server if POST -ing the request. Form data should be sent in a format that the server can parse, like a query string:. For example, use the following before calling send for form data sent as a query string:.

When you sent the request, you provided the name of a JavaScript function to handle the response:. Features like Google Suggest are a fundamental part of contemporary web browsing, which points to how essential AJAX is in web development. In addition to Google Suggest, Cascarano says that AJAX is commonly used to update features like status and notification bars, online forms, comments sections, and surveys and polls.

In other words, after markup languages like HTML and CSS are used to build and display static web features headers, fonts, paragraphs, etc. Markup languages are coding languages used to annotate parts of a web document that are intended to give web browsers instructions about how to understand, process, and display a web page, versus the actual text intended to be displayed on the page.

When a user visits a web page designed to make use of AJAX and a prescribed event occurs the user loads the page, clicks a button, fills out a form, etc. The XMLHttpRequest object sends a request for updated page data to the web server, the server process the request, a response is created server-side and sent back to the browser, which then uses JavaScript to process the response and display it on the screen as updated content.

To recap: JavaScript automates the updating process, the request for updated content is formatted in XML to make it universally understandable, and JavaScript again kicks in to refresh the relevant content for the user viewing the page.