Click here to check my latest exciting videos on youtube
Search Mallstuffs

Flag Counter
Spirituality, Knowledge and Entertainment

Locations of visitors to this page

Latest Articles

Move to top
Simple Ajax client server Example
Posted By Sarin on Mar 16, 2012     RSS Feeds     Latest Hinduism news

How AJAX Works, advantages and disadvantages In this article, I will show some basic steps on how to make an ajax request using plain HTML and javascript.
Below screen shows how communication happens through ajax.

Below are the steps to create a simple ajax request using plain html and javascript
  1)    Create an XMLHTTPRequest object. For old browser, we have to use an instance of activexobject
        if (window.XMLHttpRequest) // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        else // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  2)    Create a request using the instance of XMLHTTPRequest object created in step 1."GET", "ajax_info.txt", true);
       xmlhttp.send(); method specifies the request type, URL, call type and authentication information for the request.
Third Boolean parameter specifies whether the call is asynchronous or not.  
If your website requires authentication, specify the login and password as the fourth and fifth parameter to open method. If you don’t provide the login parameters, it will be asked at the runtime when the authentication is requested from the server for your XMLHTTPRequest.
           xmlhttp.send() method makes an HTTP request to the server and receives a response
  3)    Add a function which will be fired whenever the ready state of the request is changed.
    xmlhttp.onreadystatechange = function ()  {
             if (xmlhttp.readyState == 4 && xmlhttp.status == 200)  {
                document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
        If ready state is changed, then check if the ready state is equal to 4 which specifies that all the data has been received by the browser .  Also check if the status is success which is determined by number code 200. If both the conditions are satisfied, then you can carry out the processing of your html or the actions to be taken on the requested data.
Note: You can also add more conditions inside this function for the remaining ready states or status code.
    List of ready states are as follows
Number Description 
0 The object has been created, but not initialized (the open method has not been called). 
1 A request has been opened, but the send method has not been called.  
2 The send method has been called. No data is available yet.  
3 Some data has been received; however, neither responsetext nor responsebody is available.  
4 All the data has been received 
    List of Status Code are as follows
Number Description 
100 Continue 
101 Switching protocols 
200 OK 
201 Created 
202 Accepted 
203 Non-Authoritative Information 
204 No Content 
205 Reset Content 
206 Partial Content 
300 Multiple Choices 
301 Moved Permanently 
302 Found 
303 See Other 
304 Not Modified 
305 Use Proxy 
307 Temporary Redirect 
400 Bad Request 
401 Unauthorized 
402 Payment Required 
403 Forbidden 
404 Not Found 
405 Method Not Allowed 
406 Not Acceptable 
407 Proxy Authentication Required 
408 Request Timeout 
409 Conflict 
410 Gone 
411 Length Required 
412 Precondition Failed 
413 Request Entity Too Large 
414 Request-URI Too Long 
415 Unsupported Media Type 
416 Requested Range Not Suitable 
417 Expectation Failed 
500 Internal Server Error 
501 Not Implemented 
502 Bad Gateway 
503 Service Unavailable 
504 Gateway Timeout 
505 HTTP Version Not Supported 

Share this to your friends. One of your friend is waiting for your share.
Related Articles
Response.Redirect throws _Thread was being aborted_
Call .net service from javascript
Calling silverlight methods from javascript
Jquery features, Advantages and disadvantages
Simple Ajax client server Example
How Silverlight works internally
Playing with HTML using Jquery
Tips and Tricks with ajax accordion control
Manipulating Elements and Animations Using Jquery
How AJAX Works, advantages and disadvantages

Post Comment