자바스크립트와 웹 프론트엔드 - 4

본 내용은 https://programmers.co.kr/learn/courses/10

강의의 내용들을 한 번에 볼 수 있도록 한 것으로 자세한 내용은 본 강의를 참고하시길 바랍니다. 

 

 

Part4. Networking

1. AJAX - Request 보내기

[ AJAX : Asynchronous Javascript and XML ] -> 더 나은 사요영험

브라우저에서 페이지를 이동하지 않고 자바스크립트를 통해 HTTP Request를 보내고 받아 JS에서 처리할 수 있음

1. var req = new XMLHttpRequest();  - AJAX를 위한 객체 생성 : HTTP 요청을 만들 수 있는 새로운 객체를 생성하는 명령

2. req.open("GET", "./data.txt");  - 요청의 방식과 URL 설정 : http request method와 URL 설정

3. req.send(); - 요청 전송  

[ 응답 확인 ]

• req.response에 저장됨

• 비동기 방식으로 요청하기 때문에 send 메소드 호출 후, 바로 코드에서 접근하면 데이터가 비어 있음

• AJAX의 진행에 따라 호출되는 callback함수를 활용해야 함.

[ 브라우저 옵션 ]

--disable-web-security 옵션 : 브라우저의 보안 정책을 우회하기 위한 옵션 -> same-origin-policy등을 비활성화함

2. AJAX - Response 받아서 처리하기

• readyState 속성 : AJAX 요청에 따라 0~4까지 변화함

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

• onreadystatechange 속성 :  readyState가 변할 때마다 호출되는 콜백 함수

• status 속성 : HTTP response의 응답 헤더에 기록된 코드

200	OK
404	Not Found
500	Internal Error

• 기타 callback function 활용 가능한 속성 : onloadstart / onprogress / onabort / onerror / onload / ontimeout / onloadend

 

 

 

 

var req = new XMLHttpRequest ( );

req.onreadystatechage = function a ( ) {

             console.log(this.readyState, this.status )

             if ( this.readyState == 4 && this.status == 200 ) { // 응답을 정상적으로 수신한 경우

console.log( this.response );

 }

}

req.open(“GET”, http://google.com/ ) ;

req.send( ) ;

3. JSON ( JavaScript Object Notation )

자바스크립트의 객체를 문자열로 표현하는 방법 / 프로그램간에 전달하기 편리 (서버에서 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"}

* undefined, function 은 변환되지 않음에 주의! -> null

 

4. AJAX + JSON

• AJAX를 통해 JSON 데이터를 받아옴

var req = new XMLHttpRequest();

req.onreadystatechange = function(){

    if( this.readyState == 4 ){

           console.log(this.response);

             var data = JSON.parse(this.responnse); // JSON.parse API를 이용해 받아온 JSON 문자열 데이터를 배열 형태로 저장

             for ( var i in data ) {

var t = document.getElementById(“template”).cloneNode(ture);  // cloneNode(true)로 자식 element 까지 모두 복사

t.removeAttribute(“id”); // id “template”를 지운다.

t.children[0].innerText = data[i].id ;

t.children[0].innerText = data[i].msg;

document.body.appendChild( t );

}

    }

}

req.open("GET", JSON_DATA_URL);

req.send( );