[JS] jQuery - Ajax

 여기서는 Ajax에 관련된 jQuery메소드에 대해 알아보고자 한다. 자바스크립트에서 XMLHttpRequest객체를 활용해 보았는데 jQuery에서는 훨씬 간단하게 서버에게 데이터를 요청하고 전달받은 데이터를 조작하는 것도 더 쉽다.

Ajax는 항상 이벤트로부터 시작한다는 간단한 사실을 잊지말자!

하나씩 Ajax를 위한 메소드를 살펴보자.

$(seletor).load(url, parameters, callback)
- url : 요청이 전송되는 서버 url
- parameters : url에 전달하고자 하는 데이터
- callback : 응답 결과로 데이터를 수신한 뒤 호출되는 함수

load함수의 결과로 html의 요소로 넘겨받을 경우 호출한 객체의 자식으로 들어감. 전달받은 데이터가 html의 요소이기 때문에 웹상에서 화면에 결과를 보여주기에 용이하다.

$.get(url, parameters, callback)
url을 사용하여 서버에 파라미터 값을 url에 문자열로 삽입하여 GET전송. callback함수로 데이터를 얻음. 이 방식이나 post방식을 이용하면 text뿐만 아니라 xml문서요소도 받을 수 있다. xml일 경우 DOM객체 형식으로 부모 자식관계를 잘 이용하여 데이터를 참조해야한다.

$.post(url, parameters, callback)
url을 사용하여 서버에 파라미터 값을 본문에 삽입하여 POST전송. callback함수로 데이터를 얻음(TEXT or XML)

여기서 잠깐!
 get과 post의 의미를 좀 더 설명하자면 get 방식은 데이터를 서버로 전송할 때 url에 문자열을 붙여 전송한다. 따라서 url길이에 제한적이며 형식에 맞지 않는 문자는 encoding되어야할 필요가 있다. 또한 url에 데이터를 전송하는 방식이기 때문에 사용자가 확인 가능하다는 특징이 있다.
 post 방식은 모든 데이터를 http헤더에 포함하여 전송하는 방식이다. 따라서 길이에 제한이 없고 사용자가 볼 수 없다는 특징이 있다. 또한 get보다는 문자의 encoding의 필요성은 상대적으로 낮으나 비영어권과 같은 특수한 환경일 경우는 encoding이 필요하다.

$.getJSON(url, parameters, callback)
url을 사용하여 서버에 파라미터 값을 본문에 삽입하여 POST전송. callback함수로 JSON 데이터를 얻음(TEXT or XML)
참고로 json 객체를 얻게 되면 항상 키와 값으로 원하는 데이터를 참조한다.

$.getScript(url, callback)
url을 사용하여 서버에 GET전송

왜 스크립트를 클라이언트에서 get요청을 할까? 그 이유는 처음부터 많은 스크립트를 로드할 경우 로딩시간이 그만큼 길어지기 때문에 사용자에게 불편함을 줄 수 있고 특정한 이벤트나 자주 사용하지 않는 기능을 위한 스크립트는 나중에 로딩해주는 경우를 위해서이다.

$.ajax(options)
- options : 요청에 대한 매개변수를 정의하는 객체

options의 속성종류
url : 요청url
type : 사용 할 HTTP메서드(생략시 GET)
data : 요청에 전달될 객체(object)
dataType : 응답의 결과로 반환되는 데이터의 종류(xml, html, json, jsonp, script, text)
timeout : Ajax요청의 제한시간, 제한시간초과시 error callback 호출되거나 요청 취소
global : true : 전역함수활성 false : 전역함수비활성
contentType : 요청에 지시되는 contentType, 기본값 : "application/x-www-form-urlencoded"
success : 응답이 성공시 호출되는 함수
error : 응답이 에러상태 코드를 반환하면 호출되는 함수
complete : 요청이 완료되면 호출되는 함수(success 또는 error 후 실행)
beforeSend : 요청전송 이전에 호출되는 함수
async : true : 비동기호출, false : 동기호출
processData : flase시 url인코딩 형태로 처리되어 전달되는 데이터를 금지
ifModified : true시 헤더정보 확인하여 미변경시 요청 성공

ajax 전역함수
ajaxStart(callback)
ajaxSend(callback)
ajaxSuccess(callback)
ajaxError(callback)
ajaxComplete(callback)
ajaxStop(callback)

사용예
$(document).ready(function() {
$("#letter-d a").click(function() {
$.ajax({url:"d.xml",
dataType:"xml",
success:function(data) {
$("#dictionary").empty();
$(data).find("entry").each(function() {
$entry = $(this);
var html = "<div class='entry'>";
html += "<h3 class='term'>"+ $entry.attr("term") + "</h3>";
html += "<div class='part'>"+ $entry.attr("part") + "</div>";
html += "<div class='definition'>" + $entry.find("definition").text() + "</div>";
html += "</div>";
$("#dictionary").append(html);
});
}
});
return false;
});
});