Ajax Tutorial

1.What is full form of Ajax?

AJAX = Asynchronous JavaScript and XML.
2.What is synchronous request?
Script stops and waits for the server to send bac a reply before continuin!.
3.What is asynchronous request?
script allows the pa!e to continue to be processed and will handle the reply if and when it arrives
4.What is ajax?
AJAX is the art of exchan!in! data with a server" and update parts of a web pa!e # without
reloadin! the whole pa!e.
5.Define ajax ?
AJAX is about updatin! parts of a web pa!e" without reloadin! the whole pa!e.
6.What ajax does?
AJAX allows web pa!es to be updated asynchronously by exchan!in! s$all a$ounts of data with
the server behind the scenes.
.What is a classic !e" #a$e?
%lassic web pa!es" &which do not use AJAX' $ust reload the entire pa!e if the content should
chan!e.
%.&xam#les of a##lications usin$ ajax?
(oo!le Maps" ($ail" )outube" and *aceboo tabs.
'.(o! ajax !or)s?

1*.+ell a"out Ajax a##lications?
AJAX applications are browser# and platfor$#independent+
11.When ajax $ot #o#ular?
AJAX was $ade popular in ,--. by (oo!le" with (oo!le Su!!est.
12.(o! it !or)s !ith $oo$le search "ox?
/hen you start typin! in (oo!le0s search box" a JavaScript sends the letters off to a server and
the server returns a list of su!!estions.
13.What is the )eystone of ajax?
The eystone of AJAX is the XML1ttp2e3uest object.
14.What is ,-.(tt#/equest 0"ject?
All $odern browsers support the XML1ttp2e3uest object &45. and 456 uses an ActiveX7bject'.
16.What ,-.(tt#/equest o"ject do?
The XML1ttp2e3uest object is used to exchan!e data with a server behind the scenes. This
$eans that it is possible to update parts of a web pa!e" without reloadin! the whole pa!e.
1.What "ro!sers are ha1in$ "uilt2in ,-.(tt#/euqest o"ject?
All $odern browsers &4589" *irefox" %hro$e" Safari" and 7pera' have a built#in XML1ttp2e3uest
object.
1%.&x#lain the syntax for creatin$ ,-.(tt#/equest o"ject?
variable=new XML1ttp2e3uest&':
1'.What is Acti1e, 0"ject?
7ld versions of 4nternet 5xplorer &45. and 456' uses an ActiveX 7bject
2*.&x#lain the syntax of Acti1e, 0"ject?
variable=new ActiveX7bject&;Microsoft.XML1TT<;':
21.3i1e the codin$ of the a"o1e?
var x$lhttp:
if &window.XML1ttp2e3uest'
=>> code for 4589" *irefox" %hro$e" 7pera" Safari
x$lhttp=new XML1ttp2e3uest&':
?
else
=>> code for 456" 45.
x$lhttp=new ActiveX7bject&;Microsoft.XML1TT<;':
?
22.What ,-.(tt#/equest o"ject do?
The XML1ttp2e3uest object is used to exchan!e data with a server.
23.(o! do !e send a request to ser1er?
To send a re3uest to a server" we use the open&' and send&' $ethods of the XML1ttp2e3uest
object
24.4an you $i1e exam#le for the a"o1e?
x$lhttp.open&;(5T;";[email protected];"true':
x$lhttp.send&':
25.What is the syntax for the a"o1e?
open&$ethod"url"async'
Specifies the type of re3uest" the A2L" and if the re3uest should be handled asynchronously or
not.
$ethodB the type of re3uestB (5T or <7ST
urlB the location of the file on the server
asyncB true &asynchronous' or false &synchronous'
send&strin!'
Sends the re3uest off to the server.
strin!B 7nly used for <7ST re3uests
26.&x#lain 3&+ method ?
(5T is si$pler and faster than <7ST" and can be used in $ost cases.
2.&x#lain 506+ method ?
C A cached file is not an option &update a file or database on the server'
C Sendin! a lar!e a$ount of data to the server &<7ST has no siDe li$itations'
C Sendin! user input &which can contain unnown characters'" <7ST is $ore robust and secure
than (5T
2%.What is set/equest(eader78?
To <7ST data lie an 1TML for$" add an 1TT< header with set2e3uest1eader&'. Specify the
data you want to send in the send&' $ethod
2'.&x#lain the a"o1e !ith exam#le?
x$lhttp.open&;<7ST;";[email protected];"true':
x$lhttp.set2e3uest1eader&;%ontent#type;";application>x#www#for$#urlencoded;':
x$lhttp.send&;fna$e=1enryElna$e=*ord;':
3*.&x#lain the syntax of a"o1e?
set2e3uest1eader&header"value'
Adds 1TT< headers to the re3uest.
headerB specifies the header na$e
valueB specifies the header value
31.&x#lain the url in o#en method?
The url para$eter of the open&' $ethod" is an address to a file on a serverB
x$lhttp.open&;(5T;";[email protected];"true':
The file can be any ind of file" lie .txt and .x$l" or server scriptin! files lie .asp and .php &which
can perfor$ actions on the server before sendin! the response bac'.
32.Why to )ee# true in the o#en method?
XML1ttp2e3uest object to behave as AJAX" the async para$eter of the open&' $ethod has to be
set to true
x$lhttp.open&;(5T;";[email protected];"true':
33.&x#lain false in o#en method?
/hen you use async=false" do F7T write an onreadystatechan!e function # just put the code
after the send&' state$entB
x$lhttp.open&;(5T;";[email protected];"false':
x$lhttp.send&':
docu$ent.!et5le$entGy4d&;$yHiv;'.inner1TML=x$lhttp.responseText:
34.&x#lain the ser1er res#onse in Ajax?
To !et the response fro$ a server" use the responseText or responseXML property of the
XML1ttp2e3uest object.
35.&x#lain the #arameters of res#onse of Ajax?
responseText !et the response data as a strin!
responseXML !et the response data as XML data
36.&x#lain the res#onse+ext #ro#erty?
4f the response fro$ the server is not XML" use the responseText property.
3.(o! the res#onse+ext returns the res#onse?
The responseText property returns the response as a strin!" and you can use it accordin!ly.
docu$ent.!et5le$entGy4d&;$yHiv;'.inner1TML=x$lhttp.responseText:
3%.&x#lain res#onse,-. #ro#erty?
4f the response fro$ the server is XML" and you want to parse it as an XML object" use the
responseXML property
3'.(o! you code for an ,-. res#onse?
x$lHoc=x$lhttp.responseXML:
txt=;;:
x=x$lHoc.!et5le$entsGyTa!Fa$e&;A2T4ST;':
for &i=-:i
=
txt=txt 9 xIiJ.childFodesI-J.nodeKalue 9 ;
;:
?
docu$ent.!et5le$entGy4d&;$yHiv;'.inner1TML=txt:
4*.What is onreadystatechan$e e1ent?
/hen a re3uest to a server is sent" we want to perfor$ so$e actions based on the response.
The onreadystatechan!e event is tri!!ered every ti$e the readyState chan!es.
41.What is readystate #ro#erty?
The readyState property holds the status of the XML1ttp2e3uest.
42.What are the im#ortant #ro#erties of ,-.(tt#/equest o"ject?
onreadystatechan!e"readyState"status
43.Descri"e onreadystatechan$e #ro#erty?
Stores a function &or the na$e of a function' to be called auto$atically each ti$e the readyState
property chan!es.
44.Descri"e ready6tate #ro#erty?
1olds the status of the XML1ttp2e3uest. %han!es fro$ - to LB
-B re3uest not initialiDed
MB server connection established
,B re3uest received
NB processin! re3uest
LB re3uest finished and response is ready
45.Descri"e status #ro#erty?
,--B ;7O;
L-LB <a!e not found
46.&x#lain onreadystatechan$e e1ent more clearly?
4n the onreadystatechan!e event" we specify what will happen when the server response is ready
to be processed.
4.When res#onse is ready?
/hen readyState is L and status is ,--" the response is ready.
4%.&x#lain the a"o1e !ith an exam#le?
x$lhttp.onreadystatechan!e=function&'
=
if &x$lhttp.readyState==L EE x$lhttp.status==,--'
=
docu$ent.!et5le$entGy4d&;$yHiv;'.inner1TML=x$lhttp.responseText:
?
?
The onreadystatechan!e event is tri!!ered four ti$es" one ti$e for each chan!e in readyState.
4'.(o! to use call"ac) function?
A callbac function is a function passed as a para$eter to another function.
5*.&xl#ain more clearly a"out this?
4f you have $ore than one AJAX tas on your website" you should create 7F5 standard function
for creatin! the XML1ttp2e3uest object" and call this for each AJAX tas.
The function call should contain the A2L and what to do on onreadystatechan!e &which is
probably different for each call'B
51.&x#lain the a"o1e !ith a code?
function $y*unction&'
=
loadXMLHoc&;[email protected];"function&'
=
if &x$lhttp.readyState==L EE x$lhttp.status==,--'
=
docu$ent.!et5le$entGy4d&;$yHiv;'.inner1TML=x$lhttp.responseText:
?
?':
?
52.3i1e a com#lete ajax &xam#le?
ht$l
head
script type=;text>javascript;
function loadXMLHoc&'
=
var x$lhttp:
if &window.XML1ttp2e3uest'
=>> code for 4589" *irefox" %hro$e" 7pera" Safari
x$lhttp=new XML1ttp2e3uest&':
?
else
=>> code for 456" 45.
x$lhttp=new ActiveX7bject&;Microsoft.XML1TT<;':
?
x$lhttp.onreadystatechan!e=function&'
=
if &x$lhttp.readyState==L EE x$lhttp.status==,--'
=
docu$ent.!et5le$entGy4d&;$yHiv;'.inner1TML=x$lhttp.responseText:
?
?
x$lhttp.open&;(5T;";[email protected];"true':
x$lhttp.send&':
?
script
head
body
div id=;$yHiv; h, Let AJAX chan!e this text h, div
button type=;button; onclic=;loadXMLHoc&'; %han!e %ontent button
body
ht$l
0ut#ut9