AJAX

AJAX = Asynchronous JavaScript and XML.
AJAX is not a new programming language, but a new way to use existing standards.
AJAX is the art of exchanging data with a server, and update parts of a web page – without reloading the whole page.
What is Ajax in depth?
Ajax is a set of technologies, supported by a web browser, including these elements:
  • HTML and CSS for presenting.
  • JavaScript (ECMAScript) for local processing, and DOM (Document Object Model) to access data inside the page or to access elements of XML file read on the server (with the getElementByTagName method for example)…
  • The XMLHttpRequest object is used to read or send data on the server asynchronously.

How does it works?

To get data on the server, XMLHttpRequest provides two methods:
– open: create a connection.
– send: send a request to the server.
Data furnished by the server will be found in the attributes of the XMLHttpRequest object:
– 
responseXml for an XML file or
– 
responseText for a plain text.
Eg.

  

function GetXmlHttpObject()

   {
       var xmlHttp=null;
       try
       {
       // Firefox, Opera 8.0+, Safari
       xmlHttp=new XMLHttpRequest();
       }
       catch (e)
       {
       // Internet Explorer
       try
       {
       xmlHttp=new ActiveXObject(“Msxml2.XMLHTTP”);
       }
       catch (e)
       {
       xmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”);
       }
       }
       return xmlHttp;
   }
   var xmlHttp1;
   function showCD(str)
   {
       var MySessionvalue = “<% = Session[“FileName“] %>”;
       if(MySessionvalue != “”)
       {
           xmlHttp=GetXmlHttpObject();
           if (xmlHttp==null)
            {
            alert (“Browser does not support HTTP Request”);
            return;
            }
           var url=“X2.aspx”;
           url=url+“?q=” + MySessionvalue;
           url=url+“&sid=”+Math.random();
           xmlHttp.onreadystatechange=stateChanged;
           xmlHttp.open(“GET”,url,false);
           xmlHttp.send(null);
       }
   }

  function stateChanged()
   {
        if (xmlHttp.readyState == 4 || xmlHttp.readyState==“complete”)
        {
           var str = xmlHttp.responseText;
           var str1 = str.split(“#”);
           for( var k =0 ;k<str1.length ; k++)
           {
              def_imges[k] = str1[k];
           }
        }
        else
        {
            Wait image
        }
   }
xmlHttp.onreadystatechange
Possible readyState values are:
0 = open has not yet been called
1 = send has not yet been called but open has been called
2 = send has been called but no response from server
3 = data is in the process of being received from the server
4 = response from server has arrived

xmlHttp.open(“GET/Post”,url,false/True);
Mode

Type of request, GET or POST

Get

The purpose of GET is as its name implies – to GET information. It is intended to be used when you are reading information to display on the page. Browsers will cache the result from a GET request and if the same GET request is made again then they will display the cached result rather than rerunning the entire request.
If the call is to retrieve data from the server then use GET.

Post

If your call is going to write any data at all to the server then use POST.
The purpose of POST is post data to server or update server data. The POST method is intended to be used where you are updating information on the server. Such a call is expected to make changes to the data stored on the server and the results returned from two identical POST calls may very well be completely different from one another since the initial values before the second POST call will be different from the initial values before the first call because the first call will have updated at least some of those values. A POST call will therefore always obtain the response from the server rather than keeping a cached copy of the prior response.

url:  the location of the file, with a path.

Boolean :  True (asynchronous) / False (synchronous).

  1. Synchronous/True :-Script stops and waits for the server to send back a reply before continuing. So here we can see that once a request has been made to server then our program wait for response and till the response doesn’t came back no action can be taken.
  2. Asynchronous/False :-script allows the page to continue to be processed and will handle the reply if and when it arrive

xmlHttp.send(null);
Set null for get request
Set element id which you want to post
xmlHttp.responseText :
This returns the response from the server as a string.
xmlHttp.responsXML
This returns the response from the server as an XML document.
Status
This returns the HTTP status code from the server such as 200 for OK or 404 for not found.

Advertisements
This entry was posted in Ajax, jQuery and tagged , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s