웹개발 2주차 (5) - Ajax

▶현재 시간 : 2022년 10월 17일 3:35 P.M.

 

오늘은 ajax 시작할 시간이다!

다듬고 또 다듬어 보자! :) 

튜터님이랑 하면 쉬운데 혼자하면 아직 손에 익지 않아서 인지 시간이 좀 걸린다. 계속하면 좋아지겠지!

 

 

 

▶Ajax 시작하기

Ajax란?

• Ajax는 Asynchronous Javascript and Xml의 약자입니다.
• 이는 자바스크립트의 라이브러리 중 하나이며, 브라우저가 가지고 있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고 페이지의 일부만을 로드하는 기법입니다.
• 자바스크립트를 사용한 비동기 통신이며, 클라이언트와 서버간에 XML 데이터를 주고받는 기술입니다.
• AJAX라는 네트워크 기술을 이용하여 클라이언트에서 서버로 데이터를 요청하고 그에 대한 결과를 돌려받을 수 있다. 간단하게 말하면 서버와 클라이언트(나)와의 통신이다

왜 Ajax를 쓰나요?

• 단순하게 웹에서 무언가를 부르거나 데이터를 조회하고 싶은 경우, 페이지 전체를 새로고침하지 않기 위해 사용한다고 볼 수 잇습니다.
• 일반적으로 HTTP 프로토콜은 단방향 통신입니다. 그렇기 때문에 클라이언트에서 요청을 보내고, 서버쪽에서 응답을 받으면 연결이 끊어집니다. 그래서 화면의 내용을 갱신하기 위해서는 다시 요청을 보내고 응답을 받으며 페이지 전체를 갱신해야합니다. 다만, 이러한 경우에는 엄청난 자원낭비와 시간낭비를 겪게 됩니다.
• Ajax는 Http 페이지 전체가 아닌 일부만 갱신가능하도록, XMLHttpRequest 객체를 통해서 서버에 요청합니다. 이 경우에는 Json이나 XML형태로 필요한 데이터만 받아 갱신하기 때문에 그만큼의 자원과 시간을 아낄 수 있습니다.

 

 

Ajax의 장점

• 웹페이지의 속도 향상
• 서버의 처리가 완료 될때까지 기다리지 않고 처리가 가능합니다.
• 서버에서 Data만 전송하면 되므로 전체적인 코드의 양이 줄어듭니다.
• 기존 웹에서는 불가능했던 다양한 UI를 가능하게 해줍니다.

Ajax의 단점

• 히스토리 관리가 안됩니다.
• 페이지가 이동하지 않는 통신이므로 보안에 신경을 써야합니다.
• 연속으로 데이터를 요청하면 서버 부하가 증가할 수 있습니다.
• XMLHttpRequest를 통해 통신을 하는 경우, 사용자에게 아무런 진행정보를 주지 않기 때문에 사용자가 요청이 완료가 안되었는데 페이지를 떠날 수도 있습니다.
• HTTP 클라이언트의 기능이 한정되어 있습니다.
• 지원하는 Charset이 한정적입니다.
• Script로 작성되므로 디버깅이 어렵습니다.
• Cross-Domain 문제가 발생합니다. (다른 도메인과 통신이 불가능합니다.)

 

 

 

※ 참고! Ajax는 jQuery를 임포트한 페이지에서만 동작 가능합니다. 즉, http://google.com/ 과 같은 화면에서 개발자도구를 열면, jQuery가 임포트 되어있지 않기 때문에 아래와 같은 에러가 뜹니다.

Uncaught TypeError: $.ajax is not a function → ajax라는 게 없다는 뜻

 

 

▶Ajax 기본 골격

$.ajax({
  type: "GET",
  url: "여기에URL을입력",
  data: {},
  success: function(response){
    console.log(response)
  }
})

$.ajax({
  type: "GET", // GET 방식으로 요청한다.
  url: "http://spartacodingclub.shop/sparta_api/seoulair",
  data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
  success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
    console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
  }
})

•  

