아래 예제는 AJAX를 이용해서 데이터베이스에서 읽어온 자료를 처리하는 것을 보여줍니다.
사용자가 드랍다운 리스트에서 고객을 선택하면, "showCustomer()" 함수가 호출되어 실행됩니다. 이 함수는 "onchange" 이벤트가 발생하면 호출되도록 되어있습니다.
function showCustomer(str) {
var xhttp;
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
}
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("txtHint").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "getcustomer.asp?q="+str, true);
xhttp.send();
}
showCustomer() 함수는 아래와 같은 작업을 합니다.
위 예제에서 사용된 서버페이지는 "getcustomer.asp"입니다.
서버 페이지 파일은 PHP, JSP와 같은 다른 서버 언어로도 구현할 수 있습니다.
"getcustomer.asp" 는 데이터베이스의 정보를 조회하고 읽어온 정보를 HTML 테이블에 넣는 기능을 합니다.
<%
response.expires=-1
sql="SELECT * FROM CUSTOMERS WHERE CUSTOMERID="
sql=sql & "'" & request.querystring("q") & "'"
set conn=Server.CreateObject("ADODB.Connection")
conn.Provider="Microsoft.Jet.OLEDB.4.0"
conn.Open(Server.Mappath("/datafolder/northwind.mdb"))
set rs=Server.CreateObject("ADODB.recordset")
rs.Open sql,conn
response.write("<table>")
do until rs.EOF
for each x in rs.Fields
response.write("<tr><td><b>" & x.name & "</b></td>")
response.write("<td>" & x.value & "</td></tr>")
next
rs.MoveNext
loop
response.write("</table>")
%>
[jQuery] 4. DOM Attributes ( DOM 속성 ) (0) | 2016.06.12 |
---|---|
[jQuery] 3. Selectors ( 셀렉터 ) (0) | 2016.06.12 |
AJAX란? - 이벤트 종류 (0) | 2016.06.12 |
AJAX란? - 서버로부터 응답받기 (0) | 2016.06.12 |
AJAX란? - 서버로 요청하기 (1) | 2016.06.12 |
XMLHttpRequest객체는 상태정보를 가지고 있는데 readyState 속성이 그 값을 가지고 있습니다.
그리고 우리는 이 상태 정보를 보고 응답이 왔는지, 그 응답이 정상적으로 왔는지 확인할 수가 있습니다.
이 readyState 가 변할 때마다 항상 발생하는 이벤트가 있는데 그것이 바로 onreadystatechange 이벤트입니다.
XMLHttpRequest 객체의 중요한 세 가지 속성은 아래와 같습니다.
속성 | 설명 |
---|---|
onreadystatechange | readyState 속성값이 변할 때마다 자동으로 호출될 함수 또는 함수명을 저장합니다. |
readyState | XMLHttpRequest 객체의 상태를 가지고 있고, 0 에서 4 의 값을 가집니다. 0: 요청이 초기화되지 않았습니다. 1: 서버와 연결되었습니다. 2: 요청이 받아들여졌습니다. 3: 요청이 진행중입니다. 4: 요청이 완료되고 응답을 받았습니다. |
status | 200: 정상 404: 페이지를 찾을 수 없습니다. |
onreadystatechange 이벤트가 발생하고 readyState가 4이며 status가 200이면 정상적으로 요청이 처리되어 응답이 온 경우이므로 이때 원하는 작업을 하시면 됩니다.
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("demo").innerHTML = xhttp.responseText;
}
};
Note: onreadystatechange 이벤트는 한번의 요청을 할 때 총 5번 발생합니다 (readyState가 0에서 4까지 바뀌므로).
callback 함수는 다른 함수의 파라미터로 넘겨지는 함수를 말합니다.
만약 웹사이트에 하나 이상의 AJAX 작업이 있다면, 단 하나의 표준 함수를 만들어서 XMLHttpRequest 객체를 생성하고 각각의 AJAX 작업이 있을 때마다 이 표준함수에서 호출함으로써 코드를 단순화 할 수 있습니다.
표준함수는 각각의 AJAX작업을 하는 함수를 파라미터로 넘겨받아서 이를 처리하게 됩니다.
function loadDoc(cFunc) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
cFunc(xhttp);
}
[jQuery] 3. Selectors ( 셀렉터 ) (0) | 2016.06.12 |
---|---|
AJAX란? - 데이터베이스 (0) | 2016.06.12 |
AJAX란? - 서버로부터 응답받기 (0) | 2016.06.12 |
AJAX란? - 서버로 요청하기 (1) | 2016.06.12 |
Ajax 란? - Ajax 시작하기 (1) | 2016.06.12 |
서버로부터 응답을 받기 위해서는 XMLHttpRequest객체의 responseText 또는 responseXML 속성을 사용합니다.
속성 | 설명 |
---|---|
responseText | 응답 데이터를 string으로 받습니다. |
responseXML | 응답 데이터를 XML 로 받습니다. |
document.getElementById("demo").innerHTML = xhttp.responseText;
cd_catalog.xml 파일을 요청하고 응답으로 온 데이터 파싱하기
xmlDoc = xhttp.responseXML;
txt = "";
x = xmlDoc.getElementsByTagName("ARTIST");
for (i = 0; i < x.length; i++) {
txt += x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("demo").innerHTML = txt;
AJAX란? - 데이터베이스 (0) | 2016.06.12 |
---|---|
AJAX란? - 이벤트 종류 (0) | 2016.06.12 |
AJAX란? - 서버로 요청하기 (1) | 2016.06.12 |
Ajax 란? - Ajax 시작하기 (1) | 2016.06.12 |
[jQuery] 2. jQuery Basics ( 기본 ) (0) | 2015.08.06 |
서버로 요청하기
- 서버로 요청을 할 때에는 XMLHttpRequest객체에서 제공하는 open(), send() 메소드를 사용합니다.
예를들어, 아래처럼 사용합니다.
var xhttp = new XMLHttpRequest();
xhttp.open("GET", "URL", true);
xhttp.send();
이런 식으로 말이죠.
이때 open()과 send()의 메소드 설명은 아래와 같습니다.
메소드 | 설명 |
---|---|
open(method, url, async) | 요청 타입을 정합니다. method: 요청 타입: GET 또는 POST url: 서버 (파일) 위치 async: true (비동기식) 또는 false (동기식) |
send() | 서버로 요청을 보낸다 (GET방식에서 사용) |
send(string) | 서버로 요청을 보낸다 (POST방식에서 사용) |
GET 방식과 POST방식
GET 은 POST보다 단순하고 빠르며 대부분의 경우에 사용할 수 있습니다.
하지만 아래 경우에는 꼭 POST방식으로 써야합니다:
간단한 GET 요청:
xhttp.open("GET", "demo_get.asp", true);
xhttp.send();
위 예제에서는 이미 캐쉬된 결과를 볼 수도 있습니다. 그런 경우를 피하려면, 유니크 ID를 URL에 넣어주셔야 합니다.
xhttp.open("GET", "demo_get.asp?t=" + Math.random(), true);
xhttp.send();
GET 방식으로 요청을 보내고 싶으시면, 정보를 URL에 입력해주시면 됩니다.
xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford", true);
xhttp.send();
간단한 POST 요청:
xhttp.open("POST", "demo_post.asp", true);
xhttp.send();
HTML 형식으로 POST 요청을 하려면, setRequestHeader()를 이용하여 HTTP 헤더 정보를 넣어주시면 됩니다. 그리고 send() 메소드에 보내려는 데이터정보를 넣어주시면 됩니다.
xhttp.open("POST", "ajax_test.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");
open() 메소드의 url 파라미터는 서버에 위치한 파일의 주소입니다.
xhttp.open("GET", "ajax_test.asp", true);
여기서 말하는 파일은 .txt, .xml 파일처럼 평범한 파일들, 또는 .asp, .php 와 같은 서버스크립팅 파일입니다. (서버스크립팅 파일들은 서버에서 응답을 보내기 전에 특정 일을 수행할 수 있습니다.).
ajax를 사용하려면 3번째 파라미터는 무조건 true여야 합니다.
xhttp.open("GET", "ajax_test.asp", true);
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();
xhttp.open("GET", "ajax_info.txt", false);
async=false 로 사용하게되면 더이상 AJAX를 사용하는게 아닌게 되어버립니다. 이렇게 서버로 요청을 하게되면 서버에서 응답이 오기 전까지 화면에서 아무것도 할 수 없는 상황이 발생합니다.
xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;
AJAX란? - 이벤트 종류 (0) | 2016.06.12 |
---|---|
AJAX란? - 서버로부터 응답받기 (0) | 2016.06.12 |
Ajax 란? - Ajax 시작하기 (1) | 2016.06.12 |
[jQuery] 2. jQuery Basics ( 기본 ) (0) | 2015.08.06 |
[jQuery] 1. jQuery 시작하기 (0) | 2015.08.06 |
AJAX가 뭘까요?
AJAX는 Asynchronous Javascript And Xml의 약자입니다.
이름에서 알 수 있듯이 비동기식 자바스크립트와 XML을 말합니다.
이름에 XML이 나오기는 하지만 XML을 알 필요는 없습니다.
AJAX를 사용하기 위해서는 기본적으로 HTML과 Javascript를 알고있어야 합니다.
그럼 가장먼저 AJAX가 어떻게 동작하는지에 대해서 알아보도록 할까요?
AJAX는 아래와 같은 순서를 거칩니다.
1. 클라이언트(IE 7+, 크롬, 사파리, 파이어폭스, etc. )에서 XMLHttpRequest객체를 생성하고 메시지를 담아 서버로 보낸다.
2. 서버에서 메시지를 받으면 메시지에 해당하는 정보를 읽어서 다시 브라우저한테 응답해준다.
3. 클라이언트 브라우저가 서버로부터 응답을 받으면 해당 정보를 특정 영역에 refresh해준다.
AJAX를 사용함에 있어서 가장 기본은 XMLHttpRequest 객체입니다. 이 객체는 서버로부터 데이터를 전송받을 때 사용이 됩니다. ( IE 5, 6 버전에서는 ActiveXObject 라는 객체가 사용됩니다. )
그럼 이 객체를 어떻게 만드는지 예제를 통해서 알아보겠습니다.
var xhttp;
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
자, 이제 객체를 생성했으니까 이 객체를 이용해서 메시지를 서버로 전송해야겠죠?
다음 포스팅에서 서버로 메시지를 전송해보도록 하겠습니다.
AJAX란? - 이벤트 종류 (0) | 2016.06.12 |
---|---|
AJAX란? - 서버로부터 응답받기 (0) | 2016.06.12 |
AJAX란? - 서버로 요청하기 (1) | 2016.06.12 |
[jQuery] 2. jQuery Basics ( 기본 ) (0) | 2015.08.06 |
[jQuery] 1. jQuery 시작하기 (0) | 2015.08.06 |