Search Mallstuffs

Flag Counter
Spirituality, Knowledge and Entertainment




Latest Articles


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

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.
    
    xmlhttp.open("GET", "ajax_info.txt", true);
       xmlhttp.send();
  
    xmlhttp.open 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 
    
here

Share this to your friends. One of your friend is waiting for your share.

Related Articles
Simple Ajax client server Example
Tips and tricks with ajax calendar
What is Silverlight,its features and how it works
Call .net service from javascript
Manipulating Elements and Animations Using Jquery
Tips and Tricks with ajax accordion control
Silverlight New features & system requirement
Playing with HTML using Jquery
Get Set Value of any HTML element using jquery-Val function
JQuery FAQ and Jquery Effects

Post Comment




Software developer by profession,
Poet by hobby,
Blogger by Passion
Birth Place: Munger, Bihar
Residence: Mumbai, Maharashtra
Prof exp: 8 years

Read More about me

Read my daily what'sapp quotes
Most Viewed Articles

Latest Spiritual Videos


Latest Funny Videos

Latest News

Latest Social Post
Latest WhatsApp Quotes