How to Program in Ajax

Two Methods:CodingCode Explanation

AJAX or Ajax is Asynchronous JavaScript and XML. It is used for exchanging data with a server and updating a portion of a webpage without reloading the whole webpage on the client side. The display and behavior of the existing webpage doesn’t get interfered at all while exchanging and updating the data. Ajax is also considered a group of technologies which has HTML, CSS, DOM, and JavaScript that are utilized to mark up, style, and allow the user to interact with the information on the webpage. In this article, it will show you how to write a simple program in Ajax steps by steps using Notepad++. Some basic knowledge of HTML, DOM, JavaScript, and a local Web server or remote Web Server is required. WampServer is used in this article for a test.

Method 1
Coding

  1. Image titled 3929304 1
    1
    Prepare a picture for writing an Ajax program. Save the picture in the same folder where you will save your html and text files displaying the Ajax program. In this article, “ProgramInAjax” directory is set up inside the “wamp” folder under the “www” directory where you installed WampServer.
  2. Image titled 3929304 2
    2
    Open any text editor. Notepad++ is used as the text editor in this article.
  3. Image titled 3929304 3
    3
    Create a new file in the text editor. Type the following:
     <h2>Oh oh! Where did the yellow flower go?</h2> 
    You may type whatever you want inside the html tag <h2></h2> here.
  4. Image titled 3929304 4
    4
    Save the file as a text document with the name of “ajax-data.txt. Actually, you can name the file whatever you want but make sure you enter the same file name to the coding in this line:
     xmlhttp.open("GET","ajax-data.txt",true); 
    However, the HTML tag <h2></h2> is used for the header so that it looks bigger and more invisible.
  5. Image titled 3929304 5
    5
    Create a new file for a webpage. This file is for an HTML file to view the Ajax program in a Web browser.
  6. Image titled 3929304 6
    6
    Copy the following code:
     <!DOCTYPE html> <html> <head> <title>My First Ajax Program by Me</title> <!--Put the Ajax code below.--> <script> function loadXMLDoc() { var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200)  {  document.getElementById("myImage").innerHTML = xmlhttp.responseText; } } xmlhttp.open("GET","ajax-data.txt",true); xmlhttp.send(); } </script><!--End of the script--> </head> <body style="text-align: center;"> <!--An image goes here to test the Ajax program.--> <div id="myImage"> <h2>Click the button below to make the flower disappear.</h2> <img src="MyPicture.png" width="500px" height="300px" title="Yellow Flower" alt="an image of a yellow flower"/> </div> <br/> <!--A button goes here--> <button type="button" onclick="loadXMLDoc()">Click here to make the picture disappear!</button> </body> </html> 
  7. Image titled 3929304 7
    7
    Save the file. Click the save button on the menu bar. A “Save As” box is open. Enter a name for your document. In this article, the name of the file is “index.”
  8. Image titled 3929304 8
    8
    Click the drop down arrow to choose the file extension. At the “Save as type” field, click the drop down arrow to choose the file extension.
  9. Image titled 3929304 9
    9
    Select “Hyper Text Markup Language file. Make sure that it has “html” inside the parenthesis. Click save after selecting the “html.”
  10. Image titled 3929304 10
    10
    Test the HTML file in a Web browser. Open the webpage in a web browser. Go to “Run” on the top menu bar. Click it and select “Launch in Chrome” or any browser being installed in your system. Google Chrome is used for the testing in this article. You may have some other browsers installed within Notepad++. You can select your favorite browser. Another option, you can click the WampServer icon at the taskbars at the bottom of the screen and select “Localhost.” You should see your directory there and click the index file.
  11. 11
    Click the button below the picture to test the script.
  12. Image titled 3929304 12
    12
    Your final webpage. Your webpage should be refreshed with the information that you entered into the text file at the beginning. The flower and the header should be replaced with the new header called “Oh oh! Where did the yellow flower go?”

Method 2
Code Explanation

  1. Image titled 3929304 13
    1
    The body section. The body of HTML has the “div” section and one button. This section will be used to display the information returned from the server. The button calls a function named “loadXMLDoc(),” if it is clicked.
     <!DOCTYPE html> <html> <head> <title>My First Ajax Program by Me</title> </head> <body style="text-align: center;"> <!--An image goes here to test the Ajax program.--> <div id="myImage"> <h2>Click the button below to make the flower disappear.</h2> <img src="MyPicture.png" width="500px" height="300px" title="Yellow Flower" alt="an image of a yellow flower"/> </div> <br/> <!--A button goes here--> <button type="button" onclick="loadXMLDoc()">Click here to make the picture disappear!</button> </body> </html> 
  2. Image titled 3929304 14
    2
    The head section. The head section of the HTML file has a script tag which contains the “loadXMLDoc()” function.
     <head> <title>My First Ajax Program by Me</title> <!--Put the Ajax code below.--> <script> function loadXMLDoc() { var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { document.getElementById("myImage").innerHTML = xmlhttp.responseText; } } xmlhttp.open("GET","ajax-data.txt",true); xmlhttp.send(); } </script><!--End of the script--> </head> 
  3. 3
    More Explanation. The most important thing of Ajax is the XMLHttpRequest object. It is used to exchange data with the server and all modern browsers support the object.
    • The syntax to create an XMLHttpRequest() object is variable=new XMLHttpRequest(); but at the same time the syntax to create old versions of Internet Explorer (IE5 and IE6) that uses an ActiveX object is variable=new ActiveXObject("Microsoft.XMLHTTP");.
    • In order to handle all the modern browsers, it needs to check if the browsers support the XMLHttpRequest object. If it does, it creates an XMLHttpRequest object. If one does not, it will create an ActiveX object for it.
    • Then it will send a request to the server. The method of the XMLHttpRequest object called “open()” and “send()” will be used. xmlhttp.open("GET","ajax_info.txt",true); xmlhttp.send();.

Tips

  • Save your html file more often during your work. Pressing the Ctrl and S at the same time for Window users will save more time.
  • Be sure to add your saved HTML file at the same location where your image and data text file are.
  • When you name a file, it is a case sensitive when you add those names into the code. For example, “myImage” is different from “MyImage” or “myimage.”
  • Another option to preview the result, you can open your favorite browser and type “localhost/ProgramInAjax” in the web address bar to display the web page. You should be able to see the webpage if you name your HTML file to “index.html.”

Things You’ll Need

  • a computer
  • any text editor program
  • a web browser such as IE, Google Chrome, Safari, Firefox and so on
  • a local web server or any remote server (WampServer is used in this article)

Article Info

Categories: Web Programming