진상현 노현철 박주호 김민구 이보라 박종빈 Ajax

INDEX Ajax 란? Ajax의 발생배경 Ajax의 사용방법 Ajax 사용예제 Q&A

Ajax란? Asynchronous JavaScript and XML의 약자로 웹 페이지에서 HTTP 프로토콜을 사용해 XML 데이터를 동적으로 로딩할 수 있는 기술이다. 비동기적(Asynchronous) -어떠한 작업을 시켜 놓고 다른 일을 할 수 있다면 Ajax의 A는 비동기적 이라는 뜻이다. 동기적(Synchronous) -웹 콘텐츠를 클릭해서 웹 페이지를 구성하는 동안에 지연이 발생하면 아무런 일도 하지 못하고 기다리는 것을 동기적이라고 한다.

Ajax의 발생배경 Ajax란 웹 클라이언트 화면 제어를 보다 세밀하게 하기 위한 기술 HTML과 HTTP의 한계 웹의 발전과 더불어 사용자들의 요구가 너무나 다양함

Ajax의 사용방법 XMLHttpRequest 서버와 정보를 비동기식으로 교환하는 AJAX에서 가장 중요한 key point 현재 거의 모든 브라우져(크롬, 오페라 , IE, 사파리 등)에서 지원 IE5 나 IE6에서도 ActiveX 형태로 지원 개발자 24 박종빈입니다. ajax의 사용 방법에 대해서 발표하겠습니다. ajax는 기본적으로 XMLHttpRequest객체를 생성하여 사용 하는 방법과 Jquery를 사용하는 방법이 있는데 우선 XMLHttpRequest객체를 생성하여 사용 하는 방법 부터 시작하겠습니다. XMLHttpRequest 객체는 서버와 정보를 비동기식을로 교환하는 AJAX에서 가장 중요한 key point라고 볼수 있습니다.

Ajax의 사용방법 XMLHttpRequest 객체 생성 변수 = new xmlHttpRequest(); IE5 or IE6 우선 일반적인 브라우져에서는 변수명 = new xmlHttpRequest(); 와 같은 방식으로 객체를 생성할수 있으나 익스플로러(IE5 or IE 6)같은 경우에는 변수 = new ActiveXObject("Microsoft.XMLHTTP") 와 같은 방식으로 객체를 생성해야 합니다. 변수 = new ActiveXObject("Microsoft.XMLHTTP")

Ajax의 사용방법 XML 객체 생성 if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); } else { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } 그래서 if 만약 브라우저에서 xmlhttpRequest객체를 지원한다면 xmlhttpRequest객체를 사용하여 객체를 생성하고 브라우저가 xmlhttpRequest객체를 지원하지 않는다면 ActiveX를 통해서 객체를 생성하게 됩니다.

XMLhttpRequest 객체의 메서드와 프로퍼티 Ajax의 사용방법 XMLhttpRequest 객체의 메서드와 프로퍼티 다음으로 객체를 만든 후 서버에 보내는 방법인 Request에 대해서 알아보겠습니다.

Ajax의 사용방법 XMLHttpRequest의 메서드 메서드 이름 설명 abort() 현재의 요청을 중단 open(method, url, async) 서버로 보낼 요청을 작성 send(string) Open메서드로 작성된 요청을 전송 setRequestHeader(header,value) http 헤더의 값을 설정 AJAX의 메서드에는 abort open send setRequestHeader가 있는데요 abort는 사용자가 ajax를 통해 서버로 요청하는 것을 중단하는 메서드이고, open 메서드는 서버로 보낼 요청을 만드는 메서드 입니다. open 메서드의 매개변수로는 method url async가 있는데 method는 서버에게 get방식으로 요청할지 post방식으로 요청할지 결정하는 매개변수이고 url은 절대경로나 상대경로의 서버에 있는 요청 할 파일의 위치이고 async는 비동기식으로 할것인지 동기식으로 할것인지 결정하는 매개변수입니다. send는 open 메서드로 작성된 요청을 전송하는 메소드이고 POST방식의 경우 이 메서드의 매개변수에 추가로 전달하고 싶은 데이터를 입력합니다. 매개변수가 없는 경우에는 get방식으로 인식하게 됩니다. setRequestHeader메서드는 http헤더에 값을 얹어서 보낼 때 사용하는 메서드로 header 매개변수는 이름이고 value 매개변수는 값을 의미합니다.

