C H A P T E R 2

Size: px

Start display at page:

Download "C H A P T E R 2"

재혁 조
4 years ago
Views:

1 C H A P T E R 2

2 Foundations of Ajax Chapter

3 var xmlhttp; function createxmlhttprequest() { if(window.activexobject) { xmlhttp = new ActiveXObject( Micr else if(window.xmlhttprequest) { xmlhttp = new XMLHttpRequest();

4 var xmlhttp; function createxmlhttprequest() { if(window.activexobject) { xmlhttp = new ActiveXObject( Microsoft.XMLHTTP ); else if(window.xmlhttprequest) { xmlhttp = new XMLHttpRequest(); 33

5 Foundations of Ajax Chapter

7 35

8 Foundations of Ajax Chapter

9 <input type= text d= name= var xmlhttp; function validate () { var = document.getelementbyi var url = validate? = + 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 ) ;

10 <input type= text d= name= onblur= validate () ;> var xmlhttp; function validate () { var = document.getelementbyid( ); var url = validate? = + escape( .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

11 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

12 , no-cache ); a c h e ) ; { ting here 5 xmlhttp.setrequestheader( Content-Type, appl

13 xmlhttp.setrequestheader( Content-Type, application/x-www-form-urlencoded ); 39

14 Foundations of Ajax Chapter 2 40

15 < 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 >

16 < 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

17 42 Chapter 2 Foundations of Ajax 6

19 43

20 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= > < 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

21 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);

22 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

23 Foundations of Ajax Chapter 2 46

24 7

25 47

26 Foundations of Ajax Chapter

27 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 >

28 < 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

29 Foundations of Ajax Chapter 2 50

PowerPoint Template

PowerPoint Template JavaScript 회원정보 입력양식만들기 HTML & JavaScript Contents 1. Form 객체 2. 일반적인입력양식 3. 선택입력양식 4. 회원정보입력양식만들기 2 Form 객체 Form 객체 입력양식의틀이되는 태그에접근할수있도록지원 Document 객체의하위에위치 속성들은모두 태그의속성들의정보에관련된것