Learn AJAX

Asynchronous JavaScript And XML: A to Z blog…

Posts Tagged ‘Download’

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.

Methods:

  • 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

Properties

  • 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

ajax.js file

ajax.js file

main.htm

main.htm file

main.htm file

data.txt

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.

Posted in Uncategorized | Tagged: , , , , | 1 Comment »