[19]예제테스트 - 패스트푸드점 찾기 - 01

▶ Ajax 사용하여 서버와 통신하기

 

서버-클라이언트 구조

 

 

▶ Ajax란? (Asynchronous JavaScript and XML)

- 자바스크립트를 사용해 비동적으로 서버로부터 데이터를 받을 수 있는 기술.

 

▶  JSON이란?

- 서버에서 보내는 데이터 형식(xml 등등)이며 자바스크립트를 사용ㅎ는 프로그램에서 일반적으로 사용.

- 데이터를 '키'와 '값'으로 표현해놓은 표기법 

 

{
    "name":"JS 스테이크하우스",
    "phone":"010-4950-9626",
    "menuList":[{
        "name":"안심",
        "price":50000
    },{
        "name":"연어샐러드",
        "price":15000
    }]
}

 

---

패스트푸드 목록 조회를 위한 서버 API

목록 API : floating-harbor-78336.herokuapp.com//fastfood

API 설명 : floating-harbor-78336.herokuapp.com/

패스트푸드점 API

 

▶  API를 사용하여 검색기능 구현하기

const API_URL = 'http://floating-harbor-78336.herokuapp.com/fastfood';

$(function() {
    $('.btn-search').click(function() {
        $.get(API_URL, {}, function(data) {
            console.log(data);
        });
    });
});

 

▶  $.get() 함수

- 함수를 추상화하여 서버에 데이터를 요청하고 가져오는 일을 쉽게 할수 있도록 도와줌

- dataType 인자가 명시되어 있지 않으면 가장 적합할것같은 타입을 추론하여 데이터를 변환

- 자세한 설명 참고 api.jquery.com/jquery.get/

jQuery.get() | jQuery API Documentation

$.ajax({
  url: url,     //해당 인자들은 선택항목!
  data: data
  success: success,
  dataType: dataType    //'text','json','xml' 
});


$.get(API_URL, {}, function(data) {
  ...
},'text');
//API_URL = 요청할 url
//{} = 요청에 초함시킬 인자들
//function(data) {} = 응답이 왔을때 실행될 함수