------------
1. What is Ajax ?
Answer: Ajax Stands for Asynchronous JavaScript And XML. It’s a way to make web application like windows application, give use rich Interface.
2. How it Works ?
By working as a extra layer between user browser and server it handle server communication in background submit server request take response from server, the response data integrated in page seamlessly without post back of page. This layer often refers as AJAX engine or AJAx framework.
When ever you click on link or submit form by pressing button then you make a http request. So the page is post back.
XMLHttpRequest is object that can be handle with JavaScript and we can achive goal to take http request without postback.
When we using AJAX layer then we do asynchronous post back which means request to server made in background
The flow is as follows
Web page Request --> Make xml Http Request object -->
Send rquest to server -->
Monitor the request Status -->
Ready state Status -->
respond to client -->
get response-->
Process Return data
For any AJAX work you need to create a object of XMLHttpRequest for many browser you can create objects as follows
var request = new XMLHTTPRequest();
To achive same result in microsoft browser you have to do following thing
var request = new ActiveXObject("Microsoft.XMLHTTP");
But some different version use below definition
Var request = new ActiveXObject("Msxml2.XMLHTTP");
Or you can write as below
< script language ="JavaScript" type="text/script"
>
var request ;
function defineRequest(){
try {
request = new XMLHTTPRequest();
}
catch ( ex) {
try{
request = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (ex1){
try{
request = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(ex2){
}
}
}
}
XMLHttpRequest object will have following property :
1) onreadystatechange :- Determine which event handler will called when object ready state property changed
2) readyState :- there are following values for this
0 - un initialize
1 - loading
2 - loaded
3 - intractive
4 - completed
3)responseText :- Data return by Server in text format
4) responseXML :- Data return by server in XML format
5) status : - Http Status code
6) statusText :- Http Status Text
And it has following methods
Abort() :- Stop the current Request.
getAllResponseHeaders() :- Return all headers as string
getResponseHeader(x) :- get the x header value in string
Open('Method',url, a) :- specify the Method post /get
url for request
a= true/false determine whether the request handle asynchronously or not.
Send(content) : send a request ( default post data method)
3. Basic Example
As part of AJAX basic I just come with below example in this we create two page one is with server coding & another with client coding.
My main aim here to get result by ajax with out post back so we just try to get current time as result.
For this we write code in default.aspx page as below
<
script language ="javascript" type="text/javascript"
>
var myServerRequest;
function callAjax() {
try {
myServerRequest = new XMLHttpRequest();
myServerRequest.status
}
catch (ex) {
try {
myServerRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (ax) {
try {
myServerRequest = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (ax1) {
return false;
}
}
}
}
function Callserver() {
callAjax();
if (myServerRequest != null) {
myServerRequest.open('GET', "serverCode.aspx", true);
myServerRequest.onreadystatechange = myServerResponse;
myServerRequest.send();
}
return false;
}
function myServerResponse() {
if (myServerRequest.readyState == 4) {
if (myServerRequest.status == 200) {
document.getElementById('dvResult').innerHTML = myServerRequest.responseText;
} else {
document.getElementById('dvResult').innerHTML = 'Oops Error';
}
}
return false;
}
script
>
Here we have 3 main function
1. CallAjax :- it is responsible for Assigning XMLHttpRequest Object.
2. myserverResponse :- by the name it is clear that it use for holding the result what ever pass by server.
3. callServer :- This function is call on any event on button and it sum up the above 2 events.
On server Page at page load we do following code
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Response.Write(Now.ToString)
Response.End()
End Sub
Here we just write time as response then we end response.
If you do not do response.end() then html of server page also comes.
5. What is JASON ?
Ans: JASON is JavaScript Object Notation. It’s a light weight Data interchange format which is independent from language. Its easy to read & Write by human & easy to parse & genrate by language. The attributes is seprated with "," (comma) and value of attributes are define after colon symbol(":") .
Ex:- {Data:[{"fname" : "RAJAT", "Lname" : "JAISWAL" }]}
The above is JASON example in which there are two attributes fname, Lname and the are seprated by "," (comma) symbol.
And there value is "RAJAT" & JAISWAL" which are define after ":" (colon)symbol.
for more information just copy paste "http://indiandotnet.wordpress.com/category/aspnet/ajax/"
Thanks
Rajat Jaiswal
