🤔 Ajax ?

Ajax란 Asynchronous JavaScript and XML의 약자이다.
Ajax는 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법 중 하나이다.

Ajax는 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있다.
즉 Ajax를 이용하면 백그라운드 영역에서 서버와 통신하여, 그 결과를 웹 페이지의 일부분에만 표시할 수 있다.

이때 JSON, XML, HTML, 텍스트 파일 등과 같은 형태의 데이터를 주고받을 수 있다.

Ajax의 장점

Ajax를 이용하면 여러 장점이 있다.

1. 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있다.
2. 웹 페이지가 로드된 후에 서버로 데이터 요청을 보낼 수 있다.
3. 웹 페이지가 로드된 후에 서버로 부터 데이터를 받을 수 있다.
4. 백그라운드 영역에서 서버로 데이터를 보낼 수 있다.

Ajax의 한계

Ajax를 이용하면 여러 장점을 가지지만, Ajax로도 다음과 같은 일들은 처리할 수 없다.

1. Ajax는 클라이언트가 서버에 데이터를 요청하는 클라이언트 풀링 방식을 사용해, 서버 푸시 방식의 실시간 서비스는 만들 수 없다.
2. Ajax 스크립트가 포함된 서버가 아닌 다른 서버로 Ajax 요청을 보낼 수 없다.
3. 클라이언트의 PC로 Ajax 요청을 보낼 수 없다.

Ajax의 동작 원리

---

Ajax에 관련된 jQuery 커맨드

load(url, parmeters, callback)

URL과 매개변수로 Ajax요청을 전송, callback 함수는 요청 완료시 호출, 응답 텍스트는 일치하는 엘리먼트의 컨턴체를 대체하고 HTML 결과값일 경우 사용에 용이하다.

url : 요청이 전송되는 서버측 URL
parameters : URL에 전달하고자 하는 data
callback : 응답 결과 데이터가 일치하는 엘리먼트로 로드 된 이후 호출 되는 함수

예제

$(function(){
	$('#letter-a a').click(function(){ 
		$('#dictionary').hide().load('a.html', function(){
			$(this).fadeIn();
		});
		
		return false;
	})
});

get(url, parameters, callback), post(url, parameters, callback)

URL을 사용하여 서버에 대한 GET,POST 요청을 전송
매개변수는 쿼리 문자열로 전달

url : 요청이 전송되는 서버측 URL
parameters : URL에 덧붙이는 쿼리 문자열을 구성하기 위한 이름과 값의 쌍으로 프로퍼티를 지닌 객체
callback : 응답 결과 데이터가 일치하는 엘리먼트로 로드 된 이후 호출 되는 함수

$.getJSON(url, parameters, callback)

URL을 사용하여 서버에 대한 GET 요청을 전송
매개변수는 쿼리 문자열로 전달
응답은 JSON 문자열로 해석되며 결과는 callback함수에 전달

url : 요청이 전송되는 서버측 URL
parameters : URL에 덧붙이는 쿼리 문자열을 구성하기 위한 이름과 값의 쌍으로 프로퍼티를 지닌 객체
callback : 응답 결과 데이터가 일치하는 엘리먼트로 로드 된 이후 호출 되는 함수

예제

$(function(){
	$('#letter-b a').click(function(){
		$.getJSON('b.json', function(data){ //callback함수의 파라미터 변수에는 서버의 결과값이 온다.
			//결과값: [{},{}] -> 배열
			$('#dictionary').empty();
			$.each(data, function(index, item){
				var html = '<div class="entry">';
				html += '<h3 class="term">' + item.term + '</h3>';
				html += '<div class="part">' + item.part + '</div>';
				html += '<div class="definition">' + item.definition + '</div>';
				html += '</div>';
				
				$('#dictionary').append(html);
			});
		});
		
		return false;
	});
});

$.ajax(options)

options를 통해 Ajax 요청을 전송

options : 요청에 대한 매개변수를 정의 하는 프로퍼티 객체

$.ajax({
	url : 'b.json',
	type : 'get',
    dataType : 'json',
	success : function(data){
	}
    
    ...
})