Ajax
Asynchronous(비동기) JavaScript and XML
xml를 이용하여 비동기로 통신을 처리하기 위한 기술
XMLHttpRequest(XHR) 객체로 구현
Ajax 개체, XMLHttpRequest(XHR)의 속성
readyState : AJAX 개체의 상태를 나타내는 숫자. 처음 AJAX 개체를 생성하면 0이다. get() 메소드로 요청할 페이지 정보를 설정하면 1이 되고, send() 메소드로 요청을 보내면 2가 되고, 서버에서 응답이 오기 시작하면 3이 되고, 서버 응답이 완료되면 4가 된다.
status : 서버로부터 받은 응답의 상태를 나타내는 숫자. 정상적으로 응답을 받은 경우 200이고, 페이지를 찾지 못한 경우 404가 된다.
statusText : 서버로부터 받은 응답의 상태를 나타내는 문자열. 정상적으로 응답을 받으면 'OK'가 되고 파일을 찾지 못하면 'Not Found'가 된다.
responseText : 서버 응답 내용을 나타내는 문자열.
responseXML : 서버 응답 내용을 나타내는 XML 개체.
onreadystatechange : readyState 속성이 바뀌었을 때 실행할 이벤트 핸들러를 지정한다.
Ajax 개체, XMLHttpRequest(XHR) 의 메서드
open(method, url [, async]);
AJAX 요청을 초기화하면서 요청 방식, 주소, 동기화 여부를 지정한다. method 인자는 http 요청 방식을 나타내며 "get" 또는 "post" 방식을 사용한다. url 인자는 요청할 페이지의 주소를 지정한다. 마지막으로 aysnc 인자는 비동기 통신 여부를 나타내며 true 또는 false로 지정한다. aysnc 인자를 지정하지 않으면 true를 기본값으로 사용한다.
send(body);
AJAX 요청을 보낸다. Body 인자에는 요청과 함께 서버로 보낼 내용을 지정한다.
abort()
send() 메소드로 보낸 요청을 취소한다.
getAllResponseHeaders();
응답을 받은 경우 응답의 모든 헤더 정보를 문자열로 돌려준다.
getResponseHeader(header)
응답을 받은 경우 header 인자로 지정한 이름의 헤더 정보 값을 문자열로 돌려준다.
setRequestHeader(header, value)
요청을 보내기 전에 header 헤더 정보의 값을 value로 설정한다.
자바스크립트로 Ajax 구현하기
<script type="text/javascript">
window.onload = function(){
var xhr;
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();
}else if(window.ActiveXObject){
xhr=new ActiveXObject("Msxmi2.XMLHTTP");
}else{
throw new Error("Ajax가 지원하지 않는 브라우저입니다.");
}
}
</script>
서버로 요청 보내기
1) POST나 GET으로 HTTP 메소드를 명시한다.
2) 연결하려는 서버 측 자원의 URL을 제공한다.
3) XHR 인스턴스에 진행 과정의 전달 방법을 알린다.
4) POST 요청인 경우 본문 콘텐츠를 제공한다.
xhr.open('get', ‘resource');
xhr.send('');
send() 메소드로 요청을 보내기 전에 open() 메소드를 실행
AJAX에서 GET 방식으로 요청하기
open() 메소드의 첫 번째 인자를 'get'으로 지정하고 두 번째 인자는 URL을 지정한다.
진행 상황 추적하기
1) XHR 인스턴스는 준비 핸들러를 통해 진행상황을 추적 onreadystatechange 프로퍼티에 함수 참조를 할당하여 설정
요청이 send() 메소드로 전송되면 이 함수는 요청이 다양한 상태 변화를 겪으면서 변할 때마다 호출된다.
xhr.onreadystatechange = function(){
}
2) readyState로 현재 상태를 파악하여 완료된 상태이면 status로 요청의 성공여부를 확인한다.
status가 200에서 299사이이면 성공한 것이다.
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status >= 200 && xhr.status < 300){
}
}
}
3) 페이지가 로드할때 resource라는 자원을 이용해 서버에서 HTML 코드를 가져와서 id가 container인 <div> 엘리먼트의 콘텐츠로 설정한다.
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status >= 200 && xhr.status < 300){
document.getElementById(‘container')
.innerHTML = xhr.responseText;
}
}
}
서버의 데이터를 대상 엘리먼트에 삽입하기-load()
페이지를 동적으로 로드하기 위해서는 load() 메소드를 호출한다.
load(url[, data][, success])
url은 요청할 URL 주소이고, data는 요청할 때 서버에 보낼 자바스크립트 객체 맵이나 문자열 형식의 데이터이다.
success는 요청이 성공했을 때 호출할 콜백 함수이다.
load() 메소드는 완료된 응답을 일치하는 집합에 있는 엘리먼트의 콘텐츠로 삽입한다.
$("#container").load(“resource");
예제) 자바스크립트로 Ajax 구현하기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자바스크립트 Ajax 구현하기</title>
<!--
readyState : AJAX 개체의 상태를 나타내는 숫자
처음 AJAX 개체를 생성하면 0
get() 메소드로 요청할 페이지 정보를 설정하면 1
send() 메소드로 요청을 보내면 2
서버에서 응답이 오기 시작하면 3
서버 응답이 완료되면 4
status : 서버로부터 받은 응답의 상태를 나타내는 숫자.
정상적으로 응답을 받은 경우 200
페이지를 찾지 못한 경우 404
-->
<script>
window.onload = function() {
var xhr;
if(window.XMLHttpRequest) {
xhr = new XMLHttpRequest(); // Ajax 인스턴스 생성
} else if(window.ActiveXObject) { // IE 하위버전을 위한 부분
xhr = new ActiveXObject("Msxml2.XMLHTTP");
} else {
throw new Error("Ajax를 지원하지 않는 브라우저입니다.");
}
xhr.onreadystatechange = function() { // onreadystatechange: readyState 속성이 바뀌었을 때 실행할 이벤트 핸들러를 지정
if(xhr.readState == 0) {
alert("xhr.readyState: 0");
} else if(xhr.readyState == 1) {
alert("xhr.readState: 1");
} else if(xhr.readyState == 2) {
alert("xhr.readyState: 2");
} else if(xhr.readyState == 3) {
alert("xhr.readyState: 3");
} else if(xhr.readyState == 4) {
alert("xhr.readyState: 4");
if (xhr.status >= 200 && xhr.status < 300) { // 정상적 응답 : 200, 페이지 찾지 못한 경우 : 404
document.getElementById('container').innerHTML = xhr.responseText;
}
} else {
alert("readyState : else");
}
}
xhr.open('GET', 'resource.html'); // 서버에 resource.html 파일 오픈에 대한 요청 방식,주소를 지정
xhr.send(); // 실질적으로 서버에 요청 발송
}
</script>
</head>
<body>
<div id="container">
</div>
</body>
</html>
'jQuery' 카테고리의 다른 글
| Ajax로 JSON 이용하기 (3) | 2016.03.21 |
|---|---|
| JQuary로 Ajax 구현하기 (0) | 2016.03.21 |
| 클릭시 이미지와 가격 텍스트가 바뀌는 예제 (0) | 2016.02.22 |
| jQuery Form API, 이벤트 메서드 (0) | 2016.02.19 |
| jQuery 속성 메서드: attr(), removeAttr(), val(), .text(), .html() (0) | 2016.02.19 |
