JQuery의 $.Ajax메소드 사용법 및 Json데이터

 jQuery의 $.ajax 메소드 

- 비동기적(동시실행)으로 웹 서버와 통신하는 기술

- 웹 페이지의 내용을 새로 고침하지 않고도 웹 서버에서 데이터를 가져오거나 서버에 데이터를 보낼 수 있으며 웹 사이트의 사용자 경험을 향상시킬 수 있다.

 

 Json (JavaScript Object Notation) 

- 웹 어플리케이션에서 정보를 주고받을 때 사용하는 데이터 포맷

-  데이터를 쉽게 인코딩 & 디코딩 할 수 있어 웹 애플리케이션에서 서버와 클라이언트 간 데이터 교환 시에 많이 사용된다.

 

   Json샘플 데이터 참고 사이트

https://jsonplaceholder.typicode.com/

JSONPlaceholder - Free Fake REST API

# 사용법

 $.ajax({
        type:"get",
        url:"https://jsonplaceholder.typicode.com/photos",
        dataType:"json",
        success:function(data){
            var temp = Handlebars.compile($("#temp").html());

            $("#list").html(temp(data));
    }
});

• type : HTTP 요청 메소드(GET, POST, PUT, DELETE 등) - > 데이터 불러올 때는 GET / 넣을 떄는 POST
• url : 요청 URL
• dataType : 응답 데이터 타입 (json, xml, html, text 등)
• success : 요청 성공 시 실행될 콜백 함수 -> data(매개변수)에 해당 url을 통해 가져온 서버의 데이터가 저장된다.

 Ajax dataType 종류 

text	텍스트 형식의 데이터 반환
xml	XML 형식의 데이터 반환
html	HTML 형식의 데이터를 반환
json	JSON 형식의 데이터를 반환
jsonp	JSONP 형식의 데이터를 반환 - 웹 페이지에서 다른 도메인으로부터 데이터를 가져올 수 있는 JSON 형식의 데이터 교환 형식이다
script	자바스크립트 파일을 반환
binary	이진 데이터를 반환