Microsoft PowerPoint - Ajax

Size: px

Start display at page:

Download "Microsoft PowerPoint - Ajax"

슬옹 구
5 years ago
Views:

1 박태정 1

2 Ajax(Asynchronous JavaScript) JavaScript 에의한비동기적인통신으로 XML 기반의데이터를클라이언트인웹브라우저와서버사이에서교환 페이지의이동없이웹브라우저화면을동적변경 Ajax 장점 서버측의부담중일부를웹클라이언트에게넘겨주게되어서버어플리케이션성능향상 웹브라우저는요청을송신하면응답을기다리지않는다 서버는필요한데이터만을응답한다 박태정 2

3 Ajax(Asynchronous JavaScript) Ajax 구성기술요소 Javascript 사용자이벤트가발생히면 XMLHttpRequest 객체를사용해서웹서버에요청을전달 XMLHttpRequest 객체로부터응답이오면 DOM, CSS 등을사용해서화면을조작 DOM 문서의구조 폼등의정보나화면구성을조작할때사용 CSS 글자색, 배경색, 위치, 투명도등 UI 와관련된부분을담당 XMLHttpRequest 웹서버와통신 사용자의요청을웹서버에전송하고, 웹서버로부터받은결과를웹브라우저에전달 박태정 3

4 XMLHttpRequest 지원브라우저 MS IE 4.0 이후 Firefox 1.0 이후 Opera 7.6 이후 Safari 1.2 이후 Netscape 7 이후 Konqueror 3 이후 박태정 [akasha.park@gmail.com] 4

5 Ajax - 사용자요청처리과정 사용자가이벤트 ( 마우스클릭등 ) 를발생 자바스크립트는 DOM 을사용해서필요한정보를구함 XMLHttpRequest 객체를통해서웹서버에요청을전달 웹서버는 XMLHttpRequest 로부터의요청을알맞게처리 웹서버는결과를 XML 이나단순텍스트로생성해서 XMLHttpRequest 에전송 클라이언트브라우저로서버로부터의응답이도착하면 XMLHttpRequest 객체는자바스크립트에도착사실을알림 자바스크립트는응답데이터와 DOM 을조작해서사용자화면에반영 박태정 [akasha.park@gmail.com] 5

6 XMLHttpRequest(XHR) 객체 Ajax 에서서버와클라이언트간에통신을담당 W3C 의표준이아님 ( 모든웹브라우저가 XHR 객체를지원하는것은아님 ) 서버와클라이언트간에요청과응답을처리하기위해서필요한객체 웹브라우저가 IE5.0/6.0 인경우에는 ActiveX 객체를사용해서생성 var httprequest = new ActiveXObject( Microsoft.XMLHTTP ); 웹브라우저가 IE7.0, 파이어폭스, 사파리, 오페라등의경우에는자바스크립트의내장객체를사용해서생성 var httprequest = new XMLHttpRequest(); 박태정 [akasha.park@gmail.com] 6

7 XMLHttpRequest(XHR) 객체 //getxmlhttprequest() 함수로생성한객체를저장하기위해선언한전역변수 var httprequest = null; function getxmlhttprequest(){ } if(window.activexobject){ //IE 에서 XMLHttpRequest 객체구하기 try{ return new ActiveXObject("Msxml2.XMLHTTP"); }catch(e){ try{ } return new ActiveXObject("Microsoft.XMLHTTP"); }catch(e1){ } return null; }else if (window.xmlhttprequest) { //IE 이외의 Firefox, Opera 와같은브라우저에서 XMLHttpRequest 객체구하기 }else { } return new XMLHttpRequest(); return null; 박태정 [akasha.park@gmail.com] 7

8 XMLHttpRequest(XHR) 메소드 abort() 메소드명 설명 현재의요청을취소 ( 중단 ) 한다. getallresponseheaders() getresponseheader(headerrname) open(method, url, async) send(content) setrequestheader(header, value) HTTP 요청에대한모든응답헤더드을키와값의쌍으로리턴한다. 매개변수로주어진 HTTP 헤더의값을리턴한다. 사용자의요청을설정하는메소드 요청을서버로보낸다. 헤더의값을설정하는것으로, 헤더명이 header 인값을 value 로설정한다. 참고 박태정 [akasha.park@gmail.com] 8

