ajax, json 개념정리

📖 ajax(Async Javascript And XML)

: 전체 페이지를 로드(새로고침)하는 동기식 통신이 아닌 일부분의 데이터만 변하기를 원할 경우 특정 부분만 로드하는 비동기식 통신이다.

XML형식으로 데이터를 주고받을 수 있어 붙여진 이름이나 json형식을 주로 이용한다.

ajax 동작순서

1. 요청(request) - 브라우저가 서버에 정보를 요청한다.

2. 서버의 동작 - 서버는 JSON, XML 등의 형식으로 데이터를 전달한다.

3. 응답(response) - 브라우저에서 이벤트가 발생하여 콘텐츠를 처리한다.

json(JavaScript Object Notation)

: 클라이언트와 서버 간 데이터 교환에 필요한 규칙, 즉 데이터 포맷으로 효과적인 데이터구조화가 가능하다. javascript 객체리터럴과 비슷하게 key : value의 표현식이나 key값은 반드시 큰따옴표("")로 감싸줘야 한다.

↓ 불러온 api를 json형식으로 파싱

🔔 자바스크립트 객체에 저장된 데이터를 서버로 전송하기 위해서는 객체를 JSON 형식의 문자열로 변경해야 한다.

→ 객체의 직렬화(serializing) : stringify( ) 메소드 사용

JSON.stringify({});                  // '{}'
JSON.stringify(true);                // 'true'
JSON.stringify('foo');               // '"foo"'
JSON.stringify([1, 'false', false]); // '[1,"false",false]'
JSON.stringify({ x: 5 });            // '{"x":5}'

🔔 서버로부터 전송받은 JSON 데이터는 문자열이다. 이 문자열을 다시 자바스크립트 객체로 변환해야 객체의 데이터에 접근해 페이지에서 사용할 HTML을 생성할 수 있다.(= 문자열 파싱)

→ 객체의 역직렬화(deserializing) : parse( ) 메소드 사용

const json = '{"result":true, "count":42}';
const obj = JSON.parse(json);

console.log(obj.count); // expected output: 42
console.log(obj.result); // expected output: true

📖 정리

JSON.stringify( ) : JavaScript Object ㅡ> JSON 데이터
JSON.parse( ) : JSON 데이터 ㅡ> JavaScript Object

일반

data : { 
    type1 : type1, 
    type2 : type2 
}

JSON 데이터로 보내기

data : JSON.stringify ({ 
    type1 : type1, 
    type2 : type2 
})

사용예시

$.ajax({
     type: "GET",
     url: "https://api.openweathermap.org/data/2.5/weather?",
     data: {},
     success: function (response) {
           $('#temp').text(response['temp'])
     }
})

let test = {
    "name" : "coco",
    "age" : 99,
    "address" : "서울시"
}
 
$.ajax ( {
    type : "POST"
    url : "test/home",
    dataType : 'json',
    contentType : 'application/json',
    data : JSON.stringify(test),
    beforeSend : function() {
        alert("ajax 호출시 실행");
    },
    success : function(res) {
    	alert("success");    
    },
    error : function(xhr) {
    	alert(xhr.responseText);
    },
    complete : function() {
        alert("ajax 호출 완료시 실행");
});

ajax 구성

• type : 서버 전송 통신 방식 지정 ( GET / POST / PUT / DELETE )

• url : 데이터를 전송할 URL

• data : 서버로 보낼 데이터

• data type

기본 값 : MIME 유형
dataType : "json" - JSON 형식의 데이터로 배열, 객체를 포함하는 문자열 (권장)
dataType : "text" - 일반적인 문자열
dataType : "html" - HTML을 포함한 문자열
dataType : "script" - 새로운 스크립트
dataType : "jsonp" - 다른 도메인으로부터 전송되는 JSON 데이터
dataType : "xml" - XML 형식의 데이터
dataType 생략 : 요청에 맞게 자동으로 형식 설정

option

• beforeSend : function() {} - HTTP 요청 전에 호출되는 함수 (return false일 경우 요청 중단)
  
• success : function() {} - HTTP 요청 성공시 호출되는 함수
  
• error : function() {} - HTTP 요청 실패시 호출되는 함수
  
• complete : function() {} - HTTP 요청 완료시 호출되는 함수 (요청 성공,실패 여부와 관계없이 실행)

출처 : https://dev-coco.tistory.com/92