'Front-End/jQuery'에 해당되는 글 36건

jQuery의 ajax - 전역 ajax 이벤트 처리

- 전역 ajax 이벤트는 페이지 수준에서 모든 ajax요청에 대한 공통의 이벤트 처리 기능을 지원한다.

- 개별적인 ajax 요청이후 전역 ajax 이벤트가 발생된다

1. 종류

- ajaxStart(handler) : 처리 중인  ajax 요청이 없는 상태에서 처음으로 ajax 요청이 일어날 때 발생되는 이벤트. 이미 ajax 요청이 진행 중인 상태에서 새로운 ajax 요청을 하는 경우에는 이 이벤트가 발생하지 않는다

handler: function(){}

- ajaxSend(handler): 각각의 ajax 요청이 전송되기 전에 발생되는 이벤트, 현재 ajax 요청이 진행 중이라 하더라도 매번 이벤트가 발생

handler:function(event, xhr, options){} //event: 이벤트객체 //xhr: jquey xhr 객체 //options: ajax옵션객체  

- ajaxSuccess(handler): 각각의 ajax요청에 대한 처리가 성공인 경우에 발생되는 이벤트

handler:function(event, xhr, options, data){} //event: 이벤트객체 //xhr: jquey xhr 객체 //options: ajax옵션객체 //data: 서버로부터 응답된 데이터  

- ajaxError(handler): 각각의 ajax 요청에 대해 오류가 일어 났을 때 발생

handler:function(event, xhr, options, error){} //event: 이벤트객체 //xhr: jquey xhr 객체 //options: ajax옵션객체 //error: 오류메시지  

- ajaxComplete(handler): 각각의 ajax요청이 완료되었을 때 발생되는 이벤트, 항상 발생한다

handler:function(event, xhr, options){} //event: 이벤트객체 //xhr: jquey xhr 객체 //options: ajax옵션객체  

- ajaxStop(handler) :  처리 중인 ajax 요청이 모두 완료된 상태가 되었을 때 발생

handler: function(){}  

2. 사용

$(document).ajaxStart(function(){ console.log(); }).ajaxStop(function(){ console.log(); }).ajaxSend(function(){ ...  

- 로딩 효과는 ajaxSend와 ajaxComplete 이벤트에 적합하다

jQuery의  ajax - 헬퍼 함수

- 입력데이터가 많을 때 사용할 수 있다

1. 종류

- serialize() : 폼 요소를 선택하고 호출 했을 때 입력 필드의 name특성을 이용하여 인코딩된 폼 데이터를 생성

- serializeArray(): 폼 요소를 선택하고 호출했을 때 입력 필드의 name특성을 이용하여 객체로 구성된 배열을 생성

- $.param : 객체의 배열이나 객체를 파라미터로 전달하여 인코딩된 폼 데이터를 생성한다.

2. 사용

- serialize(), serializeArray() 는 반드시 폼 요소를 선택해야한다.

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); });  

jQuery의  ajax - 저수준 인터페이스 메서드

- jQuery  ajax 는 내부적으로 xhr 객체를 이용하여 통신한다.

1 $.ajax()

- 이 메서드를 이용하면 모든 ajax 관련 처리가 가능하다.

- 단축 메서드보다 디테일한 설정이 가능하다.

2 기본 형태

$.ajax(url, settings) $.ajax(settings) -> 리턴값 : jqXHR

3 settings 속성

- url : 요청하고자 하는 서비스

- type: 요청 메서드, GET, POST, PUT, DELETE(기본값: GET)

- async: 비동기 전송을 수행할지를 지정, 동기적인 처리를 원할 경우 이 값을 false

- data: 서버로 전송하는 데이터, 문자열, 객체 , 배열 형식을 지원한다(문자열일 경우 직접 url 인코딩 필요)

- contentType: 요청 시 서버로 전달하는 데이터의 형식(기본: application/x-www-form-urlencoded)

- dataType: 서버로부터 응답받기를 원하는 데이터 타입을 지정(기본값: 추정), xml, json, script, html...

- statusCode : 서버로 부터 응답의 status 코드에 따라 호출할 함수 지정

$.ajax({ .... statusCode:{ 404 : function(){ alert(); } } })

- timeout: 요청 제한 시간(ms).  지정한 시간 이내에 응답하지 않으면 요청을 중단

- headers: 요청 시에 전달할 헤더값을 객체 형대로 지정

$.ajax({ headers:{Authrization:"[credential]", Accept:"application/json"} });

- beforeSend: 요청을 서버로 전송하기 전에 실행될 콜백 함수를 지정. 콜백 함수의 두번 째 파라미터는 요청 시에 사용한 옵션 정보

beforeSend:function(xor, settings){}

- success: 요청이 성공했을 때 실행될 콜백 함수를 지정

- error: 요청이 실패했을 때 실행될 콜백함수를 지정. 콜백 함수의 두번 째 파라미터는 상태정보를 'timeout', "error", "abort"문자 전달. 세번 째 파라미터는 에러 정보를 문자열로 전달

- complete: 요청이 완료되었을 때 실행될 콜백 함수를 지정. 항상 실행되는 함수이다.

success:function(data, status, xhr){} error: function(xhr, status, error){} function(xhr,status){}

4 사용

$.ajax({ url : "/contact/list.jsp", type: "GET", data : {pagan:2, pagesize:5}, success: function(data){ console.log(data); } })