• • type: "GET" → GET 방식으로 요청한다.
  • url: 요청할 url
  • data: 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요) . POST 요청은,  data : {} 에 넣어서 데이터를 가져갑니다.   data: { param: 'value', param2: 'value2' },
  •  👉 리마인드 GET 요청은, url뒤에 아래와 같이 붙여서 데이터를 가져갑니다. http://naver.com?param=value¶m2=value2
  • success: 성공하면, response 값에 서버의 결과 값을 담아서 함수를 실행한다.
  • 👉 결과가 어떻게 response에 들어가나요? → 받아 들이셔야 합니다.

success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
  console.log(response) 
}

 

 

▶Ajax 통신의 결과값을 이용해보기

• 위에서 했던 Ajax 통신을 발전시켜볼게요!

$.ajax({
  type: "GET", // GET 방식으로 요청한다.
  url: "http://spartacodingclub.shop/sparta_api/seoulair",
  data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
  success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
    console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
  }
})

 

 

• 개발자도구 콘솔에 찍어보기

$.ajax({
  type: "GET",
  url: "http://spartacodingclub.shop/sparta_api/seoulair",
  data: {},
  success: function(response){
		// 값 중 도봉구의 미세먼지 값만 가져와보기
		let dobong = response["RealtimeCityAir"]["row"][11];
		let gu_name = dobong['MSRSTE_NM'];
		let gu_mise = dobong['IDEX_MVL'];
		console.log(gu_name, gu_mise);
  }
})

 

 

• 미세먼지 데이터가 어디에 있는지 찾기

 

$.ajax({
  type: "GET",
  url: "http://spartacodingclub.shop/sparta_api/seoulair",
  data: {},
  success: function(response){
		let mise_list = response["RealtimeCityAir"]["row"]; // 꺼내는 부분!
		console.log(mise_list);
  }
})

 

 

• 반복문으로 구 데이터를 출력해보기

$.ajax({
  type: "GET",
  url: "http://spartacodingclub.shop/sparta_api/seoulair",
  data: {},
  success: function (response) {
    let mise_list = response["RealtimeCityAir"]["row"];
    for (let i = 0; i < mise_list.length; i++) {
      let mise = mise_list[i];
      console.log(mise);
    }
  },
});

 

 

• 구 데이터에서 구 이름, 미세먼지 수치를 골라내어 출력하기

$.ajax({
  type: "GET",
  url: "http://spartacodingclub.shop/sparta_api/seoulair",
  data: {},
  success: function (response) {
    let mise_list = response["RealtimeCityAir"]["row"];
    for (let i = 0; i < mise_list.length; i++) {
      let mise = mise_list[i];
      let gu_name = mise["MSRSTE_NM"];
      let gu_mise = mise["IDEX_MVL"];
      console.log(gu_name, gu_mise);
    }
  }
});

 

 

 

▶완성된 코드

<!doctype html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>jQuery 연습하고 가기!</title>

    <!-- jQuery를 import 합니다 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <style type="text/css">
        div.question-box {
            margin: 10px 0 20px 0;
        }

        .bad {
            color: red;
        }
    </style>

    <script>
        function q1() {
            $('#names-q1').empty()
            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/seoulair",
                data: {},
                success: function (response) {
                    let rows = response['RealtimeCityAir']['row']
                    for (let i = 0; i < rows.length; i++) {
                        let gu_name = rows[i]['MSRSTE_NM']
                        let gu_mise = rows[i]['IDEX_MVL']

                        let temp_html = ``

                        if (gu_mise > 40) {
                            temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`
                        } else {
                            temp_html = `<li>${gu_name} : ${gu_mise}</li>`
                        }

                        $('#names-q1').append(temp_html)
                    }
                }
            })
        }
    </script>

</head>

<body>
<h1>jQuery+Ajax의 조합을 연습하자!</h1>

<hr/>

<div class="question-box">
    <h2>1. 서울시 OpenAPI(실시간 미세먼지 상태)를 이용하기</h2>
    <p>모든 구의 미세먼지를 표기해주세요</p>
    <p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p>
    <button onclick="q1()">업데이트</button>
    <ul id="names-q1">

    </ul>
</div>
</body>

</html>