Post

(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
4
let json =
eval
('(' + data + ')');

data가 배열일 경우 문제가 발생하는 것을 방지하기 위해 ()로 감싸준다.

1
2
let json = JSON.parse(data)

그러나 서버가 JSON을 이상한 형식으로 만들어 보내는 경우, 또 서버가 프록시 역할을 하여 단순 포워딩하는 경우가 있을 수 있기 때문에 eval()을 사용하는 것 보다는 JSON.parse() 메소드를 사용하는 것이 좋다.

XMLHttpRequest

Ajax로 데이터를 주고 받을 때는 XMLHttpRequest 객체를 사용한다. Ajax는 보통 jQuery 또는 axios(react)를 사용해서 처리하게 되는데, 내부 native js에서는 이런 식으로 동작한다.

1
2
3
4
5
6
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
16
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
11
$.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

WebSocket과 Socket.io

https://d2.naver.com/helloworld/1336

This post is licensed under CC BY 4.0 by the author.