Misra’s blog

AJAX

Posted by mtwinkle on April 12, 2007

AJAX: Asynchronous Javascript and XML
Difference between Javascript and AJAX:
1a. Javascript had no way of sending information between the web browser and the web server.
Typical scenario –> Create a HTML form with some input fields and submit button. User enters the info and clicks submit. The information is sent to the server using ‘GET’ or ‘POST’, server responds, and then the results are displayed in the new page.

1b. In AJAX- Javascript communicate directly with the server, using a special Javascript object XMLHttpRequest.
No need of submit button to send the data to the server. Also, the whole page need not be refreshed and the result can be displayed on the same page itself.

The XMLHttpRequest object has a special property called onreadystatechange. onreadystatechange stores the function that will process the response from the server.
Every time the “ready state” changes this function will be executed.

What is this “ready state”?
The XMLHttpRequest object has another property called readyState. This is where the status of our server’s response is stored. The response can be processing, downloading or completed. Each time the readyState changes then our onreadystatechange function executes.
readyState is 4 that means the response is complete.

The property that stores the server’s response, responseText.

Quick Tip:
If you want to update a non form element, be sure to use the innerHTML attribute that is associated with all HTML elements. In our case we are updating a div every time a query is sent off. Also, remember that you can easily access an HTML element by giving it an id and using Javascript’s document.getElementById function.

Technologies used by AJAX:
1. Javascript-
2. DOM – for accessing and manipulating the structure of the HTML of the page
3. XML – represents the data passed between the server and client.
4. XMLHttpRequest – object for asynchronously exchanging the XML data between the client and the server.

Should I use an HTTP GET or POST for my AJAX calls?

AJAX requests should use an HTTP GET request when retrieving data where the data will not change for a given request URL. An HTTP POST should be used when state is updated on the server.

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

 
%d bloggers like this: