Ajax는 비동기식 통신 방식을 이용하여 페이지 이동없이 페이지를 변환 할 수 있는 기술이다. Ajax는 event에 의해 발행되기 때문에 event발생후 다른 작업을 할 수 있다.
▶ 장점
- 페이지 이동 없이 고속으로 화면을 전환할 수 있다.
- 서버 처리를 기다리지 않고, 비동기 요청이 가능하다.
- 수신하는 데이터 양을 줄일 수 있고 클라이언트에게 처리를 위임할 수도 있다.
▶ 단점
- Ajax를 쓸 수 없는 브라우저에 대한 문제가 있다.
- Http클라이언트의 기능이 한정되어 있다.
- 페이지 이동 없는 통신으로 인한 보안상의 문제
- 지원하는 Charset이 한정되어 있다.
- 스크립트로 작성되므로 Debugging이 용이하지 않다.
- 요청을 남발하면 역으로 서버 부하가 늘 수 있음.
작동 순서
① jsp의 메인페이지에서 어떠한 이벤트가 발생된다.
② 발생한 이벤트는 script를 실행 시키고 ajax engine 으로 데이터를 전달한다.
③ Ajax engine은 request 객체를 생성하여 WAS로 보내주고 요청한 a.jsp파일을 찾는다.
④ WAS는 request를 분석하여 전달될 a.jsp페이지가 text페이지 인지 아니면 xml 데이터인지를 판단하여 적당한 데이터를 response에 데이터를 실어 보내고 결국 script부분으로 돌아온다.
⑤ 전달된 데이터를 원하는 위치에 삽입한다.
Ajax의 핵심
1. XMLHttpRequest Object 생성
윈도우판 IE에서 XMLHttp Object 생성하는 클래스
obj = new ActiveXObject("Microsoft.XMLHTTP")
obj = new ActiveXObject("MSXML2.XMLHTTP")
윈도우판 IE 이외에서 XMLHttp Object를 생성하는 생성자
obj = new XMLHttpRequest()
---------------------------------------------------------------------------------
function getXMLHttpRequest() {
if (window.ActiveXObject) {
try {
return new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
return new ActiveXObject("Microsoft.XMLHTTP");
} catch(e1) { return null; }
}
} else if (window.XMLHttpRequest) {
return new XMLHttpRequest();
} else {
return null;
}
}
---------------------------------------------------------------------------------
2. open method
obj.open(method, url, [async, [user, [ password ]]])
- obj는 위에서 생성한 XMLHttpRequest 객체
설명 : 요청을 초기화해서 HTTP 메소드 및 URL 등을 설정하는 메소드
method : GET/POST
url : 요청대상 url
async(옵션) : 비동기 true, 동기 false (default : true)
user(옵션) : 인증페이지에서 사용될 사용자 이름
password(옵션) : 인증페이지에서 사용될 암호
- POST 방식 :
obj.open( 'POST', 'http://www.myweb.net/' )
send('data=1')
send에 파라미터로 전달될 값을 넣어준다.
예) send('userId="user01"&'userPw="123"'')
- GET 방식 :
obj.open( 'GET', 'http://www.myweb.net/', true, id, password )
send(
null)
3. 요청 헤더 설정
setRequestHeader(header, 값)
설명 : 인수로 지정한 요청 헤더를 설정하는 메소드, open() 메소드가 먼저 호출되어야함.
open() 메서드와 send() 메서드 사이에 위치하여야 함.
header : 검색하고 싶은 헤더 이름
값 : 설정하고 싶은 값
예)
obj.open( 'POST', 'http://www.myweb.net/' )
obj.setRequestHeader( 'Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8')
send('~~~~')
4. Http 요청 송신
send(body)
설명 : 요청을 송신하는 메소드
예) var str = 'data=aaa&test=10'
send(str)
5. 착신
요청이 송신되면 서버로부터 그에 대한 응답이 도착하는데, 언제 도착할지 모를때 이를 확인하기 위해 onreadystatechange이벤트를 이용한다.
obj.onreadystatechange = 핸들러 함수 이름
function 핸들러 함수 이름(obj)
예)
obj.onreadystatechange = func1
function func1() {
if ( obj.readyState == 4 ) {
alert(obj.responseText);
}
}
readyState 값이 변화할때 데이터를 얻어 온다.
데이터가 정확히 처리 되었는지 안되었는지 확인 하는 방법
- readyState
위와 같은 표값으로 처리가 되었는지 안되었는지 확인 할 수 있다.
- status
3자릿수의 숫자(long)로 HTTP상태 코드를 나타내는 프로퍼티, send()가 성공한 뒤에 얻어낼 수 있다.
- statusText
HTTP상태 텍스트(영문)를 나타내는 프로퍼티
Opera 8에서는 "undefined"가 반환된다. 따라서, 크로스 브라우저를 실현하는 경우에는 statusText보다 status 쪽이 안전하다.
예)
obj.onreadystatechange = function () {
if (obj.readState == 4 &&
obj.statusText == "OK") {
alert(obj.responseText)
}
}
보통의 방식
obj.onreadystatechange = function () {
if (obj.readState == 4 && obj.status == 200) {
alert(obj.responseText)
}
}
5. 데이터
- xml 파일로 데이터를 받는 형식
xmlobj = obj.responseXML
요청에 대한 응답을 XML(DOMDocument)로 반환한 프로퍼티
xmlobj : XML 문서(Object data Type)
if (obj.readState == 4) {
//데이터 로딩이 되었으면
// 응답을 취득
var xmlDoc = oj.responseXML
//XML데이터를 전송 받겠다.
// test tag를 배열로 set
var nodes = xmlDoc.getElementsByTagName("test")
//XML문서에서 TAG NAME이 test인것의 정볼르 nodes에 저장한다.
// 최초 test tag의 firstChild 값을 표시한다.
alert(nodes[0].firstChild.nodeValue)
//test라는 첫번째 노드[0]에서,첫번째 eliment[firstChild],값[nodeValue]
}
jsp로 xml을 만들려면 다음과 같이 선언해야 한다.
<?xml version="1.0" encoding="euc-kr" ?>
<%@ page contentType="text/
xml; charset=EUC-KR"%>
- text 파일로 데이터를 받는 형식
value = obj.responseText
요청에 대한 응답을 텍스트로 돌려주는 프로퍼티
obj.onreadystatechange = function () {
if (obj.readState == 4) {
alert(obj.responseText)
}
}
jsp페이지에서 text로 데이터를 전달 하려면 다음과 같이 선언해야 한다.
<%@ page contentType="text/
plain; charset=euc-kr" %>
httpRequest.js
