C H A P T E R 2
Foundations of Ajax Chapter 2 1 32
var xmlhttp; function createxmlhttprequest() { if(window.activexobject) { xmlhttp = new ActiveXObject( Micr else if(window.xmlhttprequest) { xmlhttp = new XMLHttpRequest();
var xmlhttp; function createxmlhttprequest() { if(window.activexobject) { xmlhttp = new ActiveXObject( Microsoft.XMLHTTP ); else if(window.xmlhttprequest) { xmlhttp = new XMLHttpRequest(); 33
Foundations of Ajax Chapter 2 2 34
35
Foundations of Ajax Chapter 2 3 36
<input type= text d= email name= email var xmlhttp; function validateemail() { var email = document.getelementbyi var url = validate?email= + esca if(window.activexobject) { xmlhttp = new ActiveXObject( Mi else if(window.xmlhttprequest) { xmlhttp = new XMLHttpRequest() xmlhttp.open( GET, url); xmlhttp.onreadystatechange = callback; x m l H t t p. s e n d ( n u l l ) ;
<input type= text d= email name= email onblur= validateemail() ;> var xmlhttp; function validateemail() { var email = document.getelementbyid( email ); var url = validate?email= + escape(email.value); if(window.activexobject) { xmlhttp = new ActiveXObject( Microsoft.XMLHTTP ); else if(window.xmlhttprequest) { xmlhttp = new XMLHttpRequest(); xmlhttp.open( GET, url); xmlhttp.onreadystatechange = callback; x m l H t t p. s e n d ( n u l l ) ; 37
Foundations of Ajax Chapter 2 response.setheader( Cache-Control, no-cache ); response.setheader( Pragma, no-cache ); function callback() { if(xmlhttp.readystate == 4) { if(xmlhttp.status == 200) { //do something interesting here 4 38
, no-cache ); a c h e ) ; { ting here 5 xmlhttp.setrequestheader( Content-Type, appl
xmlhttp.setrequestheader( Content-Type, application/x-www-form-urlencoded ); 39
Foundations of Ajax Chapter 2 40
< h t m l > < h e a d > <title>example of remote scripting in an < / h e a d > <script type= text/javascript > function handleresponse() { alert( this function is called from s < / s c r i p t > < b o d y > <h1>remote Scripting with an IFRAME</h1 <iframe id= beforexhr n a m e = b e f o r e x h r style= width:0px; height:0px; border:0 s r c = b l a n k. h t m l > < / i f r a m e > <a href= server.html target= beforexhr < / b o d y > < / h t m l > < h t m l > < h e a d > <title>the server</title> < / h e a d > <script type= text/javascript > window.parent.handleresponse( ); < / s c r i p t > < b o d y > < / b o d y > < / h t m l >
< h t m l > < h e a d > <title>example of remote scripting in an IFRAME</title> < / h e a d > <script type= text/javascript > function handleresponse() { alert( this function is called from server.html ); < / s c r i p t > < b o d y > <h1>remote Scripting with an IFRAME</h1> <iframe id= beforexhr n a m e = b e f o r e x h r style= width:0px; height:0px; border:0px s r c = b l a n k. h t m l > < / i f r a m e > <a href= server.html target= beforexhr >call the server</a> < / b o d y > < / h t m l > < h t m l > < h e a d > <title>the server</title> < / h e a d > <script type= text/javascript > window.parent.handleresponse( ); < / s c r i p t > < b o d y > < / b o d y > < / h t m l > 41
42 Chapter 2 Foundations of Ajax 6
43
Foundations of Ajax Chapter 2 <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN h t t p : / / w w w. w 3. o r g / T R / x h t m l 1 / D T D / x h t m l 1 - s t r i c t. d t d > <html xmlns= http://www.w3.org/1999/xhtml > < h e a d > <title>simple XMLHttpRequest</title> <script type= text/javascript > var xmlhttp; function createxmlhttprequest() { if(window.activexobject) { xmlhttp = new ActiveXObject( Microsoft.XMLHTTP ); else if(window.xmlhttprequest) { xmlhttp = new XMLHttpRequest(); function startrequest() { c r e a t e X M L H t t p R e q u e s t ( ) ; xmlhttp.onreadystatechange = handlestatechange; xmlhttp.open( GET, simpleresponse.xml, true); x m l H t t p. s e n d ( n u l l ) ; 44
TML 1.0 Strict//EN t m l 1 - s t r i c t. d t d > h t m l > function handlestatechange() { if(xmlhttp.readystate == 4) { if(xmlhttp.status == 200) { alert( The server replied with < / s c r i p t > < / h e a d > < b o d y > <form action= # > <input type= button value= Start Bas o n c l i c k = s t a r t R e q u e s t ( ) ; / > < / f o r m > < / b o d y > < / h t m l > M i c r o s o f t. X M L H T T P ) ; ) ; l e S t a t e C h a n g e ; se.xml, true);
function handlestatechange() { if(xmlhttp.readystate == 4) { if(xmlhttp.status == 200) { alert( The server replied with: + xmlhttp.responsetext); < / s c r i p t > < / h e a d > < b o d y > <form action= # > <input type= button value= Start Basic Asynchronous Request o n c l i c k = s t a r t R e q u e s t ( ) ; / > < / f o r m > < / b o d y > < / h t m l > 45
Foundations of Ajax Chapter 2 46
7
47
Foundations of Ajax Chapter 2 8 48
9 < t a b l e > < t b o d y > < t r > < t d > F o o < / t d > < t d > B a r < / t d > < / t r > < / t b o d y > < / t a b l e >
< t a b l e > < t b o d y > < t r > < t d > F o o < / t d > < t d > B a r < / t d > < / t r > < / t b o d y > < / t a b l e > 49
Foundations of Ajax Chapter 2 50