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…

 

JQuery a unique thing part- I

Dear all,

from today onward’s i am giving some breif introduction of JQuery how it use, how to work with it. and after the whole session i will provide you best example of whole then Jquery stuff.

so starting from point to point

 

1. What is Jquery ?
Answer: Jquery is JavaScript Library whose main moto is to simplifiy the use of java script for a html document.
It is a light weight JavaScript Library that emphasis intraction between JavaScript & Html.
It simplify  traversing ,event handling , animation and  ajax.

2. How it Works ?
Answer: To Work with Jquery you have to copy the Jquery Js file in your project.
And refrence in your  page like  <script type=”text/javascript” src=”jquery.js”></script>
And you can use it. Second  point is that  you have to start Jquery in  $(document).ready event
And all the event will comes under this ready event.

3. Necessary component to work with Asp.net + Jquery?

Answer: For Jquery in Asp.net you need to have to copy two files in your Project and refrence in your project jquery-1.2.6-vsdoc.js & Jquery1.2.6.js

4. Traversing

Ans:

1) you can find particular element in below type

$(“#elementId) — Suppose there a div box with id dvTest <div id=”dvTest”> then we have to use $(“#dvTest”)

$(“element”), — Suppose there div box in page then if we want to change all the div box background color then we can find all the div with $(“div”)

$(“element”).eq(index) — Now if we want to change the background of of first div only then $(“div”).eq(1) here eq(1) change the background color of index 1 div

$(“element”).find() — Search all the element that match with particular expression like $(“div”).find(“p”) here we find all the p which are in div tag

$(“element”).contnent()- it work same as find

$(“element”).next() – will find next sibling after element.

$(“element”).nextAll() – wiil find all next sibling after element but not there child element.

$(“element”).length() – determine number of element in document
$(“element”).parent.get(0)- will return the parent of element….

$(“element”).prev ;- get the privious sibling of each of element…

 

you can download Jquery files from www.JQuery.com its free.

and  you will find tutorial also over there.

i will back soon with my second part of JQuery.

Thanks