10. REST API와 Ajax - 패스트캠퍼스 백엔드 부트캠프 3기

1. JSON이란?

• Java Script Object Notation(간단) - 자바 스크립트 객체 표기법
• xml(복잡) - 데이터 교환, data보다 Tag가 더 많음

{ 속성명 1: 속성값1, 속성명2: 속성값2, ... }
[{ 속성명: 속성값,...}, {속성명: 속성값,...},...]	// 객체 배열
{키1:{속성명: 속성값,...}, 키2:{속성명: 속성값,...},...}	// Map

2. stringify()와 parse()

• JS객체를 서버로 전송하려면, 직렬화(문자열로 변환)가 필요
• 직렬화 : 객체 데이터를 저장하거나 전송할 수 있도록 문자열로 변환하는 과정
• 서버가 보낸 데이터(JSON문자열)를 JS객체로 변환할 때, 역직렬화가 필요
• JSON.stringify() - 객체를 JSON 문자열로 변환(직렬화, JS객체 -> 문자열)
• JSON.parse() - JSON 문자열을 객체로 변환(역직렬화, 문자열 -> JS객체)

 

• JS는 동적으로 객체에 데이터 추가가능

• dir : 객체가 가지고있는 속성을 전부 보여준다.

• 객체 obj가 가진 데이터를 stringify로 문자열로 변환해서 strObj에 저장 

• strObj가 가진 문자열 데이터를 parse를 통해 원래 데이터(JS객체)로 변환

3. Ajax란?

• Asynchronous(비동기) javascript and XML - 요즘은 JSON을 주로 사용
• 비동기 통신으로 데이터를 주고 받기 위한 기술
• 웹페이지 전체(date+UI)가 아닌 일부(data)만 업데이트 가능
• 비동기 통신 : 요청을 보내두고 응답이 올때까지 기다리지 않고 다른 일을 할 수 있다.
• 콜백 함수 : 비동기 통신에서 처리가 언제 끝났는지 알 수 있게 해주는 함수

 

4. jQuery를 이용한 Ajax

$(document).ready(function(){
    let person = {name:"abc", age:10};
    let person2 = {};
    
    $("#sendBtn").click(function(){
        $.ajax({
            type:'POST',	// 요청 메서드
            url:'ch4/send',	// 요청 URI
            headers: { "content-type": "application/json"},	// 요청 헤더
            dataType: 'text',	// 전송할 데이터의 타입
            date: JSON.stringify(person),	//  서버로 전송할 데이터, stringify()로 직렬화 필요.
            success: function(result) { person2 = JSON.parse(result);	// 서버로부터 응답이 도착하면 호출될 함수
                                        alert(result);},	// result는 서버가 전송한 데이터
            error: function(){ alert("error") }	// 에러가 발생했을 때, 호출될 함수
        });	// $.ajax()
        
        alert("the request is sent")
    });
});