제이쿼리 Ajax

Ajax를 이용하여 개발을 손쉽게 할 수 있도록 미리 여러 가지 기능을 포함해 놓은 개발 환경을 Ajax 프레임워크라고 합니다.

그중에서도 현재 가장 널리 사용되고 있는 Ajax 프레임워크는 바로 제이쿼리(jQuery)입니다.

 

URL 주소는 클라이언트가 HTTP 요청을 보낼 서버의 주소입니다.

옵션은 HTTP 요청을 구성하는 키와 값의 쌍으로 구성되는 헤더의 집합입니다.

 

다음 예제는 $.ajax() 메소드에서 사용할 수 있는 대표적인 옵션을 설명하는 예제입니다.

$.ajax({

    url: "/examples/media/request_ajax.php", 
	// 클라이언트가 요청을 보낼 서버의 URL 주소 & 백엔드 route로 접속해서 요청할수 있습니다.ex) /users
    
    data: { name: "홍길동" },                
    // HTTP 요청과 함께 서버로 보낼 데이터 & 백엔드로 보낼 토큰이나 캐시를 보낼수있음 
    //post 타입에서는 프론트에서 보낼 정보를 백엔드에서 받게 작업한 부분으로 보낼수 있습니다. 
    //ex)data: {user_give:userName,num_give:numVal....},
    // user_give는 백엔드에서 받게 작업 해 놓은 곳이고 userName은 프론트에서 보낼 값입니다. 
    
    type: "GET",                             
    // HTTP 요청 방식(GET, POST) get은 데이터를 받는 타입 post는 주로 db에 저장하는 타입입니다. 
    
    dataType: "json"                         
    // 서버에서 보내줄 데이터의 타입 
})
success: function(response){
    console.log(response)
    // 여기로 값을 받아서 사용한다. 
  }
  
// HTTP 요청이 성공하면 요청한 데이터가 done() 메소드로 전달됨.
.done(function(json) {

    $("<h1>").text(json.title).appendTo("body");

    $("<div class=\"content\">").html(json.html).appendTo("body");

})

// HTTP 요청이 실패하면 오류와 상태에 관한 정보가 fail() 메소드로 전달됨.

.fail(function(xhr, status, errorThrown) {

    $("#text").html("오류가 발생했습니다.<br>")

    .append("오류명: " + errorThrown + "<br>")

    .append("상태: " + status);

})

// HTTP 요청이 성공하거나 실패하는 것에 상관없이 언제나 always() 메소드가 실행됨.

.always(function(xhr, status) {

    $("#text").html("요청이 완료되었습니다!");

});

제가 사용한것보다 더 정리가 잘 되어 있는게 있어 가져와 봤습니다. 

 

 

참조 : http://tcpschool.com/ajax/ajax_intro_basic TCP school