AJAX Basic Part -I

Dear all ,

Today i am starting basic of AJAX . so please bear with me if you find any thing missing let me know as far as my concern i will cover basic information which is require a programmer to know and how it will work.

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)

Thanks

Rajat

Rest will be in part 2  enjoy coding…

 

Advertisements

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