Simple Ajax client server Example
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
Note: Images used on this website
are either a production of Bhaktivedanta Book Trust(https://www.krishna.com), Iskcon
Foundation or were found in google search under "Free to use and share". If any
of the images presented here violates copyright issues or infringes anyone copyright
or are not under "Fair use", then please bring it to our notice. Read
Disclaimer for more.
Share this to your friends. One of your friend is
waiting for your share.
Related Articles
Playing with HTML using Jquery
Simple Ajax client server Example
What is Silverlight,its features and how it works
Tips and Tricks with ajax accordion control
How Silverlight works internally
Get Data of other page on current page
How AJAX Works, advantages and disadvantages
Silverlight New features & system requirement
Working with wrap panel in silverlight
Creating your first application in JQuery
Post Comment