• google plus

How to Develop a Web Application with Ajax

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.

  1. Create or find your data source URL. An Ajax web application needs a server or other source of data that can be accessed using a URL in order to update the page. For this example, we'll use the following text, saved in a file named data.txt.
    Hello, World! This text is loaded using Ajax.
  2. Create the HTML for your application. In the following HTML, I've used a basic HTML5 template containing an h1 element with an id attribute. I've also created a button that will trigger the Ajax functionality on the page when clicked.
    <html>
    <head>
    	<title>An Ajax Web Application</title>
    </head>
    <body>
    <h1 id="page-title"></h1>
    <button id="load-data">Click Here to Load the Data</button>
    </body>
    </html>
  3. Create a script block in your HTML (just above the closing body tag) and write an event listener to detect click events on the button.
    <script>
    document.getElementById("load-data").addEventListener("click",function(){
    
    });
    </script>
  4. Use an XMLHttpRequest object inside the event listener's callback function to request the data file.
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.open("GET", "data.txt");
  5. To detect the response, look for a change in the state of the xmlhttp response, using the onreadystatechange event handler.
    xmlhttp.onreadystatechange = function() {
    	//Do something here
    }
  6. Write a callback function to insert the data from the text file into the h1 element when the state of the response changes.
    xmlhttp.onreadystatechange = function() {
    	document.getElementById("page-title").innerHTML = this.responseText;
    }
  7. Use the send() method to send the request.
    xmlhttp.send();
    
    The finished HTML page should look like this:
    <html>
    <head>
    	<title>An Ajax Web Application</title>
    </head>
    <body>
    <h1 id="page-title"></h1>
    <button id="load-data">Click Here to Load the Data</button>
    <script>
    	document.getElementById("load-data").addEventListener("click",function(){
    		var xmlhttp = new XMLHttpRequest();
    		xmlhttp.open("GET", "data.txt");
    		xmlhttp.onreadystatechange = function() {
    			document.getElementById("page-title").innerHTML = this.responseText;
    		};
    		xmlhttp.send();
    	});
    </script>
    </body>
    </html>
  8. Open the HTML page in a browser and click the button. The script will produce the following output in a browser:
    Result of Running Script and Clicking Button in Browser
Author: Chris Minnick
Chris is a prolific author and trainer, and the CEO of WatzThis?. His published books include Writing Computer Code, JavaScript for Kids, Coding with JavaScript For Dummies, Beginning HTML5 and CSS3 For Dummies, Webkit For Dummies, CIW eCommerce Certification Bible, and New Riders' XHTML.
About Webucator

Webucator provides instructor-led training to students throughout the US and Canada. We have trained over 90,000 students from over 16,000 organizations on technologies such as Microsoft ASP.NET, Microsoft Office, Azure, Windows, Java, Adobe, Python, SQL, JavaScript, Angular and much more. Check out our complete course catalog.