Ajax

Ajax

Ajax(Asynchronous Javascript And XML)는 전체 페이지를 새로 고치지 않고 데이터를 요청하고 페이지 일부를 갱신한다. 또한, Ajax는 요청에 따른 응답을 대기하지 않고, 다른 작업을 진행하거나 사용자의 상호작용을 처리한다. 이를 비동기 처리 모델, 또는 non-blocking 처리 모델이라고 한다.

Ajax 요청과 응답 처리

브라우저는 XMLHttpRequest 객체를 이용하여 Ajax 요청을 한다. 응답은 HTML, XML, JSON 중 한 가지 형식으로 전달된다.

let url = '/test'

var xhr = new XMLHttpRequest();

// xhr.open(요청방식, URL, 비동기 여부)
xhr.open('GET', url, true);

// parameter로 전달할 추가 정보 지정 가능
xhr.send(null);

// 응답 처리
xhr.onload = finction(){
	// 정상 응답 코드
	if(xhr.status === 200){
		// deserializing
		responseObj = JSON.parse(xhr.responseText);
		...
	}
};

JSON 자바스크립트 내장함수에서 JSON 변환을 지원한다.

• JSON.stringfy() : JSON 데이터 객체를 string으로 변환
• JSON.parse() : json 형태를 가진 string을 JSON 데이터 객체로 변환

Jquery와 Ajax

JQuery도 Ajax를 처리하기 위한 문법을 제공하고 있다.

요청

응답

function ajaxTest(){
	$.getJSON('/test')
	.done(function(data){
		...
	})
	.fail(function(){
		...
	})
	.always(function(){
		...
	});
}

$.ajax()

$.ajax는 설정을 통해 모든 요청을 완벽하게 제어할 수 있다. 설정은 객체 표현식을 통해 전달된다.

function ajaxText(){
	$.ajax({
		type : "POST",
		url  : "/test",
		data : {
			"name" : "foo"
		},
		beforeSend : function(){
			$('#loadingBar').show();
		},
		complete : function(xhr, status){
			$('#loadingBar').hide();
		},
		success : function(data, status, xhr){
			alert('success!');
		},
		error : function(xhr, status, error){
			alert('error!');
		}
	});
}

XSS(Cross domain) 문제

브라우저에서의 스크립트인 Ajax 요청은 같은 도메인, 포트의 서버만이 허용 되고 외부로의 요청은 동일 출처 정책(Same Origin Policy)에 의해 차단된다.

Same Origin Policy
<script></script> 내부에서는 다른 서버로의 http request가 불가능하다.

우회 방법

1. 프록시 서버 설정
   프록시 서버를 거쳐서 요청하는 방식으로 우회.

2. JSONP(JSON with Padding) 요청
   Same Origin Policy는 스크립트 내부 에서의 요청이 차단된다는 정책이고, 다른 HTML의 태그를 비롯한 것들에서는 외부 소스의 로딩이 가능하다는 점을 이용한 것이다.

   /* 
   *  http://testServer.com/json
   *
   *  callback({
   *	"name" : "foo"
   *  })
   */
   
   <script type="text/javascript" src="http://testServer.com/jsonp?callback=callback"></script>
   
   <script>
   // callback 함수 정의
   function callback(data){
   	...
   }
   </script>

   위 소스를 보면 서버에서 리턴하는 것이 JSON 객체가 아니라 스크립트 자체를 리턴하며, 이는 ‘JSON data를 parameter로하는 callback 함수를 실행하라’ 라는 내용이다. 따라서, 이 방법을 실행하려면 서버에서 JSONP를 위해 별도로 처리를 해야하며, 클라이언트에서는 서버가 리턴하는 콜백함수 이름에 맞추어 구현해 놔야한다.

   또한, GET 방식만을 지원하며 현재는 많이 사용되지 않는 방식이다.

3. CORS(Cross Origin Resource Sharing)
   CORS는 W3C에서 내놓은 표준이며 권장사항이다. 서버쪽에서 헤더 값 핸들링을 통해 외부에서 리소스 접근을 가능하게 한다.

   • Access-Control-Allow-Origin
   • Access-Control-Allow-Credentials
   • Access-Control-Expose-Headers
   • Access-Control-Max-Age
   • Access-Control-Allow-Methods
   • Access-Control-Allow-Headers
   • Origin Request Header
   • Access-Control-Request-Method
   • Access-Control-Request-Headers

참고

• 장현희, 자바스크립트 & 제이쿼리 (인터랙티브 프론트엔드 웹 개발 교과서)