Ajax

제이쿼리와 Ajax 

Ajax를 이용하여 개발을 손쉽게 할 수 있도록 미리 여러 가지 기능을 포함해 놓은 개발 환경을 Ajax 프레임워크라고 합니다. 
그중에서도 현재 가장 널리 사용되고 있는 Ajax 프레임워크는 바로 제이쿼리(jQuery)입니다.

Ajax는 웹페이지가 서버와 비동기 통신을 하는 기술들의 집합체입니다. 동기 통신도 가능합니다.

Ajax에서 사용하는 기술들은 다음과 같습니다.

 

• XHTML
• Cascading Style Sheets
• JavaScript
• XmlHttpRequest : 웹서버와 통신을 담당
• XML & JSON
• DOM

 

Ajax란?

Asynchronous JavaScript and XML 의 약자
자바스크립트를 이용해서 비동기식으로 서버와 통신하는 방식. 이 때 XML을 이용한다.
꼭 XML을 이용할 필요는 없고, 최근에는 json을 더 많이 이용한다.
비동기식이란 여러가지 일이 동시적으로 발생한다는 뜻으로, 서버와 통신하는 동안 다른 작업을 할 수 있다는 의미.

 

$.ajax(settings)

jQuery를 이용한 ajax통신의 가장 기본적인 API.

api.jquery.com/jQuery.ajax/

 

주요속성 

• data : 서버에 전송할 데이터, key/value 형식의 객체 
• dataType : 서버가 리턴하는 데이터 타입 (xml, json, script, html) 
• type : 서버로 전송하는 데이터의 타입 (POST, GET) 
• url : 데이터를 전송할 URL 
• success : ajax통신에 성공했을 때 호출될 이벤트 핸들러

jQuery를 이용한 ajax통신의 가장 기본적인 APIURL 주소는 클라이언트가 HTTP 요청을 보낼 서버의 주소입니다.
옵션은 HTTP 요청을 구성하는 키와 값의 쌍으로 구성되는 헤더의 집합입니다.

다음 예제는 $.ajax() 메소드에서 사용할 수 있는 대표적인 옵션을 설명하는 예제입니다.

$.ajax({
    url: "/examples/media/request_ajax.php", // 클라이언트가 요청을 보낼 서버의 URL 주소
    data: { name: "홍길동" },                // HTTP 요청과 함께 서버로 보낼 데이터
    type: "GET",                             // HTTP 요청 방식(GET, POST)
    dataType: "json"                         // 서버에서 보내줄 데이터의 타입
 
})
 
// HTTP 요청이 성공하면 요청한 데이터가 done() 메소드로 전달됨.
.done(function(json) {
    $("<h1>").text(json.title).appendTo("body");
    $("<div class=\"content\">").html(json.html).appendTo("body");
})
 
// HTTP 요청이 실패하면 오류와 상태에 관한 정보가 fail() 메소드로 전달됨.
.fail(function(xhr, status, errorThrown) {
    $("#text").html("오류가 발생했습니다.<br>")
    .append("오류명: " + errorThrown + "<br>")
    .append("상태: " + status);
})
 
// HTTP 요청이 성공하거나 실패하는 것에 상관없이 언제나 always() 메소드가 실행됨.
.always(function(xhr, status) {
    $("#text").html("요청이 완료되었습니다!");
});

 

Ajax 메소드

제이쿼리는 $.ajax() 메소드뿐만 아니라 Ajax와 관련된 다양한 메소드를 제공하고 있습니다.

메소드	설명
$.ajax()	비동기식 Ajax를 이용하여 HTTP 요청을 전송함.
$.get	전달받은 주소로 GET 방식의 HTTP 요청을 전송함.
$.post	전달받은 주소로 POST 방식의 HTTP 요청을 전송함.
$.getScript	웹 페이지에 스크립트를 추가함.
$.getJSON	전달받은 주소로 GET 방식의 HTTP 요청을 전송하여, 응답으로 JSON 파일을 전송받음.
load()	서버에서 데이터를 읽은 후, 읽어 들인 HTML 코드를 선택한 요소에 배치함

 

XMLHttpRequest 객체

Ajax의 가장 핵심적인 구성 요소는 바로 XMLHttpRequest 객체입니다.
Ajax에서 XMLHttpRequest 객체는 웹 브라우저가 서버와 데이터를 교환할 때 사용됩니다.
웹 브라우저가 백그라운드에서 계속해서 서버와 통신할 수 있는 것은 바로 이 객체를 사용하기 때문입니다

 

익스플로러 7과 그 이상의 버전, 크롬, 파이어폭스, 사파리, 오페라에서는 XMLHttpRequest 객체를 사용합니다.

하지만 현재 익스플로러 6과 그 이하 버전을 사용하는 사용자는 거의 없으므로, 다음과 같이 XMLHttpRequest 객체만을 사용하곤 합니다.

 

var 변수이름 = new XMLHttpRequest();
var httpRequest = new XMLHttpRequest();

 

모든 웹 브라우저에서 XMLHttpRequest 인스턴스를 제대로 생성하기 위해서는 다음과 같이 작성해야 합니다.

var httpRequest;
function createRequest() {
    if (window.XMLHttpRequest) { // 익스플로러 7과 그 이상의 버전, 크롬, 파이어폭스, 사파리, 오페라 등
        return new XMLHttpRequest();
    } else {                     // 익스플로러 6과 그 이하의 버전
        return new ActiveXObject("Microsoft.XMLHTTP");
    }
}

 

하지만 현재 익스플로러 6과 그 이하 버전을 사용하는 사용자는 거의 없으므로, 우리 수업에서는 다음과 같이 XMLHttpRequest 객체만을 사용할 것입니다.