Ajax

서버 역할 : 접속자가 요청을 하면 데이터를 갖다줌

요청 ?
1. GET
: URL에 입력해서 정보를 받아오는 방법 (읽기)
2. POST
: 정보들을 숨겨서 전달하거나 요청함 (쓰기)

AJAX

: 서버에다가 GET/POST요청할 수 있게 도와주는데, 새로고침 없이 요청가능함.

 $.ajax({
      url: "https://codingapple1.github.io/hello.txt ",
      type: "GET",
    })

잘 가져왔는지 확인해보자 (done())

$.ajax({
      url: "https://codingapple1.github.io/hello.txt ",
      type: "GET",
    }).done(function (데이터) {
      console.log(데이터)
    })

실패한 경우 ? $ajax({}).fail(function(){})

항상 나오게 해야 하는 경우 ? $ajax({}).always(function(){})

데이터 바인딩하기

 $(".btn").click(function () {
      $.ajax({
        // url을 어디로 요청하는지 어케암 ?
        // API문서는 서버개발자에게 물어보면된다.
        url: "https://codingapple1.github.io/data.json",
        type: "GET",
      }).done(function (데이터) {
        console.log(데이터)
        $(".card-title").html(데이터.brand)
        $(".card-text").html(데이터.model)
        $(".card-text").append(`<p>${데이터.price}</p>`)
        $(".card-img-top").attr("src", 데이터.img)
      })
    })

JSON으로 받아온 형태 (key에도 따옴표가 쳐있다.)
{"brand" : "Hyundai", "model" : "Kona", "price" : 30000, "img" : "https://codingapple1.github.io/kona.jpg"}

Array, Object자료형 말고 JSON을 사용하는 이유 ?
: 데이터를 주고받을때, 텍스트형식이 아니면 깨질 수 있기 때문에 JSON자료형을 따로 활용한다.

JSON -> Object로 변경하기 위해서는
var 오브젝트 = JSON.parse(제이슨데이터)

Object -> JSON
var 제이슨 = JSON.stringify(오브젝트데이터)

AJax를 활용하면 자동으로 Object로 변경해주기 때문에 신경쓰지 않아도 된다.