글
Web/Ajax 2009/10/23 11:06ajax의 구성과 활용
Ajax의 구성
JavaScript + XMLHttpRequest + DOM,CSS
1. 자바크립트 : 유저 이벤트 처리 - 사용자가 마우스를 드래그 하거나, 버튼을 클릭하면, XMLHttpRequest객체를 사용해서 웹 서버에 요청을 전송한다. 또한 XMLHttpRequest 객체로부터 응답이 오면 DOM, CSS등을 사용해서 화면을 조작한다.
2. XMLHttpRequest : 서버와 데이터 교환 - 웹서버와 토잇ㄴ을 담당한다. 사용자의 요청을 웹 서버에 전달하고, 웹 서버로부터 받은 결과를 웹 브라우저에 전달한다.
3. DOM : 문서 정보(폼 등)-문서의 구조를 나타낸다. 폼등의 정보나 화면 구성을 조작할 때 사용된다.
4. CSS : UI 구성 - 글자 색, 배경색, 위치, 투명도 등 UI와 관련된 부분을 담당한다.
XMLHttpRequest를 이용한 프로그램 즉, Ajax를 활용한 프로그램
- 사용자가 이벤트를 발생 시키면 웹 서버에 데이터를 전송한다.
- 웹 서버가 생성한 응답 결과를 바탕으로 화면을 조작한다.
웹브라우저의 화면을 조작할 때에는 보통 다음의 두가지 방식 중 하나를 사용한다.
- HTML요소의 innerHTML 속성에 HTML 코드 지정하기
- DOM(Document Object Model) API 사용하기
Ajax를 활용한 프로그램
xmlHttpRequest 객체는 모든 브라우저에 공통 표준이 아니다.
IE와 나머지 브라우저에서 xmlHttpRequest객체를 얻는 방식이
틀리다는 말이다.
IE에서는 XMLHttpRequest가 ActiveX의 컴포넌트로 구성되어있다.
나머지 브라우저들은 브라우저 기본 내장 객체로서 제공된다.
따라서 user가 IE인지 나머지 브라우저인지 구분하여 XMLHttpRequest를 생성해야한다.
위와 같은 방식으로 브라우저에 따라 xmlHttpRequest 객체를 get한다.
26
27
28
요약
Ajax를 활용한 프로그램
1. XMLHttpRequest객체를 구한다.
2. 웹 서버에 요청을 전송한다.
3. 웹 서버에서 응답이 도착하면 화면에 반영해 준다.
xmlHttpRequest 객체는 모든 브라우저에 공통 표준이 아니다.
IE와 나머지 브라우저에서 xmlHttpRequest객체를 얻는 방식이
틀리다는 말이다.
IE에서는 XMLHttpRequest가 ActiveX의 컴포넌트로 구성되어있다.
나머지 브라우저들은 브라우저 기본 내장 객체로서 제공된다.
따라서 user가 IE인지 나머지 브라우저인지 구분하여 XMLHttpRequest를 생성해야한다.
function getXMLHttpRequest(){
if(window.ActiveXObject){
try{
return new ActiveXObject("Msxml2.XMLHTTP"); //IE에서 XMLHttpRequest
}catch(e){
return new ActiveXObject("Microsoft.XMLHTTP");
}
}else if(window.XMLHttpRequest){
return new XMLHttpRequest(); //IE이외 브라우저에서 XMLHTTPRequest
}else
return null;
}
위와 같은 방식으로 브라우저에 따라 xmlHttpRequest 객체를 get한다.
XMLHttpRequest를 이용한 웹서버 요청 기술
>open()함수 : 요청의 초기화, get,post 선택, 접속할 URL입력
>send() 함수 : 웹 서버에 요청
>get방식 전달
httpRequest = getXMLHttpRequest();
httpRequest.open("GET","/text.txt",true); //세개의인자:1.get or post, 2.접속할URL, 3.동기/비동기 방식 지정
or//httpRequest.open("GET","/test.jsp?id=raeok&pwd=1234");
httpRequest.send("id=raeok&pwd=1234");
>post방식 전달
httpRequest = getXMLHttpRequest();
httpRequest.open("POST","/text.txt",true);
httpRequest.send("id=raeok&pwd=1234");
서버 응답 요청에 대한 처리
XMLHttpRequest객체를 웹 서버로부터 응답이 도착하면 특정한 자바 스크립트 함수를 호출하는 기능이 있는데, 이때 사용되는 프로퍼티가 onreadystatechange 이다.
XMLHttpRequest 객체의 onereadtstatechange 프로퍼티는 웹 서버로부터 응답이 도착 할 때 호출될 함수를 지정하는 용도로 사용된다.
function eventTest(){
httpRequest = getXMLHttpRequest();
httpRequest.onereadystatechange = callbackFunction; //callbackFunction에서 응 답에 대한 작업 수행을 지시!
httpRequest.open("POST","/text.jsp",true);
httpRequest.send("id=raeok&pwd=1234");
}
function callbackFunction(){
//응답 작업 수행!
}
XMLHttpRequest를 이용한 프로그램 즉, Ajax를 활용한 프로그램
- 사용자가 이벤트를 발생 시키면 웹 서버에 데이터를 전송한다.
- 웹 서버가 생성한 응답 결과를 바탕으로 화면을 조작한다.
웹브라우저의 화면을 조작할 때에는 보통 다음의 두가지 방식 중 하나를 사용한다.
- HTML요소의 innerHTML 속성에 HTML 코드 지정하기
- DOM(Document Object Model) API 사용하기
DOM을 이용한 자료의 스크립트
.
.
.
.
var idList = document.getElementByTagName(div); //지정한 태그에 해당하는 모든 Element의 목록구함
var value1 = document.getElementById("raeok1");
요약
User가 버튼 클릭->
eventTest() 함수 수행 ->
XMLHttpRequest객체 생성 ->
객체로부터 응답이 올때 callbackFunction에서 응답에 대한 작업 수행을 하라고 지시 ->
text.jsp로 요청 ->
text.jsp로부터 응답->
callbackFunction에서 알맞은 작업을 수행
'Web > Ajax' 카테고리의 다른 글
| ajax의 구성과 활용 (0) | 2009/10/23 |
|---|
RECENT COMMENT