Introduction to AjaxAjax 란?Ajax [éiʤæks]: Asynchronous JavaScript And XML(비동기): 웹 기반의 비동기적 통신 기술서버로의 비동기 통신기술 (Soap,XML통신)표준 데이터 포맷 (XML)동적 클라이언트 스크립팅 (DOM, HTML, CSS)동기 vs 비동기예) 커피샵에서 커피 및 쿠키 주문예) 자판기 커피 이용사용자는 요청에 대한 응답이 돌아오지 않은 상태이더라도 기다림 없이 다른 작업을 수행할 수 있는 구조.사용자의 요청이 일단 서버로 요청이 보내지면, 응답을 받기 전까지는 다른 작업을 수행할 수 없는 구조.비동기식 요청동기식 요청Ajax 등장배경XMLHttp의 ActiveX 개체 등장으로 서버와의 비동기 통신 가능 화면 리로드 없는 빠르고 동적인 AP에 대한 요구 증가 숨긴 iframe 사용에 대한 불편함 Web Browser는 별도의 Client 소프트웨어 없이 어디서든 접근 가능 ActiveX, Flash등의 등장으로 Client와 Server간의 양방향 통신이 가능해 졌으나, 브라우저 지원의 문제, Network 속도 및 바이러스문제, 늘어나는 개발비용 등의 문제 발생Ajax의 보급Web 2.0 시대를 연 많은 사이트들이 Ajax 기술 활용Jesse James Garret Adaptive path(2005/02/18)에 Ajax관련 내용을 처음으로 소개 Ajax: A New Approach to Web Applications기존 시스템과의 차이점브라우저와 Ajax엔진이 별개이므로 비동기 요청 처리 가능Browser 유저 인터페이스 부분 담당 Ajax engine HTML문서처리 엔진을 제외한 모든 엔진 (브라우저를 제어하는 자바스크립트 엔진 및 다른 객체와 라이브러리 제어)Ajax 장점페이지 이동없이 고속으로 화면을 전환. 필요한 일부 페이지만을 위한 요청을 하게 되므로 브라우저와 웹서버 간의 데이터량이 줄어 들어 어플리케이션의 응답성이 향상되고 웹서버의 부담 감소. 기존 자바스크립트를 이용하북마크할 수 없으며 뒤로가기도 동작하지 않는다. 가장 중요한 것은 단순함이다. 사용자 중심의 디자인이 요구된다.Ajax 기본흐름웹브라우저HTMLonClick, onChange …요청객체 만들기 creatRequest()***.jsprequest.send(null)콜백함수 updatePage()12345out.print(“ ”); xml,json6request.readyState.. request.status..정보 요청 getCustomerInfo()요청객체(XMLHttpRequest) 만들기var request = null; function creatRequest(){ try{ ㄱ request = new XMLHttpRequest(); } catch (trymicrosoft) { try { request = new ActiveXObject( Msxml2.XMLHTTP ); } catch (othermicrosoft) { try{ request = new ActiveXObject( Microsoft.XMLHTTP ); } catch (failed) { request = null; } } } if (request == null){ alert( Error creating request object! ); } }사파리, 파이어폭스, 모질라, 오페라 등 마이크로소프트의 브라우저를 제외한 대부분의 브라우저를 지원하는 객체 생성대부분 버전의 마이크로소프트 브라우저를 지원하는 객체 생성그 이외 타입의 마이크로소프트 브라우저를 지원하는 객체 생성요청객체(XMLHttpRequest) 속성서버의 응답을 string 형식으로 나타냄.ㄱresponseText자바스크립트 콜백함수를 지정.onreadystatechange요청의 상태를 의미. 예) 0 = uninitialized, 1 = loading, 2 = loaded, 3 = interactive, 4 = completereadyState서버로부터의 HTTP 상태코드. 예) 200(OK), 404(NOT Found), 202(결 브라우저에서 문제를 일으킬 만한 문자는 escape() 함수로 변환브라우저에서 요청 URL을 캐시(cache) 하여 같은 값을 반환하는 것을 방지하기 위하여 난수를 발생시킴요청보내기 - getCustomerInfo()function getCustomerInfo(){ var phone = document.getElementById( phone ).value; creatRequest(); var url = ../jsp/lookupCustomer.jsp?phone= + escape(phone); url = url + dummy= +new Date().getTime(); request.open( GET ,url,true); request.onreadystatechange = updatePage; request.send(null); }creatRequest()로 만든 요청객체를 사용하기 시작 연결을 초기화하고 요청 객체에 어떻게 서버에 연결할 것인지 지시open() 메소드는 연결을 초기화 “GET” 은 서버에 어떻게 데이터를 보낼지 가리키는 것 (“POST” 로도 가능) true는 요청이 비동기임을 나타냄 (false로 하면 동기방식으로 설정)POST 방식 변환function getCustomerInfo(){ var phone = document.getElementById( phone ).value; creatRequest(); var url = ../jsp/lookupCustomer.jㄴsp ; request.open( POST ,url,true); request.onreadystatechange = updatePage; request.setRequestHeader( Content-Type , application/x-www-form-urlencoded ) request.send( phone= + escape(phone) ); }서버가 POST요청을 받을 때 컨텐트 타입을 설정하지 않으면 서버는 데이터를 어떻게 처리할지 모름 (POST로는 텍스트,이미지,XML전송)서버가 요청을 모두 처리하고 응답 데이터는 responseText 속성을 통해 사용updatePage()콜백함수로 상태(0,1,2,3,4)가 바뀔때마다 실행됨JSP 스크립트 – lookupCustomer.jsp%@ page language= java % %@ page contentType= text/html; charset=euc-kr pageEncoding= EUC-KR % % String phone = ; String address = ; StringBuffer sb = new StringBuffer(); phone = request.getParameter( phone ); out.clear(); sb.append( select address from … ); sb.append( where … ); … … out.print(address); %콜백함수 처리 – updatePage()function updatePage(){ if(request.readyState == 4){ if(request.status == 200){ var customerAddress = request.responseText; document.getElementById( address ).value = customerAddress; }else{ alert( error! Request status is + request.status); } } }준비상태(state) 는 요청이 초기화, 처리 중, 처리 완료 등 요청 처리 진행 중 어떤 단계에 있는지 알려줌 준비상태가 “4” 즉, 서버의 작업이 끝나서 응답 데이터를 안전하게 쓸 수 있는 상태가 아니면 실행하지 않음상태코드(status) 는 서버에서 요청을 처리하는 중에 무슨 일이 일어났는지에 대해 알려줌 200 : OK 401 : Unauthorized 403 : Forbidden 404 : Not Found콜백함수 처리 – updatePage()function updatePage(){ if(request.readyState == 4){ ireadyState == 4) { if (request.status == 200) { // Get the updated totals from the XML response var xmlDoc = request.responseXML; var xmlBoards = xmlDoc.getElementsByTagName( boards-sold )[0]; var totalBoards = xmlBoards.firstChild.nodeValue; var xmlBoots = xmlDoc.getElementsByTagName( boots-sold )[0]; var totalBoots = xmlBoots.firstChild.nodeValue; var xmlBindings = xmlDoc.getElementsByTagName( bindings-sold )[0]; var totalBindings = xmlBindings.firstChild.nodeValue; … …서버가 준 XML 응답을 담고 있는 DOM(Document Object Model) 트리를 가져옴서버가 준 DOM 트리에서 “boots-sold” 라는 이름의 모든 엘리먼트를 가져옴 [0] – 가져온 엘리먼트 목록에서 첫번째 엘리먼트를 지정위에서 가져온 boots-sold 의 첫번째 자식의 값을 가져옴JSON(JavaScript Object Notation)객체를 기술화 하는 경량의 데이터 교환 포맷 단지 자바스크립트에서 객체를 표현하는 방법 XML 방식에 비해 가볍고 빠르고 사용하기 쉬움 자바스크립트 코드를 위한 Native 코드 포맷이므로 자바스크립트 내에서 객체의 접근이 쉬움JSON Object는 '{' 로 시작하고 '}' 로 끝남 각각의 이름은 ':' 과 ',' 로 구분된 name/value 쌍의 형식 name/value 쌍의 set는 순서가 없음특징표기법JSON을 이용한 데이터 전송%@ page language= java % %@ page contentType= text/plain; charset=euc-kr pag
