간단한 Ajax

AJAX(Asynchronous JavaScript and XML)

---

웹 서버와 데이터를 교환하는 기술 중 하나.

• 서버(혹은 DB)에서 "데이터" 가져오기
• 사용자가 입력한 "데이터"를 서버(혹은 DB)에 저장하기

비동기적인 페이지 갱신!!

• 웹 페이지를 전체 갱신하는 것이 아닌, "일부만!"갱신

동기/비동기?

[동기:] 서버에 요청을 하고, 응답이 올때까지 "다른 작업을 하지 않고 기다리는" 것
[비동기:] 서버에 요청을 하고, 응답이 오기까지 "다른 작업을 하다가" 처리되면 그 작업을 이어가는 것

데이터 전송 형식:

1) XML
2) JSON
둘 중 하나로 전송한다.

데이터 처리:

• JavaScript

=> XML(JSON) 형식의 데이터가 들어온다

=> 해당 데이터를 해석한다(parse)

=> HTML DOM 모델을 이용하여 동적으로 갱신한다

XMLHttpRequest 객체

웹 서버와 http 통신을 위한 JS object이다.

DOM -> XML로 변환하여 송신
XML -> DOM로 변환하여 수신

 

갱신까지도.

ex. JS로 쓴 것과 jQuery로 쓴 것 비교

function getFromServer() {
    var req;
    if(window.XMLHttpRequest) { // IE7+, Chrome, Firefox..
        req = new XMLHttpRequest(); // 선언
    }
    else { // IE6, IE5
        req = ActiveXObject("Microsoft.XMLHTTP");
    }

    // 서버로부터 응답이 오면 반응하는 메소드
    req.onreadystatechange = function () {
        if(req.readyState == 4 && req.status == 200) {
            document.getElementById("target").innerHTML = req.responseText;
        }
    }

    req.open("GET", "testfile1.txt", true);
    req.send();
}

• XMLHttpRequest 객체를 선언하는 것이 포인트 1.
• "응답이 오면"에 관한 메소드인 onreadystatechange 활용이 포인트 2.
• readyState 값은 5개로 다음과 같음

-readyState 값(0~4)-
0: req 초기화 안된 상태
1: 서버랑 연결했음
2: 서버가 req 받았음
3: 서버가 req 처리중..
4: 서버가 req 처리 완료, 응답... 한다?

• req.open 메소드 인자: 송신 방식(get, post), 데이터, 비동기식 사용 여부(true or false)
• req.send 보내야 진짜 보낸거

=> jQuery로 쓰면 엄~청나게 간소화된다.

$(document).ready(function() {
    $("button").click(function() {
        $.get("testfile1.txt", function(data, status) {
            $("#target").text(data);
        });
    });
});

 

get메소드: 인자로 (요청 데이터, 요청후 처리 실행(응답=data, 상태=status) {...});

혹은 load 사용,

$(document).ready(function() {
    $("button").click(function() {
        $("#target").load("testfile1.txt");
    });
});

load 메소드: 서버로부터 데이터 가져와서 대상(element)에 집어넣어주기.
(+ 문서의 특정 부분만 로딩할 수도 있다.. load("sample.html #myPara");)

 

Ajax 통신을 위한 jQuery Methods

---

load()

위에서 설명했죠?

$.ajax() 

아래 3개의 메소드를 통합한 느낌의 메소드. POST, GET 방식 둘 다 가능.
HTML, XML, JSON, 텍스트 유형의 데이터 요청 가능.

$.post()

서버에 HTTP POST 방식 전송 후 응답 받기.

$.get()

서버에 HTTP GET 방식 전송 후 응답 받기.

$.getJSON()

서버에 HTTP GET 방식 전송 후 응답을 JSON 형식으로 받기.

$.ajax() 자세히

$.ajax({
    url: "...", // 호출하는 웹 페이지(경로 등)
    data: "...", // 서버에 데이터 전송
    dataType: "...", // "html", "xml", "json", "text"
    method: "POST", // "GET" 혹은 "POST" 중 택 1
    ...
    // 필요한 것만 써주면 된다
})
.done(function() {}); // 전송 성공 시 처리
.fail(function() {}); // 전송 실패 시 처리
.always(function() {}); // 항상 처리

 

변수에 담아서 써도 당연히 된다.

var req = $.ajax({...});

req.done(function(data, status) {...});
...