AJAX / JSON

📑 AJAX

AJAX : 브라우저에서 페이지를 이동하지 않고 자바스크립트를 통해 HTTP Request를 보내고 받아 JS에서 처리할 수 있습니다.
사용자에게 더 나은 사용 경험 제공할 수 있으며 대부분의 웹사이트에서 사용되고 있는 기술입니다.

📝 AJAX 실습

1. AJAX를 위한 객체 생성

   var req = new XMLHttpRequest(); // HTTP 요청을 만들 수 있는 새로운 객체를 생성하는 명령

2. 요청의 방식과 URL 설정

   req.open("GET", "./data.txt"); // http request method와 URL 설정

3. 요청 전송위까지 작성 및 저장하면 console창에 에러가 뜨는데 이는 웹 서버를 구동하는 것이 아닌 직접 html에서 data.txt파일을 읽어오려고 하기 때문입니다. 해결방법으로는 브라우저 속성 > 바로가기 > 대상의 맨 끝에 --disable-web-security 를 추가하여 보안 옵션을 비활성화 하면 됩니다.

   req.send();

다시 돌아와서 개발자 도구 > network탭을 보면 html과 data.txt파일 응답을 받은 것을 볼 수 있습니다.
또한 console에서 req.response를 입력하면 텍스트가 저장된 것을 확인할 수 있습니다.
비동기 방식으로 요청하기 때문에 send 메소드 호출 후 바로 코드에서 접근하면 데이터가 비어 있습니다.
AJAX의 진행에 따라 호출되는 callback함수를 활용해야 합니다.

readyState 속성

AJAX 요청에 따라 0~4까지 변화합니다.

readyState 의미

• 0 : open 메소드 호출 전
• 1 : open 메소드 호출 후, send 메소드 호출 전
• 2 : 보낸 요청에 대해 응답 헤더가 수신된 후
• 3 : 응답의 바디 부분이 수신중일 때
• 4 : 모든 응답이 수신되었을 때

onreadystatechange 속성

readyState가 변할 때마다 호출되는 콜백 함수입니다.

status 속성

HTTP response의 응답 헤더에 기록된 코드
Response Code 의미

• 200 : OK
• 404 : Not Found
• 500 : Internal Error

응답을 정상적으로 수신한 경우

readyState : 4
status : 200

기타 callback function 활용 가능한 속성

• onloadstart
• onprogress
• onabort
• onerror
• onload
• ontimeout
• onloadend

🎈 JSON (Javascript Object Notification)

JSON : 자바스크립트의 객체를 문자열로 표현하는 방법입니다.
프로그램간에 전달하기 편리합니다.
서버에서는 데이터를 json형태로 전송하고 이를 수신한 브라우저는 js를 통해 이를 파싱하고 문서에 반영하게 됩니다.

🖤 JSON API

• JSON.stringify( object ) : 인자로 받은 객체를 JSON 문자열로 반환
• JSON.parse( sring ) : 인자로 받은 문자열을 Javascript Object로 변경해 반환

  var original_obj = { pi:3.14, str:"string" }; 
    var json_str = JSON.stringify( original_obj ); // 반환 문자열{"pi":3.14,"str":"string"} 
    var parsed_obj = JSON.parse( json_str ); 
    console.log( original_obj ); // {pi: 3.14, str: "string"}
    console.log( parsed_obj ); // {pi: 3.14, str: "string"}

• json은 js 객체에 담긴 데이터만 문자열로 반환하고 다시 객체로 변환하기 때문에 undefined, function 은 변환되지 않음에 주의하세요!

💖 AJAX + JSON

1. AJAX를 통해 JSON 데이터를 받아옵니다.

   var req = new XMLHttpRequest(); 
     req.onreadystatechange = function(){ if( this.readyState == 4 ){ // ... } } 
     req.open("GET", JSON_DATA_URL); req.send();

2. JSON.parse API를 이용해 받아온 JSON 문자열 데이터를 Javascript 객체로 변환합니다.

   req.onreadystatechange = function(){ 
     if( this.readyState == 4 ){ 
     data = JSON.parse(this.response); //... } 
     }

3. 데이터를 처리하는 Javascript 프로그램을 실행합니다. (HTML 문서에 반영)
   데이터가 여러개인 경우 (배열 형태로 값을 받은 경우) 반복문으로 각각의 데이터에 대해 처리합니다.

   for( var i = 0 ; i < data.length ; i++ ){ document.write(data[i].id, data[i].msg); }

출처 - https://school.programmers.co.kr/learn/courses/10