AJAX stands for asynchronous JavaScript and XML. It is not a technology itself, rather it is an approach which uses combination of technologies. Ajax basically allows partial reloading of a page. Without Ajax, when you click on a button, an HTTP request is created and sent to the server, the server in response resend the whole webpage. This results in large amount of data transportation between a server and a client. Ajax reduces the amount of data travelling between client and server via partial page reloads thus speeding up the application. Following are the steps that are required to implement Ajax in your web application.
Live Movie Name Hint Example
To demonstrate how Ajax works, we will create a webpage which contains a text box, when user enters name of the movie in the text box, hints about the movie name shall appear.
Lets create a form and JavaScript function that will be executed when user enters something in the form.
Start typing the name of the movie in the text box:
Suggestions:
Download the code
Run the code
When user starts entering the name of the movie displayMovieHint JavaScript method executes which starts looking for hints. Another PHP file “Php-moviehint.php” contains names of all the movie hints in an array. When user enters text in text box, an XMLHttpRequest is send to this php file, which processes the input query and returns hints if exists. The contents of the “Php-moviehint.php” are as follows.