9 XMLHttpRequest(XHR) 프로퍼티 프로퍼티명 onreadystatechange readystate responsetext responsexml responsebody satus 요청객체의상태를리턴한다. 설명 상태의변경이발생했을때, 이벤트를처리하기위한이벤트핸들러를기술한다. 문자열로이루어진서버의응답을받는다. XML 로이루어진서버의응답을받는다. 이진코드문자열로서버의응답을받는다.ActiveX 컴포넌트를사용해서생성한 XMLHttpRequest 객체에서만사용된다. 서버로부터응답받는 HTTP 상태코드로, 숫자로리턴된다. statustext 서버로부터 HTTP 상태를문자열로리턴받는다. 참고 박태정 9

10 웹서버에요청전송하기 open(method, url, async) 요청의초기화 GET/POST 선택 접속할 URL 입력 동기 / 비동기방식지정 send() 웹서버에요청전송 크로스브라우저를지원하기위해서는항상비동기방식사용권장 ( 세번째인자 true) XMLHttpRequest 객체가웹서버에전송하는요청파라미터의경우에는반드시 UTF-8 로인코딩해서전송 박태정 [akasha.park@gmail.com] 10

11 웹서버에요청전송하기 GET 방식전달 httprequest = getxmlhttprequest(); httprequest.open( GET, /test.jsp?id=guest&pwd=1234, true); httprequest.send(null); httprequest = getxmlhttprequest(); httprequest.open( GET, /test.jsp, true); httprequest.send(null); POST 방식전달 httprequest = getxmlhttprequest(); httprequest.open( POST, /test.jsp, true); httprequest.send( id=guest&pwd=1234 ); 박태정 [akasha.park@gmail.com] 11

12 서버응답처리하기 onreadystatechange 웹서버로부터응답이도착할때호출될함수를지정 콜백 (callback) 함수 화면을변경하거나경고창을띄우는등응답결과에따라알맞은작업을수행 콜백함수는 readystate 라는프로퍼티의값이변경될때마다호출 박태정 12

13 XMLHttpRequest 객체상태 readystate 값 의미 Uninitialized Loading Loaded Interactive Completed 설 객체만생성되고아직초기화되지않은상태 (open) 메서드가호출되지않음 ) open 메서드가호출되고아직 send 메서드가불리지않은상태 send 메서드가불렸지만 status 와헤더는도착하지않은상태 데이터의일부를받은상태 데이터를전부받은상태, 완전한데이터의이용가능 명 readystate 의값이 2 와 3 인경우는웹브라우저에따라서다르게처리되므로 1 과 4 를사용하는것이크로스브라우저를지원할수있는가장알맞은방법이다. 박태정 [akasha.park@gmail.com] 13

