HEYGB.COM

In the series of beginner’s Ajax tutorial, today I’m going to aim Raw Developers. Althouth any beginner can learn Ajax from this tutorial but why I said aim to Raw Developers because in this tutorial we will learn and understand the raw base behind the Ajax, what are the raw functions of Ajax which works behind any Ajax toolkit and I’ll try my best to make you understand the concept of it.

Now the first question arises in the mind of every beginner Ajax learner is: What is Ajax ?

What is Ajax ?

Ajax stands for Asynchronous JavaScript and XML. In a nutshell, it is the use of the nonstandard XMLHttpRequest object to communicate with server-side scripts. It can send as well as receive information in a variety of formats, including XML, HTML, and even text files. Ajax’s most appealing characteristic, however, is its asynchronous nature, which means it can do all of this without having to refresh the page. This allows you to update portions of a page based upon user events.

The two features in question are that you can:

* Make requests to the server without reloading the page
* Parse and work with XML documents

 
How to Create an HTTP Request

In order to make an HTTP request to the server using JavaScript, you need an instance of a class that provides this functionality. Such a class was originally introduced in Internet Explorer as an ActiveX object, called XMLHTTP. Then Mozilla, Safari and other browsers followed, implementing an XMLHttpRequest class that supports the methods and properties of Microsoft’s original ActiveX object.

As a result, in order to create a cross-browser instance (object) of the required class, you can do:

1
2
3
4
5
6
7
8
9
10
11

  var httpRequest;
 
  if (window.XMLHttpRequest) { // Mozilla, Safari, ...
 
      httpRequest = new XMLHttpRequest();
 
  } else if (window.ActiveXObject) { // IE
 
      httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
 
  }

Some versions of some Mozilla browsers won’t work properly if the response from the server doesn’t have an XML mime-type header. To satisfy this, you can use an extra method call to override the header sent by the server, just in case it’s not text/xml.

1
2
3

  httpRequest = new XMLHttpRequest();
 
  httpRequest.overrideMimeType('text/xml');

Next, you need to decide what you want to do after you receive the server response to your request. At this stage, you just need to tell the HTTP request object which JavaScript function will do the work of processing the response. This is done by setting the onreadystatechange property of the object to the name of the JavaScript function you plan to use, like this:

1

  httpRequest.onreadystatechange = nameOfTheFunction;

Note that there are no brackets after the function name and no parameters passed, because you’re simply assigning a reference to the function, rather than actually calling it. Also, instead of giving a function name, you can use the JavaScript technique of defining functions on the fly (called “anonymous function”) and define the actions that will process the response right away, like this:

1
2
3

  httpRequest.onreadystatechange = function(){
      // do the thing
  };

Next, after you’ve declared what will happen as soon as you receive the response, you need to actually make the request. You need to call the open() and send() methods of the HTTP request class, like this:

1
2
3

  httpRequest.open('GET', 'http://www.example.org/some.file', true);
 
  httpRequest.send(null);

* The first parameter of the call to open() is the HTTP request method – GET, POST, HEAD or any other method you want to use and that is supported by your server. Keep the method capitalized as per the HTTP standard; otherwise some browsers (like Firefox) might not process the request.

* The second parameter is the URL of the page you’re requesting. As a security feature, you cannot call pages on 3rd-party domains. Be sure to use the exact domain name on all of your pages or you will get a ‘permission denied’ error when you call open(). A common pitfall is accessing your site by domain.tld, but attempting to call pages with www.domain.tld.

* The third parameter sets whether the request is asynchronous. If TRUE, the execution of the JavaScript function will continue while the response of the server has not yet arrived. This is the A in AJAX.

The parameter to the send() method can be any data you want to send to the server if POST-ing the request. The data should be in the form of a query string, like:

1

  name=value&anothername=othervalue&so=on

Note: If you want to POST data, you have to change the MIME type of the request using the following line:

1

  httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

Otherwise, the server will discard the Posted data.