[jQuery]jQuery의 ajax - 단축 메서드와 jqXHR객체

jQuery의  ajax - 단축 메서드와 jqXHR객체

- $.ajax 를 좀더 단순하게 사용할 수 있도록 만들었다.

1. 단축 메서드

1). 종류

- $.get(url, data, successCallback) : GET방식으로 요청을 전송하고 서버로부터 데이터를 로딩한다

- $.post() : POST 방식으로 요청을 전송하고 서버로부터 데이터를 로딩한다.

- $.getJSON() : GET방식으로 JSON형식의 인코딩된 데이터를 로딩한다. $.get() 기능과 크로스 도메인 문제를 해결하고 위한  JSONP 기법을 지원한다

- $.getScript() : GET 방식으로 서버로부터 자바스크립트 파일을 로딩한 후 실행 시킨다.

-  load(): 서버로부터 응답 받은 데이터를 선택된 HTML 요소의 콘텐츠로 대체한다

2). 기본 사용

$.get("/contact/list.jsp", function(data){ console.log(data); }); $.post("/contact/add.jsp", param, function(data){ console.log(data); }); //1.12,2.2 부터 지원 $.get({ url:"/contact/list.jsp", data:{pageno:2, pagesize:5}, timeout:1900, .... success: function(data){ .... })

2. jqXHR 객체

- $.ajax 와 단축 메서드의 리턴형식은  jqXHR이다. 

- jqXHR객체를 이용하여 jQuery 에서 제공하는 Promise 인터페이스를 사용할 수 있다.

1) 기존의 콜백 지옥

$.get("/contact/list.jsp", {pageno:1}, function(data){ console.log(data); $.get("/contact/list.jsp", {pageno:1}, function(data){ console.log(data); $.get("/contact/list.jsp", {pageno:1}, function(data){ console.log(data); }); }); });  

2) promis패턴 사용

//1. 버전 var jqxhr = $.ajax({ url: "/contact/list.jsp", type:"GET", data: {pageno:2, pagesize:5} }) jqxhr.done(function(data, status, xhr){ console.log(data); }); jqxhr.fail(function(xhr, status, error){ console.log(status); }); jqxhr.always(function(){ console.log(); }) //2. 버전 $.get("/contact/list.jsp", {pageno:1}, function(data){ console.log(""); return $.get("/contact/list.jsp", {pageno:1}); }).then(function(data){ console.log(""); return $.get("/contact/list.jsp", {pageno:1}); }).then(function(data){ console.log(); });  

3) $.when() 

- 다양한 비동기 결과를 이용하여 데이터를 처리해야 하는 경우에 사용한다

var xhr1 = $.get("/contact/list.jsp", {pageno:1}); var xhr2 = $.get("/contact/list2.jsp", {pageno:3}); $.when(xhr1, xhr2).done(function(res1, res2){ console.log(res1); });