AJAX 방식

AJAX 란??

AJAX란 비동기 JavaScript와 XML을 말합니다.

서버측 Scripts와 통신하기 위한 XMLHttpRequest 객체를 사용하는 것을 말합니다.

서버측으로 다양한 형식 (JSON, XML, HTML 및 일반 텍스트 형식 등)의 정보를 주고 받을 수 있습니다.

AJAX의 강력한 특징은 페이지 전체를 새로고침 하지 않고서도 수행되는 "비동기성" 입니다.

  -동기식과 비동기식-

        

        동기식 방식 : 클라이언트가 서버에게 요청하고 응답이 올 때까지 기다리는 것.

        비동기식 방식 : 클라이언트가 서버에게 요청을 하고 응답이 오기 전까지 다른일을 할 수 있다.

이러한 비동기성을 통해 사용자의 Event가 있으면 전체 페이지가 아닌 일부분만을 업데이트 할 수 있다.

AJAX 문법

$.ajax({
    type : 'post',         //데이터 전송 타입
    url : '/test',         //URL
    async : false,         //비동기화 여부
    header : {             //Http header
        "Content-Type" : "application/json",
        "X-HTTP-Method-Override" : "POST"
    ),
 
    dataType : 'text',     //데이터의 타입
    data : JSON.stringify({//보낼 데이터
    "no" : no
    "name" : name
    "nick" : nick
    }),
 
    success : function (result) { //결과 성공, 성공했을시 출력되는 것
    console.log(result);
    },
 
    error : function(request, status, error) { //결과 에러, 실패했을시 출력되는 것
 
 
    }
 
})

AJAX 옵션

옵션 이름	설명
async	동기, 비동기 지정 (boolean)
complete (xhr, status)	ajax 완료 이벤트 리스너 지정 (function)
data	요청 매개변수 지정(object, string)
error (xhr, status, error)	ajax 실패 시 이벤트 리스너 지정 (function)
jsonp	JSONP 매개변수 이름 지정 (string)
jsonpCallback	JSONP 콜백함수 이름 지정 (string, function)
success (data, status, xhr)	ajax 성공 이벤트 리스너 지정 (function, array)
timeout	만료시간 지정 (number)
type	GET 또는 POST 등을 지정함
url	대상 url을 지정함

$.getJSON( ) 와 $.post( )

$.getJSON( url [, data] [, success] ) {
}
 
 
// $.getJSON은 아래 ajax 함수의 약자 이다.
 
$.ajax({
    dataType : "json",
    url : url,
    data : data,
    success : success
});
 
 
=============================================
 
 
$.post( url [, data] [, success] [, dataType] ) {
}
 
 
//$.post는 아래 ajax 함수의 약자이다.
 
$.ajax({
    type : "POST",
    url : url,
    data : data,
    success : success,
    dataType : dataType
});