Learn AJAX

Asynchronous JavaScript And XML: A to Z blog…

  • Lasantha Samarakoon

  • Facebook

  • Advertisements

Let’s say, “Hello World”…

Posted by Lasantha Samarakoon on August 26, 2009

Today we are going to do our first practical. It’s nothing but saying, “Hello World”…

In the previous lesson, I showed you how to create the XMLHttpRequest object. In this lesson we are going to implement a simple client server communication using that http, the XMLHttpRequest object.

Before jump to the coding, we have to learn a bit about the methods and properties available on the XMLHttpRequest. Only the necessary methods and properties are mentioned below.


  • open(method, URL, isAsynchronous)
      By invoking this method, you are going to make a connection to the web server. When regarding about the parameters, in most cases method can be “GET” or “POST”. URL is the address of the server  script such as PHP, ASP, ASP.NET, CGI or JSP file. “isAsynchronous” can be either true or false.
  • send(data)
      This method sends data to the server. Here the data can be anything. If you are using the “POST” method, you can send the “Query String” as the data.
  • abort()
      Can be used to cancel the request


  • onreadystatechange
      XMLHttpRequest object can be existing in 5 different states. When the state changed, the function you specified here will get invoke. Here are those states.
      0 – Uninitialized
      1 – Loading
      2 – Loaded
      3 – Interactive
      4 – Complete
  • readyState
      XMLHttpRequest object’s state
  • status
      Status code sent by the web server about the request you have made. Some of the frequently used status codes mentioned below.
      301 – Moved Permanently
      403 – Forbidden
      404 – Not Found
      500 – Internal Server Error
      503 – Service Unavailable
  • responseText
      The response generated by the server script
  • responseXML
      Same as the responseText. But commonly uses, when the response comes as an XML document.

Same as the responseText. But commonly uses, when the response comes as an XML document.

In this example we are going to request a text file resides on the server. Usually you can view a text file in the web browser by just entering the URL of the text file. But here, we have a web page with a button, and when we click on that button we will get the content of the text file in a message box. Following files are needed for this example.

  • ajax.js
      Initialization of the XMLHttpRequest object is available here.
  • main.htm
      Web page with the button.
  • data.txt
      The text file which has “Hello World” in it.


ajax.js file

ajax.js file


main.htm file

main.htm file


data.txt file

data.txt file

From alert to innerHTML

In the above example, we get the content of the text file in a message box. Instead of that let’s print it on the same web page. So we have to do some changes in the main.htm file.

changed main.htm file

changed main.htm file

You can download the source code here.


One Response to “Let’s say, “Hello World”…”

  1. charith said

    It’s nice machan….,
    keep writing we will read..

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: