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.

Steps

Method1

Coding

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

Open any text editor. Notepad++ is used as the text editor in this article.

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

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

Create a new file for a webpage. This file is for an HTML file to view the Ajax program in a Web browser.

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

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

Select “Hyper Text Markup Language file.” Make sure that it has “html” inside the parenthesis. Click save after selecting the “html.”

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

Click the button below the picture to test the script.

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?”

Method2

Code Explanation

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.

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();.

Community Q&A

If this question (or a similar one) is answered twice in this section, please click here to let us know.

Video

This video tutorial is very relevant to this article but it demonstrates how to retrieve a data file from a remote server instead of a local file.

Tips

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.”

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.

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.”

Be sure to add your saved HTML file at the same location where your image and data text file are.

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)