[jQuery기초] ajax

AJAX 통신

jQuery는 AJAX 통신 관련해서 다양하고 편리한 메서드들을 제공한다.
실무에서 많이 사용하는 메소드 위주로 요약해서 작성하였으며 모든 메서드나 정확한 정보들을 확인하고 싶다면 jQuery 공식 사이트 AJAX를 참조하면 된다.

 

 

메소드 

$.ajax	비동기식 Ajax를 이용하여 HTTP 요청을 전송
$.get	전달받은 주소로 GET 방식의 HTTP 요청을 전송 (데이터 요청에 많이 사용)
$.post	전달받은 주소로 POST 방식의 HTTP 요청을 전송 (데이터 전송에 많이 사용, 데이터를 캐시하지 않는다.)
$.getScript	웹 페이지에 스크립트를 추가함
$.getJSON	전달받은 주소로 GET 방식의 HTTP 요청을 전송하여 JSON 파일로 응답 받음
.load()	서버에서 데이터를 읽은 후 읽어 들인 HTML 코드를 선택한 요소에 배치

 

 

파라미터

속성
기본	type	통신 타입 설정(get, post)
url

 

 

콜백함수

함수	설명
done(callback)	요청 성공 시에 호출
fail(callback)	요청 실패 시에 호출
always(callback)	성공, 실패 관계 없이 항상 호출

 

 

$.ajax

구문

$.ajax( url [, settings ] );
$.ajax( [settings ] );

예제 1 - 파라미터로 처리

$.ajax({
  type: "get",
  url : "/index.html",
  data : {sampleInput : "sampleData"},
  success : function(response) {
  	// 성공 시 코드 작성 (response는 응답 받은 데이터)
    
  },
  error : function(xhr, textStatus, errorThrown){
    // 실패시 코드 작성
    alert(xhr);
    alert(textStatus);
    alert(errorThrown);
  }
});

예제 2 - 콜백함수로 처리

$.ajax({
  type: "get",
  url : "/url",
  data : {sampleInput : "sampleData"}
})
.done(function(data){
	// 성공 시 호출, 응답 data를 전달 받음
    
})
.fail(function(){
	// 실패 시 호출
    
})
.always(function(){
	// 항상 호출
    
});

 

 

$.get & $.post

구문

$.get(url [, data] [, success] [, dataType])
$.get([설정])

$.post(url [, data] [, success] [, dataType])
$.post([설정])

예제

$.get('/index.html', { name : 'john', age : 11 }, function(data){
	// 성공 시 호출
    
}, 'json')
.done(function(){
  // 성공 시 호출
  
})
.fail(function(){
	// 실패 시 호출
    
})
.always(function(){
	// 항상 호출
    
});

$.post('/index.html', { name : 'john', age : 11 }, function(data){
	// 성공 시 호출
    
}, 'json')
.done(function(){
	// 성공 시 호출
    
})
.fail(function(){
	// 실패 시 호출
    
})
.always(function(){
	// 항상 호출
    
});

 

get, post 차이점

get

• 서버로부터 정보를 조회하기 위해 설계된 메소드
• 요청을 전송할 때 필요한 데이터를 Header에 포함하여 전송
• 쿼리스트링을 통해 특정 페이지를 링크하거나 북마크 할 수 있으며 전송하는 길이의 제한이 있다.
• 불 필요한 요청을 제한하기 위해 캐싱할 수 있다.
• 캐싱은 한번 접근 후, 또 요청할시 빠르게 접근하기 위해 레지스터에 데이터를 저장시켜 놓는 것이다.
• url끝에 ? 뒤에 key와 value로 이루어진 파라미터로 여러개일 경우 &로 연결한다.

 

post 

• 서버의 리소스를 생성, 변경하기 위해 설계된 메소드
• 요청을 전송할 때 필요한 데이터를 body에 담아 전송
• 눈에 보이지 않아 안전하다 생각하지만 개발자도구나 데이터를 캐치하는 도구를 이용하면 내용을 확인할 수 있다.
• 요청헤더에 데이터타입을 표시해야한다.

 

$. ajaxSetup

공통적인 기본 ajax 요청을 미리 설정하는데 사용

$.ajaxSetup({
	url: "index.html"
});

// ajax 요청이 있을때마다 자동으로 ajaxSetup에 등록한 url의 값을 사용한다.
$.ajax({
	data: { "name": "yoon" }
});

 

 

load

선택자가 호출하는 유일한 jQuery ajax 메서드이며 서버에서 데이터를 읽은 후 읽어들인 HTML코드를 선택자 하위에 추가한다.
또한 선택자를 URL 주소와 함께 공백을 두고 전송할 경우 읽어들인 HTML 코드 중에서 일치하는 요소만을 하위에 추가한다.

구문

.load( url [, data] [, complete(responseText, textStatus, XMLHttpRequest)] )

예제

$('#box').load('index.html', { 'name' : 'Jhone' }, function(){
	// 요청 완료 시 호출
});

$('#box').load('index.html #container', function(){
	// 요청 완료 시 호출
});