8.Ajax

Asynchronous Javascript XML

AJAX는 비동기 통신이다.

동기

클라이언트가 리퀘스트를 보내면 그에 대한 리스폰스가 와야 다른 리퀘스트를 보낼 수 있다.
서버에서 리퀘스트에 대한 응답이 오지 않으면 block상태에 빠진다는 단점 존재.

비동기

리퀘스트에 대한 응답을 기다리지 않고 다른 동작을 처리할 수 있다.
단점은 어느 요청이 어느 요청에 대한 응답인지 알기 어려울 수 있다. 도착순서도 정해져있지 않고 많은 응답이 있기 때문에..

ajax를 이용하지 않고 통신

$(function(){
	$("button").click(function(){

		//1.XMLHttpRequest 객체 생성
		var xhr = new XMLHttpRequest();

		//2. 통신 상태 변화에 따른 콜백함수 정의
		xhr.onreadystatechange = function(){
			if( this.readyState == 0 ){
			//open() 호출 전
			console.log( "readyState(0) - unset" );
			}else if(this.readyState ==1){
				//open() 호출 후
			console.log( "readyState(1) - set" );

			}else if(this.readyState ==2){
				//send() 호출 후
			console.log( "readyState(2) - sent" );

			}else if(this.readyState ==3){
				//loading...
			console.log( "readyState(3) - loading" );

			}else if(this.readyState ==4){
				//done
			console.log( "readyState(4) - done" );

			console.log( xhr.responseText);

			var response = eval(xhr.responseText);
			console.log(response);
			$.each(response,function(index,vo){
				console.log( index +":" + vo.name)

			})
			}

		};

		//3. open
		xhr.open("GET","/wp_js2/sample.json")

		//4. send request
		xhr.send();

	});
})

ajax를 이용하여 통신

$(function(){
	$("button").click(function(){
		$.ajax( {
			async: true,
			url : "/wp_js2/sample.json",
			type: "get",
			dataType: "json",
			data: "",
			contentType: 'application/json',
			success: function(response){
				$.each (response,function(index,vo){
					console.log(vo.name)
				})
			},
			error: function( jqXHR, status, e ){
				alert( status + " : " + e );
			}
		});
	});
});