AJAX

비동기로 데이터를 전달 SPA 구현 (제이쿼리 사용하여 간단하게 구현)

Ajax methods

$.ajax() : Ajax를 이용한 http 요청 전송

$.get() : 전달받은 주소로 GET 방식의 요청 전송

$.post() : 전달받은 주소로 POST 방식의 요청 전송

$.getScript() : 웹페이지에 스크립트 추가

$.getJSON() : 전달받은 주소로 GET 방식의 HTTP 요청 전송하여, 응답으로 JSON 파일 전송받음

.load() : 서버에서 데이터를 읽은 후, 읽어 들인 HTML 코드를 선택한 요소에 배치함

 

Ajax 파라미터

url.””,         // http 주소

type:””,      // GET, POST

cache: ,      // false, true

datatype: “”,      // xml, json, html, script

data: “”,       // 서버로 데이터 전송하는 string 또는 json,   “name=”+name 이런 형태

success: function(data){ … },      // ajax 통신 성공시 실행 이벤트

error: function(request, status, error) { … }     // ajax 통신 실패시 실행 이벤트

complete: 성공실패 상관없이 호출할 함수

jsonCallbak: json방식의 콜백함수 호출

async: 동기또는 비동기방식

contentType: 콘텐츠타입 설정

timeout: 지연시간의 기준 시간 설정(밀리세컨)

 

기본예제

$.ajax({
  url: ‘http://info.com/test’,
  success: function(json){
    ...
  },
  error: function(error){
    ...
  }
});

Method chaining

$.ajax({ … }).done(function(json){ … })
  .fail(function(xhr, status, errorThrown) { … })
  .always(function(xhr, status){ … }
);

AJAX Setup  // 기본 사항들을 미리 설정한 후 ajax로 각각 호출한다

$.ajaxSetup({
  url: ‘/api/users’,
  global: false,
  type: “POST”
});

$.ajax({
  data: {‘name’: ‘Dan’}
});

$.ajax({
  data: {‘name’: ‘John’}
});