[Front-end] Ajax

 

Ajax : Asynchronous JavaScript and XML

• 프레임워크나 언어를 지칭하는 것이 아닌, 대화식 웹 어플리케이션 제작 기법을 의미
• 페이지 전환 없이 JS단에서 서버에 데이터를 요청하는 것이 Ajax
• Ajax 예?
• 자동완성 기능.
• 페이스북. 페이지 이동을 하지 않고 데이터를 불러오고, 댓글이 새로고침되니까
• F12의 Network탭을 보면 주고받는 데이터를 확인할 수 있음

 

JSON ( JavaScript Object Notation )

자바스크립트에서 사용하는 객체 형태로 데이터를 표시하는 형식이다.

json data는 ``js eval()``을 이용해 바로 js 객체로 만들 수 있다.

(``$.extend``를 사용해도 가능할 것 같다.)

```js

let json = eval('(' + data + ')');

```

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

 

```js

let json = JSON.parse(data)

```

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

 

XMLHttpRequest

Ajax로 데이터를 주고 받을 때는 ``XMLHttpRequest`` 객체를 사용한다.

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

```js

var request = new XMLHttpRequest();

//request.open(HTTP method, data path, sync);

request.open('GET', '/data.html', false);

request.send();

alert(request.responseText);

```

 

위는 동기 방식이고, 비동기 방식으로 구성하면 이렇게 된다.

```js

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

``js $.ajax([url,] options)``

호출하면 알아서 ``XMLHttpRequest`` 객체를 만들고 Ajax를 수행한다. url은 따로 첫번째 인자로 넣어도 되고, ``options``에 속성으로 지정해도 된다.

```js

$.ajax({

url: '/data.html',

success: function (data) {

alert(data);

}

});

```

 

Ajax Event 종류(success, error, complete, ...)

 

Shorthand Method는 다음 세 가지. ``js $.get(), $.post(), $.getJSON()`` 

 

다른 사이트로의 Ajax는 Same-origin Policy 때문에 금지

Same-origin Policy, CORS, SameSite Cookie

 

 

WebSocket과 Socket.io

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