(Front-end) Ajax
Ajax : Asynchronous JavaScript and XML
- 프레임워크나 언어를 지칭하는 것이 아닌, 대화식 웹 어플리케이션 제작 기법을 의미
- 페이지 전환 없이 JS단에서 서버에 데이터를 요청하는 것이 Ajax
- Ajax 예?
- 자동완성 기능.
- 페이스북. 페이지 이동을 하지 않고 데이터를 불러오고, 댓글이 새로고침되니까
- F12의 Network탭을 보면 주고받는 데이터를 확인할 수 있음
JSON ( JavaScript Object Notation )
자바스크립트에서 사용하는 객체 형태로 데이터를 표시하는 형식이다. json data는 eval()을 이용해 바로 js 객체로 만들 수 있다. ($.extend를 사용해도 가능할 것 같다.)
1
2
3
let json =
eval
('(' + data + ')');
data가 배열일 경우 문제가 발생하는 것을 방지하기 위해 ()로 감싸준다.
1
let json = JSON.parse(data)
그러나 서버가 JSON을 이상한 형식으로 만들어 보내는 경우, 또 서버가 프록시 역할을 하여 단순 포워딩하는 경우가 있을 수 있기 때문에 eval()을 사용하는 것 보다는 JSON.parse() 메소드를 사용하는 것이 좋다.
XMLHttpRequest
Ajax로 데이터를 주고 받을 때는 XMLHttpRequest 객체를 사용한다. Ajax는 보통 jQuery 또는 axios(react)를 사용해서 처리하게 되는데, 내부 native js에서는 이런 식으로 동작한다.
1
2
3
4
5
var request = new XMLHttpRequest();
//request.open(HTTP method, data path, sync);
request.open('GET', '/data.html', false);
request.send();
alert(request.responseText);
위는 동기 방식이고, 비동기 방식으로 구성하면 이렇게 된다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var request = new XMLHttpRequest();
request.onreadystagechange = function (event) {
if (request.readyState == 4){
if (request.status == 200) {
alert(request.responseText);
}
}
}
request.open('GET', '/data.html', ture);
request.send();
onreadystagechange이벤트는 XMLHttpRequest의 상태가 변경될 때 마다 이벤트를 호출하기 때문에, 이벤트 리스너를 연결하는 방식으로 처리할 수 있다. readyState는 데이터 수신 상태를 나타낸다. readyState == 4는 모든 데이터를 수신했음을 의미한다. HTTP Status Code는 status에 저장된다. request.status == 200으로 검사하면 응답이 200일 때만 처리할 수 있다.
jQuery Ajax
$.ajax([url,] options)
호출하면 알아서 XMLHttpRequest객체를 만들고 Ajax를 수행한다. url은 따로 첫번째 인자로 넣어도 되고, options에 속성으로 지정해도 된다.
1
2
3
4
5
6
7
8
9
10
$.ajax({
url: '/data.html',
success: function (data) {
alert(data);
}
});
Ajax Event 종류(success, error, complete, …)
Shorthand Method는 다음 세 가지. $.get(), $.post(), $.getJSON()
다른 사이트로의 Ajax는 Same-origin Policy 때문에 금지
Same-origin Policy, CORS, SameSite Cookie