AJAX 2009.09 커머스아이 박준열
목차 Ajax 란? Javascript 방식 prototype 방식 JQuery 방식 jQuery vs Prototype 디버깅
(Asynchronous JavaScript and XML) Ajax 란? (Asynchronous JavaScript and XML) JavaScript, 통신객체( XMLHttpRequest ),통신 데이터(XML) 세 가지가 주요 구성 요소며, JavaScript를 통하여 웹서버에 비동기 통신으로 데이터를 송수신하여 웹에 반영해 주는 방식이다.
Ajax 란? 주로 사용 되는곳 연관검색 DB 접근이 많은 Web (Portal SITE) Drag & Drop 사용자 요청 없이 변화 하는 UI 구성 Client JSON HTML or JSP (javascript) jquery WEB Servser DB 접속 및 결과 탐색 결과로 XML 파일 생성 *.java *.XML 5 분 주기로 생성 DB S전기사 에서 사용한 예로 DB 에 접근하여 결과를 가져오는데 Client는15s~20s의 시간이 소요되었으나 Ajax(jquery)를 사용하여 Client는 브라우저가 XML 파일(5분주기로 생성)을 해석하는 2s~3s 의 시간으로 web page 속도를 개선하였다.
JavaScript 방식 코드 영문 한글성명 Uninitialized 초기화 되어 있지 않음 1 Loading 아직 send 호출 않음 2 Loaded Send불렀지만 header미도착 3 Interactive Data 일부 받음 4 completed Data 전부 받음 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <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() { createXMLHttpRequest(); xmlHttp.onreadystatechange = handleStateChange; xmlHttp.open("GET", "simpleResponse.xml", true); xmlHttp.send(null); } function handleStateChange() { if(xmlHttp.readyState == 4) { if(xmlHttp.status == 200) { alert("The server replied with: " + xmlHttp.responseText); } } } </script> </head> <body> <form action="#"> <input type="button" value="Start Basic Asynchronous Request" onclick="startRequest();"/> </form> </body> </html> XML engine인 xmlhttprequest 객체 생성 여기서 각각의 브라우저마다 DOM 객체의 작동 방법이 다르기 때문에 설정해줌 http 상태 코드 설명 200 OK 요청 성공 401 Unauthorized 권한 없음 403 Forbidden 접근 거부 404 Not Found 요청 리소스 없음 500 Internal Server Error 서버내부 오류 자바스크립트 콜백 함수 readstate 값이 변할 때 마다 호출 된다. 요청을 초기화 하고 HTTP메소드 및 URL 등을 설정하는 메소드 요청방식 Method : GET/POST POST : 파라미터로 값 전달 Ex) xmlhttp.open(“POST”,”Http://www.myweb.net/”) Send(userid=“user01”&userPw=“123”) GET : 메소드 인자로 값 넘김 Ex)xmlhttp.open(“GET”,http://www.myweb.net/,true,id,pw) send(null); URL : 요청 대상 URL 읽어올 xml 파일의 위치나 대상 url Async( 옵션): 비동기 (true) , 동기 (false) default : true 위에서 설정된 요청을 송신하는 메소드
Prototype 방식 <script src="prototype.js" type="text/javascript"></script> <script type="text/javascript"> function ajaxLoadDivRequest() { var strResponseURL = 'sample.json'; //읽어올 data 나 URL 설정 var httpObj = new Ajax.Request ( //XMLHTTPRequest 객체 생성 strResponseURL, { method:'get', //메소드 방식 onSuccess:function (responseHttpObj) { var returnData = responseHttpObj.responseText.evalJSON();// Ajax 요청이 성공 하였을 경우 json 형태의 데이터를 $('ajaxsample2').innerHTML = returnData.result; //httpObj형테로 바꾸어서 변수에 넣어준다 $('ajaxsample').innerHTML = returnData.message; //json파일에 있는 키 값을 기준으로 데이터를 얻어와서 }, //html tag id 값에 맞게 맵핑 시켜 주는 과정 onFailure:displayError } ); } function displayError(){ $('ajaxsample').innerHTML = ('AJAX failed'); } </script> </HEAD> <BODY> <br /><br /><br /><br /><center> <h4> Web2dong Ajax 테스트 </h4> <input type='button' value='BUTTON A' onClick='ajaxLoadDivRequest();'> <br /><br /> <div id='ajaxsample'>Ajax 결과가 나타납니다.</div> <br /><br /> <div id='ajaxsample2'>Ajax 결과가 나타납니다.</div> </center> </BODY> </HTML> Sample.json { "result":"JSON 결과입니다.", "message":"JSON 의 세계에 오신걸 환영합니다." }
Jquery 방식 <script type="text/javascript" src="xml2json.js"></script> <script type="text/javascript" src=“jquery.js"></script>//라이브러리를 다운받어 import <script type="text/javascript"> $(document).read(function(){ // 브라우저 요청시 바로 자바스크립트 호출 메소드 $.ajax({ //ajax 통신을 위한 기본 셋팅 url : //서버의 URL 주소, type : 'GET', //데이터 저장 방식 dataType : (jQuery.browser.msie) ? "xml" : "XML", // 읽는 데이터 파일은 xml 이고 XML 라는 변수에 넣는다는 말 error : function(){ alert('xml 파일을 읽어 올 수 없습니다 '); // XML 읽기 실패 시 호출 }, success : function(XML){ var data ; if(typeof XML == 'string'){ data = new ActiveXObject('Microsoft.XMLDOM'); // ie 에서 XML 띄워주기 위해서는 마이크로 XMLDom으로 data.async = false; // 바꿔서 싱크 시켜 주어야 함 . data.loadXML(XML); }else { data = XML; } var json = $.xml2json(data); // XML 방식보다 접근하기 쉬운 json 으로 데이터 변환 jquery 플러그인 사용 //ie 형태에 맡는 json data 를 json 이라는 변수에 json 형태로 넣음 // xml2json.js : XML -> JSON 파싱 , json2xml.js : JSON -> XML 파싱 ////////////////////////////////////////////////////HTML 에 뿌려주는 과정 //$(json.'tagname') 으로 데이터에 접근 하여 사용 $(json.Location).each(function(i){// 반복문 (XML 에 Location 태그 안에 Desc란 TAG를 가지고 있다) var Location = json.Location.Desc[i] ; //XML 태그 네임에 맞는 값을 변수에 저장 시킨다 . } $(#table).append("XML 값 넣기 : " +Location); // jquery 로 읽은 데이터값 HTML tag id 값으로 셀렉터 하여 값을 넣는다. HTML tag ID
Ex) var httpObj = new Ajax.Request JQuery VS Prototype Prototype.js JQuery.js 기존의 javaScript 기반의 객체 들을 Prototype-based-inheritance 를 통해서 기능을 확장 시키거나 기능별로 객체들을 구현해 놓았다 (Element,Class,Ajax)등이 있다. Ex) var httpObj = new Ajax.Request jQuery 라는 객체를 생성하고 그 객체로 DOM 객체 핸들링 부터 Ajax 통신 까지 수행한다. Ex) jQuery.browser.msie 차이점 1. 스크립트를 명시화 해서 개발할 수 있다. (기능 객체들이 따로 호출가능) 2. 한글화 문서나 예제 소스가 많다. 3. 확장이 어렵다. 4. 소스 용량이 커서 무거울 것이라는 편견이 있으나 무겁지는 않다. (용량차이 20kb) 1. 개발속도가 빠르고 쉽다. 2. 문서나 예제가 영문으로 문서가 많다 3. 플러그 인 형태를 통한 확장 이 쉽다. 4. 소스 용량이 작다. 특징
디버깅 Ie8 개발자 도구 Firefox firebug 특별한 디버깅 툴을 가지고 있지 않다. 이유) client 브러우저 단에서 코드가 해석되기 때문에 컴파일 된 내용을 검사하기도 어려울 뿐만 아니라 아니라 변화하는 XML 파일 내용을 검사 할 수가 없다. 하지만 이러한 코드를 도와주는 기능이 있다 firefox의 fiebug 와 ie8에서 개발자 도구가 있다 단추키 f12번 주로 XML 파일이 정상적으로 값이 넘어 오는 지와 자바스크립트 오류 구문을 잡아주는 역할을 할 수 있다. Ie8 개발자 도구 Firefox firebug