Ajax (Asynchronous JavaScript and XML)

Ajax | jQuery API Documentation

Ajax

 

 - 서버와 데이터를 교환하는 기술 중 하나로 페이지의 새로고침 없이 요청이 가능하다.

 - 비동기 자바스크립와 XML을 의미하며 서버와의 통신을 위해 XMLHttpRequest 객체를 사용한다.

 - 이러한 비동기성을 이용해 사용자의 이벤트 요청이 있을 경우 페이지의 일부분반 변경할 수 있다.

 

---

1. JavaScript

---

2. Jquery $.ajax() 메소드

 

Jquery는 Ajax와 관련된 다양하고도 편리한 많은 메소드를 제공하는데, 그 중에서도 '$.ajax()' 메소드는 모든 제이쿼리 Ajax 메소드의 핵심이 되는 메소드로 HTTP 요청을 만드는 강력하고도 직관적인 방법을 제공한다.

 

// 함수 원형
$.ajax( url [, settings ] )


$.ajax({
    url: 'url',  // 클라이언트가 http 요청을 보낼 서버의 URL 주소
    data: { key: value},  //http 요청과 함께 서버로 보낼 데이터
    type: 'get',  // http 요청 방식(get, post)
    dataType: 'xml'  // 서버에서 보내줄 데이터의 타입
    
    success: function(item){ ... }, // done() 메소드와 같다.
    error: function(xhr, status, errorThrown){ ... }, // fail() 메소드와 같다.
})


// http 요청이 성공하면 요청한 데이터가 done() 메소드로 전달됨.
.done(function(item) { ... })

// http 요청이 실패하면 오류와 상태에 관한 정보가 fail() 메소드로 전달됨.
.fail(function(xhr, status, errorThrown) { ... })

// http 요청이 성공하거나 실패하는 것에 상관없이 언제나 always() 메소드가 실행됨.
.always(function(xhr, status) { ... });

 

1) success / done
 웹 서버에서 전달하는 결과값을 정상적으로 읽어왔을 경우 실행되며, 이 함수의 파라미터로 서버에서 읽은 결과가 전달된다.
dataType에 'text | xml | json | json' 중 어떤 값을 지정하였는가에 따라 처리방법이 달라질 수 있다.


2) error / fail
 웹 서버로부터 응답을 정상적으로 읽어드리지 못한 경우에 실행되며, error 콜백에는 세 개의 파라미터가 전달되는데, 
각 파라미터에는 에러의 종류를 의미하는 값이 담겨져 있다.

 

(1) xhr :  JavaScript에서 Ajax를 위해 사용되는 XMLHttpRequest 객체의 원본이다.

(2) status : "error" 라는 고정적인 문자열을 갖는다.
(3) errorThrown : 에러의 원인을 의미하는 문자열을 갖는다. 404에러일경우 Page Not Found를 갖게된다.