Ajax의 사용방법 XMLHttpRequest 의 프로퍼티 프로퍼티 이름 설명 onreadystatechange 서버의 처리 상태 ResponseText 서버의 응답을 text형태로 나타냄 ResponseXML 서버의 응답을 XML형태로 나타냄 status 서버의 처리 결과 다음 AJAX의 프로퍼티에 대해 알아보겠습니다. 프로퍼티에는 onreadystatechange redaystate responsetext responsexml status 가 있는데요 onreadystatechange 프로퍼티는 서버버의 처리상태의 변화에 따른 이벤트 발생 처리 상태값을 readystate 프로퍼티로 제공 하는 메서드이고 readystate 프로퍼티는 서버의 처리 상태를 알 수 있는 프로퍼티인데

Ajax의 사용방법 XMLHttpRequest 의 프로퍼티 프로퍼티 이름 설명 onreadystatechange 값 상태 open()실행전 1 로딩중 2 로딩완료 3 서버처리중 4 서버처리완료 프로퍼티 이름 설명 onreadystatechange 서버의 처리상태의 변화에 따른 이벤트 발생 처리 상태 값을 readyState 프로퍼티로 제공 RedayState 서버의 처리 상태 ResponseText 서버의 응답을 TEXT형태로 나타냄 ResponseXML 서버의 응답을 XML형태로 나타냄 status 서버의 처리 결과 readystate의 상태가 0이면 open메서드를 실행가기 전 상태 0 인경우 로딩중 상태 2인경우 로딩완료인 상태 3인경우 서버처리중 상태 4인경우 서버처리 완료 상태로 나타나게 됩니다. responsetext 메서드는 서버에 요청한뒤 응답을 받을때 text형태로 받는 메서드이고 responsexml 메서드는 서버에 요청한 뒤 응답을 받을 때 xml형태로 받는 메서드 입니다. status 메서드는 서버의 처리 결과를 나타내는 프로퍼티로

Ajax의 사용방법 XMLHttpRequest 의 프로퍼티 프로퍼티 이름 설명 onreadystatechange 값 상태 200 성공 403 접근거부 404 파일/페이지 없음 프로퍼티 이름 설명 onreadystatechange 서버의 처리상태의 변화에 따른 이벤트 발생 처리 상태 값을 readyState 프로퍼티로 제공 RedayState 서버의 처리 상태 ResponseText 서버의 응답을 text형태로 나타냄 ResponseXML 서버의 응답을 XML형태로 나타냄 status 서버의 처리 결과 statu의 상태가 200인 경우 서버처리가 성공 한 상태이며 403일 경우에는 서버에서 접근거부를 당한 경우 404인 경우에는 파일이나 페이지가 없다는 상태를 의미합니다.

Ajax의 사용방법 XMLhttpRequest 예제 다음 예제를 보도록 하겠습니다 이 예제는 버튼을 클릭하면 loadDoc라는 function을 실행시키는 예제인데 loadDoc function이 실행되면 먼저 XMLhttprequest객체를 생성하고 get방식과 비동기식으로 demo_get.txt를 요청하는 메서드를 작성하여 서버로 보내는 것을 볼 수 있고 만약 요청이 정상적으로 처리 되었다면 id가 demo인 태그안에 서버로부터 받아온 값을 넣는 예제입니다.

