Ajax

2020-06-18

Javascript

해당 Post는 Ajax 기술은 왜 나왔고, 어떻게 사용하는지에 대한 이해를 정리한 파일입니다.

1. AJAX와 비동기

새로고침(갱신)이 일어나지 않고, 서버 측의 데이터를 브라우저의 화면 전환 없이 서버측에 어떤 데이터를 별도로 요청해서 받아와 화면에 그려주는 것

function ajax() {
    var oReq = new XMLHTTPRequest();
    
    oReq.addEventListener("load", function() {
        console.log(this.responseText);
    });
 
    oReq.open("GET", "http://www.example.org/example.txt");
    oReq.send();
}

4라인의 익명함수는 8라인, 9라인보다 더 늦게 실행되는 함수이다. 이 익명함수는 비동기로 실행되며, 이벤트 큐에 보관되다가 load 이벤트가 발생하면(서버로부터 데이터를 브라우저가 받으면) 그 때, call stack에 실행되고 있는 함수가 없어서 비어있다면 stack에 올라와서 실행된다.

· 실제로 addEventListener()는 빨리 실행이 된다. 실행되어서 ‘ “load” 시점에 이것을 실행해야 되는구나 ‘해서 이것을 큐에 보관한다.

· 그리고 나서 addEventListener()의 역할은 끝나고, 금방 선택된 콜백함수는 이벤트 큐(메모리 공간)에 보관된다.

· 그 다음 어떤 Ajax 요청을 보내는 것으로 전송되는 open(), send() 메소드가 실행된다. 그리고 ajax() 함수는 반환..

· 그 후 어떤 Ajax 응답이 오면, 그때 이벤트 큐에 있던 정보가 이미 Ajax에서 빠져나와 나중에 실행되는 것이다

Ajax 통신(jQuery 라이브러리를 사용한 예제)을 코드단위로 어떻게 비동기로 처리되는지를 보여주는 이미지

2. Ajax응답처리

서버로부터 받아온 JSON 데이터는 문자열 형태이므로 브라우저에서 바로 실행할 수가 없습니다.

따라서 문자열을 자바스크립트객체로 변환해야 데이터에 접근할 수가 있습니다.

이를 하려면 문자열 파싱을 일일이 해야 하는 불편함이 있습니다.

서버로부터 받아온 JSON 데이터는 문자열 형태이므로 브라우저에서 바로 실행할 수 없다. 따라서 문자열을 자바스크립트 객체로 변환해야 데이터에 접근할 수 있다. 이것을 가능하게 하기 위해서는 문자열 파싱을 일일이 해야하는 불편함이 있다.
```
var oReq = new XMLHttpRequest();
oReq.addEventListener("load", function() {
  console.log(this.responseText);
});
oReq.open("GET", "./json.txt");
oReq.send();
```
· 여기서 this가 가르키는 것은 addEventListener
브라우저에서는 JSON 객체를 제공하며, 이를 활용해서 자바스크립트 객체로 변환할 수 있다.
```
var json 객체로 변환된 값 = JSON.parse("서버에서 받은 JSON 문자열");
```
3. cross domain 문제
XHR 통신은 다른 도메인 간에는 보안을 이유로 요청이 안된다.
즉 A도메인에서, B도메인으로 XHR 통신, Ajax 통신을 할 수 없다. 이를 회피하기 위해서 JSONP 라는 방법이 널리 사용되고 있다. 최근에는 CORS 라는 표준적인 방법이 제공되고 있어 이를 활용하는 경우도 등장했다.
CORS를 사용하기 위해서는 프로그램 코드에서 별도로 해야할 것이 없고, 백엔드 코드에서 헤더 설정을 해야하는 번거로움이 있다.
JSONP는 아직도 많은 곳에서 사용하는 비표준이지만 사실상 표준으로 사용하는 것으로, CORS로 가기 전에 많은 곳에서 사용 중이다.

« BOJ 2437 웹 애니메이션 이해와 setTimeout 활용 »

Ajax

1. AJAX와 비동기

2. Ajax응답처리

3. cross domain 문제