Ajax
[07] Ajax-Request,Response, Ajax-The onreadystatechange Event
Mr.Bini
2016. 5. 18. 11:14
1. Ajax- Request, Response
- 아래의 소스는 Ajax를 사용하여 비동기 요청/응답합니다.
>>>> ajaxTest.html
------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<body>
<p id="demo">Let AJAX change this text.</p>
<button type="button" onclick="loadDoc()">Change Content</button>
<script>
function loadDoc() {
var xhttp;
if (window.XMLHttpRequest) {
// code for modern browsers
xhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
alert(xhttp.responseText);
document.getElementById("demo").innerHTML = xhttp.responseText;
텍스트만 받아옵니다.
}
};
xhttp.open("GET", "ajax_info.html", true);
xhttp.send();
}
</script>
</body>
</html>
------------------------------------------------------------------------
>>> ajax_info.html
------------------------------------------------------------------------
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>Ajax는 새로운 프로그래밍 언어는 아닙니다.</p>
<p>Ajax는 민첩하고 동적인 웹페이지를 생성하는 기술 입니다.</p>
</body>
</html>
------------------------------------------------------------------------
1) 서버에 요청을 보냅니다.
- open()와 send()를 사용합니다.
- open(GET/POST, 요청URL, true/false);
2) open()에 GET/POST 사용
- GET Request
: GET 방식은 POST 방식보다 간단하고 빠른 방식입니다. 요청 URL뒤에 파라메터를 보냅니다.
- POST Request
: 서버의 내용을 변경하고자 할때 사용하며, 서버로 보내는 데이터가 많을때 사용하는 방식입니다.
POST방식으로 데이터를 서버로 보낼때는 setRequestHeader()에 Content-type를 명시합니다.
xhttp.open("POST", "demo_post2.jsp", true);
- open(GET/POST, 요청URL, true/false);
2) open()에 GET/POST 사용
- GET Request
: GET 방식은 POST 방식보다 간단하고 빠른 방식입니다. 요청 URL뒤에 파라메터를 보냅니다.
xhttp.open("GET", "demo_get2.jsp?fname=Henry&lname=Ford", true);
xhttp.send();
- POST Request
: 서버의 내용을 변경하고자 할때 사용하며, 서버로 보내는 데이터가 많을때 사용하는 방식입니다.
POST방식으로 데이터를 서버로 보낼때는 setRequestHeader()에 Content-type를 명시합니다.
xhttp.open("POST", "demo_post2.jsp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
form의 디폴트 값
xhttp.send("fname=Henry&lname=Ford");
3) open()에 동기/비동기 사용
- 동기방식
: 동기화 방식은 요청후 서버의 응답이 있을때까지 기다렸다가 응답이후에 다음작업을 실행합니다.
또한, 웹 서버의 접속자 폭주로 인한 지연, 통신 상태의 불안정한 상태등의 환경에서 데이터 처리에 많은 취약한 점을 가지고 있습니다.
>>>>> 동기예제
<!DOCTYPE html>
<html>
<body>
<p id="demo">Let AJAX change this text.</p>
<button type="button" onclick="loadDoc()">Change Content</button>
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;
}
</script>
</body>
</html>
- 비동기 방식
: 요청후 응답이 있을동안 다음작업을 바로 실행합니다.
요청이 거부될시에 서버의 상태에 따라 다시 처리 요청을 하여 결과를 받아오는 방식으로 Ajax는 비동기 방식을 특징으로 가지고 있으며 비동기 방식을 권장하고 있습니다.
>>>>> 비동기 예제
<!DOCTYPE html>
<html>
<body>
<div id="demo"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadDoc()">Change Content</button>
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
//응답이 있을시 받는 이벤트 처리 함수
//응답이 있을시 받는 이벤트 처리 함수
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("demo").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}
</script>
</body>
</html>
4) 서버에서 응답을 받습니다.
- XMLHttpRequest object 의 responseText, responseXML 속성을 사용합니다.
>>>>> responseText.html
<!DOCTYPE html>
<html>
<body>
<div id="demo"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadDoc()">Change Content</button>
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("demo").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}
</script>
</body>
</html>
-----------------------------------------------------------------------------------------------------
>>>> ajax_info.html
----------------------------------------------------------------------------------------------------
>>>>> responseXML.html
<!DOCTYPE html>
<html>
<body>
<h2>My CD Collection:</h2>
<button type="button" onclick="loadDoc()">Get my CD collection</button>
<p id="demo"></p>
<script>
function loadDoc() {
var xhttp, xmlDoc, txt, x, i;
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
xmlDoc = xhttp.responseXML;
txt = "";
x = xmlDoc.getElementsByTagName("ARTIST");
for (i = 0; i < x.length; i++) {
txt = txt + x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("demo").innerHTML = txt;
}
};
xhttp.open("GET", "cd_catalog.xml", true);
xhttp.send();
}
</script>
</body>
</html>
----------------------------------------------------------------------------------------------------
>>>>> cd_catalog.xml
<?xml version="1.0" encoding="ISO-8859-1"?>
<CATALOG>
<CD>
<TITLE>Empire Burlesque</TITLE>
<ARTIST>Bob Dylan</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1985</YEAR>
</CD>
<CD>
<TITLE>Hide your heart</TITLE>
<ARTIST>Bonnie Tyler</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>CBS Records</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1988</YEAR>
</CD>
<CD>
<TITLE>Greatest Hits</TITLE>
<ARTIST>Dolly Parton</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>RCA</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1982</YEAR>
</CD>
<CD>
<TITLE>Still got the blues</TITLE>
<ARTIST>Gary Moore</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Virgin records</COMPANY>
<PRICE>10.20</PRICE>
<YEAR>1990</YEAR>
</CD>
<CD>
<TITLE>Eros</TITLE>
<ARTIST>Eros Ramazzotti</ARTIST>
<COUNTRY>EU</COUNTRY>
<COMPANY>BMG</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1997</YEAR>
</CD>
<CD>
<TITLE>One night only</TITLE>
<ARTIST>Bee Gees</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Polydor</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1998</YEAR>
</CD>
<CD>
<TITLE>Sylvias Mother</TITLE>
<ARTIST>Dr.Hook</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>CBS</COMPANY>
<PRICE>8.10</PRICE>
<YEAR>1973</YEAR>
</CD>
<CD>
<TITLE>Maggie May</TITLE>
<ARTIST>Rod Stewart</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Pickwick</COMPANY>
<PRICE>8.50</PRICE>
<YEAR>1990</YEAR>
</CD>
<CD>
<TITLE>Romanza</TITLE>
<ARTIST>Andrea Bocelli</ARTIST>
<COUNTRY>EU</COUNTRY>
<COMPANY>Polydor</COMPANY>
<PRICE>10.80</PRICE>
<YEAR>1996</YEAR>
</CD>
<CD>
<TITLE>When a man loves a woman</TITLE>
<ARTIST>Percy Sledge</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Atlantic</COMPANY>
<PRICE>8.70</PRICE>
<YEAR>1987</YEAR>
</CD>
<CD>
<TITLE>Black angel</TITLE>
<ARTIST>Savage Rose</ARTIST>
<COUNTRY>EU</COUNTRY>
<COMPANY>Mega</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1995</YEAR>
</CD>
<CD>
<TITLE>1999 Grammy Nominees</TITLE>
<ARTIST>Many</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Grammy</COMPANY>
<PRICE>10.20</PRICE>
<YEAR>1999</YEAR>
</CD>
<CD>
<TITLE>For the good times</TITLE>
<ARTIST>Kenny Rogers</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Mucik Master</COMPANY>
<PRICE>8.70</PRICE>
<YEAR>1995</YEAR>
</CD>
<CD>
<TITLE>Big Willie style</TITLE>
<ARTIST>Will Smith</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1997</YEAR>
</CD>
<CD>
<TITLE>Tupelo Honey</TITLE>
<ARTIST>Van Morrison</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Polydor</COMPANY>
<PRICE>8.20</PRICE>
<YEAR>1971</YEAR>
</CD>
<CD>
<TITLE>Soulsville</TITLE>
<ARTIST>Jorn Hoel</ARTIST>
<COUNTRY>Norway</COUNTRY>
<COMPANY>WEA</COMPANY>
<PRICE>7.90</PRICE>
<YEAR>1996</YEAR>
</CD>
<CD>
<TITLE>The very best of</TITLE>
<ARTIST>Cat Stevens</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Island</COMPANY>
<PRICE>8.90</PRICE>
<YEAR>1990</YEAR>
</CD>
<CD>
<TITLE>Stop</TITLE>
<ARTIST>Sam Brown</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>A and M</COMPANY>
<PRICE>8.90</PRICE>
<YEAR>1988</YEAR>
</CD>
<CD>
<TITLE>Bridge of Spies</TITLE>
<ARTIST>T'Pau</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Siren</COMPANY>
<PRICE>7.90</PRICE>
<YEAR>1987</YEAR>
</CD>
<CD>
<TITLE>Private Dancer</TITLE>
<ARTIST>Tina Turner</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Capitol</COMPANY>
<PRICE>8.90</PRICE>
<YEAR>1983</YEAR>
</CD>
<CD>
<TITLE>Midt om natten</TITLE>
<ARTIST>Kim Larsen</ARTIST>
<COUNTRY>EU</COUNTRY>
<COMPANY>Medley</COMPANY>
<PRICE>7.80</PRICE>
<YEAR>1983</YEAR>
</CD>
<CD>
<TITLE>Pavarotti Gala Concert</TITLE>
<ARTIST>Luciano Pavarotti</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>DECCA</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1991</YEAR>
</CD>
<CD>
<TITLE>The dock of the bay</TITLE>
<ARTIST>Otis Redding</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Atlantic</COMPANY>
<PRICE>7.90</PRICE>
<YEAR>1987</YEAR>
</CD>
<CD>
<TITLE>Picture book</TITLE>
<ARTIST>Simply Red</ARTIST>
<COUNTRY>EU</COUNTRY>
<COMPANY>Elektra</COMPANY>
<PRICE>7.20</PRICE>
<YEAR>1985</YEAR>
</CD>
<CD>
<TITLE>Red</TITLE>
<ARTIST>The Communards</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>London</COMPANY>
<PRICE>7.80</PRICE>
<YEAR>1987</YEAR>
</CD>
<CD>
<TITLE>Unchain my heart</TITLE>
<ARTIST>Joe Cocker</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>EMI</COMPANY>
<PRICE>8.20</PRICE>
<YEAR>1987</YEAR>
</CD>
</CATALOG>
----------------------------------------------------------------------------------------------------------------------
2. Ajax-The onreadystatechange Event
- onreadystatechange Event는 비동기 상태의 요청에 대한 응답시점을 인식할 수 있도록 합니다.
- onreadystatechange Event는 readystate값이 변경될때 마다 호출하는 callback함수를 연결합니다.
- XMLHttpRequest object는 세개의 중요한 프로퍼티를 가집니다.
1) onreadystatechange
: 이 속성에 설정된 함수는 readyState의 값이 변경 될때 마다 호출됩니다. 이 속성값을 통해 웹 서버와의 통신 상태를 체크할 수 있습니다.
2) readyState
: 5가지의 요청에 대한 상태를 전달받습니다. (0~4)
- 0(UNINITIALIZED): 객체만 생성되고 초기화 되지 않은 상태
- 1(LOADING): 연결이 초기화 되었다는 의미
open()가 호출되고 아직 send()가 호출되지 않은 상태
- 2(LOADED): 요청의 시작
send()메소드가 불렸지만 status와 헤더는 도착하지 않은 상태
- 3(INTERACTIVE): 서버가 요청처리를 거의 끝냈을때,
데이터의 일부를 받은 상태
- 4(COMPLETED): 서버의 응답을 받아 사용할 준비가 되었을때,
데이터를 전부받은 상태
------------------------------------------------------------------------------------------------
open()호출 send()호출
-> 1 ---------- 요청 ----------- 2 ->
웹브라우저 서버
<- 4 ---------- 응답 ----------- 3 <-
응답완료 응답중...
3) status
: 서버로부터 도착한 응답의 상태가 어떤지 정보를 가지고 있습니다.
- 200(OK): 요청 정상 처리
- 403(Forbidden): 접근 거부
- 404(Not Found): 페이지 없음
- 500(Internal Server Error): 서버 오류 발생