[AJAX] xml/json 대한 AJAX 기본 동작

1. XML 읽기(기본동작코드)

function loadDoc() {
            //XMLHttpRequest 생성
            var xhttp = new XMLHttpRequest();
            //응답이 왔을때의 콜백 함수 정의. 응답이 왔어? 그럼 뭘할거냐를 정해줌
            xhttp.onreadystatechange = function () {

                if (this.readyState == 4 && this.status == 200) {
                    document.getElementById("demo").innerHTML =
                        this.responseText;
                }
            };
            xhttp.open("GET", "ajax_info.txt", true);
            xhttp.send();
        }

<코드 의미>

- this.readyState == 4 :정상완료 ( 응답이 왔으면)
- this.status == 200 : 성공 (서버입장에서 성공이라고 정했음)
- this.readyState == 404 : 파일을 못찾았다.

readyState가 4면 작동완료라는 의미

status가 200이면 서버입장에서 성공이라는 의미

 

 

2. JSON 읽기(기본동작코드)

        $(function () {
          $('#get_data_button').click(function () {
            // GET 방식
            $.getJSON('people.json', function (json) {
              console.log(json);
              // $('#demo').html(JSON.stringify(json));
              $('#demo').html(`${json.name} : ${json.skill}`);
            });
          });
        });

3. JSON 읽기(get 방식, 가장 최근 버전)

화살표 표기법(arrow function)

 function loadDoc() {
            fetch('people.json')
                .then(response => response.json())
                .then(json => {
                    console.log(json);
                    let result = `${json.name} : ${json.skill}`;
                    document.getElementById('demo').innerHTML = result;
                    document.getElementById('json').innerHTML = JSON.stringify(json);
                });
            console.log('end');
        }

 

이런 식으로 fetch의 결과를 then으로 받고 화살표를 통해 진행한다.

이를 이용하여 영화사이트의 json을 이용하여 리스트를 읽어오는 작업을 해보겠다.