Let’s say, “Hello World”…

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

main.htm

main.htm file

data.txt

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

You can download the source code here.

AJAX Basics

Today I’m going to talk to you about, AJAX Basics. As the previous post, you can see that in the AJAX model, data transfers happen via the AJAX Engine. So the very first thing we have to do is to understand and create this AJAX engine. AJAX engine is just an object which is called as XMLHttpRequest.  By creating an object of this XMLHttpRequest, you can communicate with the web server through JavaScript.

But when you try to create the object, Cross-Browser Compatibility will be an issue. Because you can’t create the object in non-Internet Explorer, in the same way as in Internet Explorer. That’s occurred because in IE, XMLHttpRequest come as an ActiveXObject, but in non-IE browsers it comes in native handler.

So here is how I going to create “XMLHttpRequest” object.

Creating XMLHttpRequest object

OK.. this is the way to create an XMLHttpRequest object. This code snippet will be working on Microsoft Internet Explorer as well as Non-IE browsers such as Mozilla Firefox, Opera, Safari or anything. By using this “http” variable, we can transmit data with the web server. I hope to show you an “Hello World” example in the next post.

Introduction to AJAX…

AJAX is stands for Asynchronous JavaScript And XML. It’s not a language such as Javascript, VBScript or anything, but it’s a collection of techniques that the developpers used for a long time.

AJAX can be used to update a web page continuesly or to update only a part of the web page. But, how this can happen? So to get an idea about this, you should consider about how the traditional model works.

So how the browser going to fetch data from the server? To understand this, let’s get an example of visiting Google.com. So when you want to visit google.com, you just enter google’s URL in your browsers address bar. When you hit “Enter”, the browser generate an request which is called as “HTTP Request“, and send that to the web server. When the server get this request, extract it, analyse it, and finally send back the required web page to the client’s browser. So this is happen everytime when you click a link or type a URL in the address bar.

Traditional Model

In the AJAX model, it is little bit different from the traditional model. Let’s understand this by an example. Imagine that you are viewing a photo gallery in some website. Thumbnails of all the photos are there on the page. When you click on one of the thumbnails, you can view the full-size image of that. If you are using the traditional model, the image will be loaded in a new page. But if you are using the AJAX model, you can see that image on the same page at some location without refreshing or navigating away from that page.

AJAX Model

So this is the basic idea of AJAX. AJAX has been so popular these days, and many websites use this for increase their user experience. Here are the some real world examples of AJAX.

1. GMail

   • If you are familiar with GMail, you can remember that, when you select a mail and click “Delete”, your mail will be deleted without refreshing the whole page. It’s AJAX.

2. Facebook

   • Facebook is one of main sites which use AJAX. In Facebook, you can update your status, delete a post from the wall, or send message without reloading the page. And when you enter someone’s name in your search box, you can see drop down list of similar names. That is also AJAX. The most interesting thing is, did you ever noticed that your news feed refreshes every 60 seconds? This shows the power of AJAX.

3. Google Maps

   • Google maps also uses AJAX for refreshing their maps when you navigate through or when you zoom them.

Oh… I forgot to tell you about another thing. Do you know what is meant by “Asynchronous“? OK, again an example. Your honey is gonna prepare something for the dinner. So she’s working hard and she does everything without bothering you. That is Synchronous. But one day, she asked you to cut potatoes while she’s doing other stuff. When you finished cutting, you alert her that you have finished cutting. That is Asynchronous.

In the Synchronous method, there is only one stream, that only the main-stream available (like herself). In asynchronous model, along with the main-steam, there are several sub-streams available (like your help to her). So in AJAX, it is asynchronous. i.e. data transfers happen, without disturbing your view.

So now the time to get ready for long run with AJAX…

Need of AJAX…

Remind a situation where you used Google to search something. You visited Google, entered the keyword, and file clicked “Search”, the page went blank and loaded the new page with your search results. So in this situation, when you click “Search”, the browser navigated from one page to another. So the total page reloaded. If the second page contains only few kbytes, and the content in the previous page will no longer required, then this won’t be a big problem. But if you have a slow internet connection, and you are viewing a photo gallery in Facebook or something, and you clicked on a thumbnail to enlarge it, the page vanished and finally you are end up with only the larger one, think what kind of impression will be remained in your mind :). So it’s worthwhile if you can reload only the part in the web page which contains the large photo. To help you in this kind of situation, the technology called AJAX come to the stage.

These requirements can also archive by using Flash or Java Applet. But to view Flash .SWF file you want Flash player installed in your computer and to run Java Applet you need JRE in your machine. But to use AJAX, you want only JavaScript enabled browser and most of today browsers have JavaScript.

Remind that, if you have a desire of coding, and you want your visitors to have better user experience with your website, then AJAX should be there on your web site.