donaricano-btn

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


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

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

1. 종류

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

1
handler: function(){}

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

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

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

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

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

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

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

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

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

1
handler: function(){}
 

2. 사용

1
2
3
4
5
6
$(document).ajaxStart(function(){
  console.log();
}).ajaxStop(function(){
  console.log();
}).ajaxSend(function(){
...
 

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

블로그 이미지

리딩리드

,
donaricano-btn

jQuery의  ajax - 헬퍼 함수


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


1. 종류

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

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

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


2. 사용

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

블로그 이미지

리딩리드

,
donaricano-btn

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


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


1. 단축 메서드

1). 종류

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

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

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

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

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

2). 기본 사용

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$.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) 기존의 콜백 지옥

1
2
3
4
5
6
7
8
9
$.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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
//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() 

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

1
2
3
4
5
6
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);
});
 

블로그 이미지

리딩리드

,
donaricano-btn

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


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


1 $.ajax()

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

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

2 기본 형태

1
2
3
4
$.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 코드에 따라 호출할 함수 지정

1
2
3
4
5
6
7
8
$.ajax({
  ....
  statusCode:{
    404 : function(){
      alert();
    }
  }
})

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

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

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

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

1
beforeSend:function(xor, settings){}

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

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

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

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

4 사용

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

블로그 이미지

리딩리드

,