14 XMLHttpRequest 객체상태 readystate unction callbackfunction(){ if ( httprequest.readystate == 4 ) { // 서버에서완전한응답이도착한경우 } } unction callbackfunction(){ if ( httprequest.readystate == 1 httprequest.readystate == 2 httprequest.readystate == 3 ) { } // 화면에서버에서작업중이라는메시지출력 } else if ( httprequest.readystate == 4 ) { } // 서버에서완전한응답이도착한경우 // 응답결과에따라알맞은작업처리 박태정 [akasha.park@gmail.com] 14

15 서버응답상태 status/statustext 값 텍스트 설 명 OK forbidden Not Found Internal Server Error 요청성공접근거부페이지없음서버오류발생 function callbackfunction(){ if ( httprequest.readystate == 4 ) { if( httprequest.status == 200 ) { // 서버에서완전한응답이도착한경우 }else{ alert(" 문제발생 :"+httprequest.status); } } } 박태정 [akasha.park@gmail.com] 15

16 서버로부터의응답상태 statustext Status 프로퍼티의값을설명하는텍스트문장을저장한다. 웹서버는단순텍스트파일의경우응답 character set 을변경할수없다 단순텍스트파일의응답 character set 은 XMLHttpRequest 는기본캐릭터셋인 UTF-8 을사용해서데이터를읽어온다. JSP 는응답 character set 을 UTF-8 로지정하고, pageencoding 속성을사용해서소스코드의 character set 은 EUC-KR 로지정함으로써, 작업은 EUC-KR 로하면서결과는 UTF-8 로생성할수있게된다. Opera8.5 버전까지는 statustext 프로퍼티를제공하고있지않으므로, 크로스브라우저를실현하기위해서는 statustext 는가급적사용하지않는것이좋다 박태정 16

17 파라미터한글처리방법 XMLHttpRequest 객체가웹서버에전송하는요청파라미터의경우에는반드시 UTF-8 로인코딩해서전송해야한다. 자바스크립트는문자열 UTF-8 로인코딩해주는함수인 codeuricomponent() 함수를제공하고있다 Var params name= +encodeuricomponent( 대한민국 ); XMLHttpRequest.open( GET, /hello.jsp +params, true); 박태정 17

18 웹서버응답결과처리 웹서버의응답텍스트의값이 HTML 인경우 응답텍스트를 innerhtml 을사용하여그대로화면에반영 웹서버의응답텍스트가임의의포맷인경우 자바스크립트는응답텍스트를분석해서 HTML 코드를생성한뒤 innerhtml 을사용해서화면에반영 Document.documentElement 는 DOM API 로서문서의루트노드를나타낸다. Document.documentElement.innerHTML 은전체 HTML 문서의코드를나타낸다. 박태정 18

19 박태정 19

20 DOM(Document Object Model) 문서를객체로표현하기위한표준 HTML이나 XML 등의문서를객체로표현할때사용되는 API 플랫폼 / 언어독립적 구조화된문서를표현하는 W3C 표준모델 동적으로문서의내용, 구조, 스타일에접근하고변경하는수단 박태정 [akasha.park@gmail.com] (akasha.park@gmail.com) 20

21 DOM 표준안 Level 0 : DOM 이만들어지기이전의모든벤더종속적인 DOM 을포함, 표준화과정이전에있었던단계에대한표현 Level 1 : DOM 문서에대한탐색과조정에대한최초의표준명세 Level 2 : XML 네임스페이스 (Namespace) 지원, 필터링된뷰 (view) 와이벤트 Level 3 : 6 가지명세로구성 Core Load and Save Xpath Views and Formatting Requirements Validation 박태정 [akasha.park@gmail.com] (akasha.park@gmail.com) 21

22 DOM API 인터페이스 Document 전체문서를나타낸다 Element Text 각태그를나타낸다 문자열데이터가 Text 노드로표현된다. CDataSection XML 문서의 CDATA 영역의문자열값을저장한다. Node 인터페이스 Element, Document, Text 등주요인터페이스가상속받는부모인터페이스 박태정 22

23 Node 인터페이스의주요프로퍼티 프로퍼티타입프로퍼티이름의미 String nodename 노드의이름 String nodevalue 노드의값 unsigned short nodetype 노드타입 Node parentnode 부모노드 NodeList childnodes 자식노드목록 Node firstchild 첫번째자식노드 Node lastchild 마지막자식노드 Node previoussibling 현재노드와같은부모노드를갖는자식 노드중현재노드이전의자식노드 Node nextsibling 현재노드와같은부모노드를갖는자식 노드중현재노드의다음자식노드 Document ownerdocument 이노드가포함된 Document 객체 박태정 23

24 Node 인터페이스의주요프로퍼티 박태정 24

25 NodeList 자식노드목록이저장 length NodeList 에저장된노드의개수 item(i) 인덱스 i 에저장된노드를구함 (i 는 0 부터시작 ) 박태정 [akasha.park@gmail.com] (akasha.park@gmail.com) 25

26 Node 에정의된 nodetype 관련상수값 상수명값 ELEMENT_NODE 1 ATTRIBUTE_NODE 2 TEXT_NODE 3 CDATA_SECTION_NODE 4 ENTITY_REFERENCE_NODE 5 ENTITY_NODE 6 PROCESSING_INSTRCUTION_NODE 7 COMMENT_NODE 8 DOCUMENT_NODE 9 DOCUMENT_TYPE_NODE 10 DOCUMENT_FRAGMENT_NODE 11 NOTATION_NODE 12 박태정 [akasha.park@gmail.com] (akasha.park@gmail.com) 26

27 Document 인터페이스의메서드 함수 NodeList getelementsbytagname(string tagname) Element getelementbyid(string elementid) 설명 지정한이름의태그에해당하는모든 Element 의목록을구한다. Id 속성의값이 elementid 인태그를구한다. 박태정 27

28 Element 인터페이스의속성관련함수 함수 설명 String getattribute(string name) Name 에해당하는속성의값을구한다. setattribute(string name, String value) 이름이 name 인속성의값을 value 로지정한다. removeattribute(string name) 이름이 name 인속성을제거한다. 박태정 28

29 Document 의 Element 생성메서드 함수 Element createelement(string tagname) 설명 지정한태그이름을갖는 Element 를생성한다. Text createtextnode(string text) Text 를값으로갖는 Text 노드를생성한다. 박태정 29

30 Node 의 DOM 트리조작관련함수 함수 Node insertbefore (Node newchild, Node refchild) Node replacechild (Node newchild, Node oldchild) Node removechild (Node oldchild) Node appendchild (Node newchild ) 설명 현재노드의자식노드인 refchild 노드의 previoussibling 자리에 newchild 노드를삽입한다. 현재노드의자식노드인 oldchild 노드를새로운 newchild 노드로교체한다. 현재노드의자식노드인 oldfchild 를현재노드에서제거한다. newchild 노드를현재노드의마지막자식노드로추가한다. 박태정 [akasha.park@gmail.com] (akasha.park@gmail.com) 30

31 박태정 31

32 객체지향자바스크립트 자바스크립트에서클래스의선언은함수를정의하는방식으로한다클래스이름 = function( 파라미터 ) {. } Member = function(id, name) { this.id = id; this.name = name; } 클래스의객체를생성시에는 new 키워드를사용한다. var mb = new Member( korea, 대한민국 ); 박태정 [akasha.park@gmail.com] 32

33 객체지향자바스크립트 새로운함수를클래스에추가할때에는 protoype 을사용 클래스이름.prototype. 함수이름 = function( 파라미터 ){. } Member.prototype.setValue = function(newid, newname) { this.id = newid; this.name = newname; } Member.prototype.toString = function() { return this.id + [ + this.name + ] ; } 박태정 [akasha.park@gmail.com] 33

34 객체지향자바스크립트 자바스크립트에서는객체를클래스없이직접정의하는것이가능하다 클래스정의없이무명객체로정의해서프로퍼티나메소드를정의할수있다 var 객체명 = { } 프로퍼티명 1 : 프로퍼티값 1;. 프로퍼티명 n : 프로퍼티값 n; 메소드명 1 : function(){ 내용 }. } 메소드명 n : function(){ 내용 박태정 [akasha.park@gmail.com] 34

35 prototype.js prototype.js 를사용하면클래스를정의할때명시적인서술이가능하다. 클래스의생성은 prototype.js 에서제공하는 Class 객체의 create() 메소드로선언한다. 클래스의메소드선언은클래스변수의 prototype 속성에 메소드명 :function() 형태로정의한다. 클래스의생성자는클래스변수의 prototype 속성에 initialize() 메소드로정의한다. intialize : function(id){ this.id = id; } Ajax 에서는 prototype.js 라는표준라이브러리가자주사용되고있다 박태정 [akasha.park@gmail.com] 35

36 prototype.js prototype.js 에의한클래스의상속은 Object 객체의 extend() 메소드를사용한다. extend() 메소드의리턴값을상속하는클래스의 prototype 속성에설정한다. extend() 메소드는첫번째매개변수로상속해주는클래스의객체를지정한다. extend() 메소드는두번째매개변수에는상속받는클래스의정의를기술한다. Child.prototype = Object.extend(new Parent,{.. 슈퍼클래스의메소드를호출 apply() 슈퍼클래스명.prototype. 슈퍼클래스의메소드명.apply(this); 박태정 [akasha.park@gmail.com] 36

37 prototype.js 추상클래스란메소드의내용을갖지않고, 단순히메소드의선언만을가진다. test:function(name){} 추상클래스의목적은해당클래스를사용하는사용자들이, 특정메소드의메소드명이나메소드의인수등을정형화시켜구조를통일하는것이목적이다. 추상클래스를상속받는클래스에서해당추상클래스를재정의한다. 이벤트는 Event 객체의 observe() 메소드의매개변수로지정해서사용한다 Event.observe( 태그객체, 이벤트명, 이벤트핸들러메소드 ); 박태정 37

38 박태정 38

39 JSON(JavaScript Object Notation) 경량의 DATA- 교환형식 사람이읽고쓰기에용이 기계가분석하고생성함에도용이 JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999 의일부에토대를두고있다. 인터넷에서자료를주고받을때그자료를표현하는방법 자료의종류에큰제한은없다 특히컴퓨터프로그램의변수값을표현하는데적합 형식은자바스크립트의구문형식을따르지만, 프로그래밍언어나플랫폼에독립적이므로 C, C++, 자바, 자바스크립트, 펄, 파이썬등많은언어에서이용할수있다. 박태정 [akasha.park@gmail.com] 39

40 JSON(JavaScript Object Notation) JSON 의 DATA 구조 1. name/value 형태의쌍으로 collection 타입다양한언어들에서, 이는 object, record, struct( 구조체 ), dictionary, hash table, 키가있는 list, 또는연상배열로서구현 2. 값들의순서화된리스트대부분의언어들에서, 이는 array, vector, list, 또는 sequence 로서구현 박태정 40

41 JSON(JavaScript Object Notation) object 는 name/value 쌍들의비순서화된 SET 이다. object 는 { ( 좌중괄호 ) 로시작하고 } ( 우중괄호 ) 로끝내어표현한다. 각 name 뒤에 : (colon) 을붙이고, (comma) 로 name/value 쌍들간을구분한다. {"name2": 50, "name3": " 값 3", "name1": true} array 은값들의순서화된 collection 이다. array 는 [ (left bracket) 로시작해서 ] (right bracket) 로끝내어표현한다., (comma) 로 array 의값들을구분한다. [10, {"v": 20}, [30, " 마흔 "]] 박태정 [akasha.park@gmail.com] 41

42 JSON(JavaScript Object Notation) JSON 표기법으로배열에접근할때에는 객체 [ 인덱스 ] 형식으로접근할수있으며, 인덱스값은 0 부터시작한다. var countries = {ko, fr, uk, us } var koname = countries.ko; var frname = countries[0]; value 는큰따옴표안에 string, number,true,false, null, object,array 이올수있다. 이러한구조들을포함한다. string 은큰따옴표안에둘러싸인 zero 이상 Unicode 문자들의조합이며, 쌍다옴표안에감싸지며,backslash escape 가적용된다. 하나의문자 (character) 도하나의문자열 (character string) 로서표현된다. number 는 8 진수와 16 진수형식을사용하지않는것을제외하면 C 와 Java number 처럼매우많이비슷하다. 박태정 [akasha.park@gmail.com] 42

Microsoft PowerPoint - web-part03-ch20-XMLHttpRequest기본.pptx

Microsoft PowerPoint - web-part03-ch20-XMLHttpRequest기본.pptx 과목명 : 웹프로그래밍응용교재 : 모던웹을위한 JavaScript Jquery 입문, 한빛미디어 Part3. Ajax Ch20. XMLHttpRequest 2014년 1학기 Professor Seung-Hoon Choi 20 XMLHttpRequest XMLHttpRequest 객체 자바스크립트로 Ajax를이용할때사용하는객체 간단하게 xhr 이라고도부름 서버