Ajax 통신

 

Ajax (XMLHTTPRequest 통신)

웹에서 데이터를 갱신할때 브라우저 새로고침 없이 서버로부터 데이터를 받는 방법

function ajax(data) {
	var oReq = new XMLHttpRequest();
	oReq.addEventListener("load", function() {
 		console.log(this.responseText);
 	});    
 	oReq.open("GET", "http://www.example.org/getData?data=data");//parameter를 붙여서 보낼수있음. 
 	oReq.send();
}

 

XMLHTTPRequest 객체를 생성해서, open 메서드로 요청을 준비하고, send 메서드로 서버로 보냄

 

요청 처리가 완료되면(서버로 부터 응답이 오면) load 이벤트 발생, 콜백함수가 실행됨

 

콜백함수가 실행될 때는 이미 ajax 함수는 반환하고 콜스택에서 사라진 상태

 

jquery Ajax 코드

 

$("#request").click(function(){
	var params = {
    	name	: $("#name").val(),
        sex	: $("#sex").val(),
        age	: $("#age").val(),
        tellPh	: $("#tellPh").val()
    }
    
    $.ajax({
    	type: "POST",
        url: "/test/ajax",
        data: params,
        success: function(res){
        	alert(res.code);
        },
        error: function(XMLHttpRequest, textStatus, errorThrown){
        	alert("통신 실패.");
        }
    });
});