[1회독][2주차] JQuery & Ajax

학습 내용

1. Javascript 문법에 익숙해진다.
2. jQuery로 간단한 HTML을 조작할 수 있다.
   • jQuery란 HTML의 요소들을 조작하는, 편리한 Javascript 라이브러리!
3. Ajax로 서버 API(약속)에 데이터를 주고, 결과를 받아온다.
   • AJAX란, JavaScript의 라이브러리중 하나이며 Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자이다. 브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법 이며 JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술이다.
   • Ajax 기본 코드 스니펫

$.ajax({

          type: "GET", // GET 방식으로 요청한다.

          url: "http://spartacodingclub.shop/sparta_api/seoulair",

          data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)

          success: function (response) {

            // 서버에서 준 결과를 response라는 변수에 담음

            console.log(response); // 서버에서 준 결과를 이용해서 나머지 코드를 작성

          },

        });

 

2주차 숙제

1주차 숙제 페이지인 에일리 팬명록 title에 "현재기온" 정보 추가하기 & 페이지 로딩시, 자동으로 날시 API 정보를 가져와 업데이트 하기 

 

<script>

      $(document).ready(function () {

        $.ajax({

          type: "GET",

          url: "http://spartacodingclub.shop/sparta_api/weather/cheongju",

          data: {},

          success: function (response) {

            let temp = response["temp"];

            $("#temp").text(temp);

          },

        });

      });

    </script>