Ajax의 사용방법 XMLhttpRequest 예제 그래서 버튼을 클릭하면 서버에서 demo_get.txt파일을 받아와서 이와 같이 화면에 출력된 것을 확인 할 수 있습니다.

JQUERY를 이용하면 AJAX를 훨씬 간단하게 사용 할 수 있다. 브라우저 간에 차이점으로 인하여 화면을 다르게 보여주는 것을 교정하는 크로스브라우징을 자동으로 막아주는등 여러가지 장점을 가지게 됩니다.

$.ajax(url [,settings]); JQUERY $.ajax({settings]); 속성 옵션 명 내용 url 요청을 보내지는 곳 type http 요청 방식(get/post) data 요청과 함께 서버에 보내는 값 success 요청 성공시 작동 함수 error 요청 실패시 작동 함수 complete 요청 완료후 작동 함수 async 동기 여부(true/false) jquery로 ajax를 사용하는 방법중 하나인 이 것은 여러가지 속성을 가지게 됩니다. url은 요청 하고자하는 파일의 주소이고 type은 요청 방식 succes는 요청 성공시 작동 함수 error는 요청 실패시 작동 함수 complete은 요청이 완료된 후 작동 함수 async는 동기식으로 할것인지 비동기 식으로 할것인지에 대한 속성입니다.

$.ajax(url [,settings]); JQUERY $.get(url,data,function(),datatype); $.post(url,data,function(),datatype); 매개변수 명 내용 url 요청을 보내지는 곳 function() 요청 성공시 작동 함수 datatype 서버의 응답으로 오는 데이터 타입 (xml,text,json 등등) jquery를 이용한 ajax는 이와 같이 더욱더 간편하게 사용할 수 있는데 $.get을 사용하면 get방식 $.post를 이용하면 post방식을 통해 서버에 접근하게 됩니다. 이 두가지 방법을ㄴ 서로 같은 속성을 가지고 있는데 url은 아까 말했다 싶이 요청하고자하는 파일의 주소 function은 요청 성공시 작동 함수 datatype은 서버의 응답으로 오는 데이터 타입인데 입력하지 않아도 jquery가 자동으로 인식 한다고합니다.

$.ajax(url [,settings]); JQUERY $(selector).load(url,function()); 매개변수 명 내용 url 요청을 보내지는 곳 function() 요청 성공시 작동 함수 다음은 html 태그의 id에 바로 서버에서 불러온 값을 입력하는 load메서드입니다. 이것도 똑같이 url에 요청할 파일의 주소를 입력하고 function에 요청성공시 작동할 함수를 입력합니다.

Ajax의 사용방법 JQUERY 예제 예시를 보시면 동기식으로 서버에 text.txt파일을 요청 하고 응답받은 text파일의 내용을 txt 변수에 대입하여

Ajax의 사용방법 JQUERY 예제 버튼을 클릭하면 alert창에 txt변수의 내용을 띄어주는 예제입니다.

Ajax의 사용방법 JQUERY 예제 다음 예쩨를 보시면 load를 이용하는 예제인데 버튼을 클릭하면 demo_test.txt파일의 내용을 div1이라는 아이디를 가진 태그에 내용으로 입력되는 예제입니다.

Ajax의 사용방법 JQUERY 예제 이상으로 ajax의 사용방법에대해서 발표 마치고 이어서 김민구님이 ~ 발표하겠습니다.

Ajax 사용 예제 모델2를 활용해 작동되는 순서

Ajax 사용 예제 실행화면(ID 중복체크)

Ajax 사용 예제 요청페이지 Form(Ajax 호출)

Ajax 사용 예제 XML

Controller(Servlet 사용) Ajax 사용 예제 Controller(Servlet 사용)

Ajax 사용 예제 Model(DB)

Ajax 사용 예제 Model(DB)

Ajax 사용 예제 요청 페이지 Form(View)

Ajax 사용 예제 결과 페이지(success 호출)

Q&A