ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • (1) Ajax 기본
      HTTP 웹/ajax 2021. 8. 25. 20:50

      1. Ajax란?

      JavaScript의 라이브러리,  Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자

       

      1-1) 정의

      브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도
      페이지의 일부만을 위한 데이터를 로드하는 기법

       

      1-2) 특징

      > 비동기 통신

      ※ Ajax의 비동기(async)방식이란?

      비동기 방식은 웹페이지를 리로드하지 않고 데이터를 불러오는 방식

      이 방식의 장점은 페이지 리로드의 경우 전체 리소스를 다시 불러와야하는데
      이미지, 스크립트 , 기타 코드등을 모두 재요청할 경우 불필요한 리소스 낭비가 발생하게 되지만

      비동기식 방식을 이용할 경우 필요한 부분만 불러와 사용할 수 있으므로 장점이 큼

       

      1-3) 사용 이유

      (a) 이유

      내글 참조: https://korshika.tistory.com/143

       

      (7) HTTP - Connectionless

      1. 연결 / 비연결성 차이 1-1) 연결 유지 모델 > Connection 유지하려고 주기를 가지고 계속 체크하면 서버 자원 소모 ( Client가 놀고 있어도 자원이 소모가 됨 ) 1-2) 비연결 모델 > 요청이 들어올 때만

      korshika.tistory.com

      1. Http는 기본적으로 3way handshake 이후, 통신을 하고 바로 connection을 끊게 되어있음
      2. 다시 connection을 하게 되면, 전체 페이지를 갱신하고, 그 페이지를 이루는 모든 데이터를 다시 서버로부터 가져오게되는 단점이 있음
      3. 다시 데이터를 받아와야할 때(사용자의 요구나, 실시간 댓글 등)
        2번처럼 전체를 받아오지 않고 필요한 부분적인 데이터만 서버에서 받아와 페이지에서 갱신해서 보여주도록 할 수 있는 방식
        → 여기서 dynamic하게 반응은 JS로 구현

      (b) 장점

      1. 모든 데이터를 가져오지 않으므로 속도가 빠름
      2. 비동기적으로 데이터를 가져오기 때문(기다리는 동안 다른 일을 처리)에 User experience가 저하되지 않음
      3. 브라우저가 blocking 되지 않음
      4. 필요한 데이터를 전반적으로 server-side에서 전송받으면 되므로 프론트 구현 양이 줄어듦
        프론트의 load가 줄어듦
      5. UI에 집중하는 프론트로 발전하게 됨

      (c) 단점

      1. 서버에 많은 부분을 요구하므로 많은 request 발생시, 서버 부하가 증가
      2. 클라이언트(브라우저)가 request를 날린 이후, 요청이 완료되기 전에 사용자가 페이지를 떠나면 전체 로직이 오작동할 수 있음

       

      1-4) Ajax와 Jquery

      Vanila JS로 구현하면 코드양이 많아짐

      > Jquery를 통해 브라우저에 독립적이게 더 단순하게 Ajax를 구현할 수 있음

      > HTTP Get / Post  모두 Ajax Jquery로 사용 가능

       

       

      2. Ajax 구현해보기

      2-1) Html page

      <!DOCTYPE html>

<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>

    <script>
      $(document).ready(function () {
        $("#getMethod").click(function () {
          var get = "GET METHOD CALL";

          //Ajax GET Method TEST
          $.ajax({
            url: "http://localhost:3000/api/get",
            dataType: "json",
            type: "GET",
            data: { data: get },
            success: function (result) {
              if (result) {
                $("#get_output").html(result.result);
              }
            },
            timeout: 1000,
            error: function () {
              alert("GET method error!");
            },
          });
        });

        $("#postMethod").click(function () {
          var post = "POST METHOD CALL";

          //Ajax POST Method TEST
          $.ajax({
            url: "http://localhost:3000/api/posts",
            dataType: "json",
            type: "POST",
            data: { data: post },
            success: function (result) {
              if (result) {
                $("#post_output").html(result.result);
              }
            },
            timeout: 1000,
            error: function () {
              alert("POST method error!");
            },
          });
        });
      });
    </script>

    <style media="screen">
      div {
        text-align: center;
      }
    </style>
  </head>

  <body>
    <h1>Ajax 기본 테스트</h1>

    <div style="border: 3px solid gray; width: 180px">
      <h2>GET</h2>

      <button id="getMethod">GET</button>

      <p id="get_output">get</p>
    </div>

    <div style="border: 3px solid gray; width: 180px">
      <h2>POST</h2>

      <button id="postMethod">POST</button>

      <p id="post_output">post</p>
    </div>
  </body>
</html>

      > [Jquery 쓰지 않는 방식 예시 ▼]

      더보기

      - EventListener로 비동기적으로, 처리가 완료되면 callback으로 프론트단에서 나머지 작업 수행

      <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <button class="ajax">ajaxbutton</button>
    <div class="result"></div>
    <script>
      //ajaxbutton을 눌렀을 때 실행되는 함수
      document.querySelector(".ajax").addEventListener("click", function () {
        var inputdata = "han";
        sendAjax("http://localhost:3000/ajax", inputdata);
      });
      //send함수 'http://localhost:3000/ajax'주소에 inputdata를 보냅니다.
      function sendAjax(url, data) {
        var data = { name: data };
        data = JSON.stringify(data);

        //data에 inputdata를 json형식으로 넣고 이를 xmlhttprequest를 통해 post방식으로 보냅니다.
        var xhr = new XMLHttpRequest();
        xhr.open("POST", url);
        xhr.setRequestHeader("Content-type", "application/json");
        xhr.send(data);

        //서버에서 결과가 도착하면 그것을 result div에 입력합니다.
        xhr.addEventListener("load", function () {
          console.log(xhr.responseText);

          document.querySelector(".result").innerHTML = xhr.responseText;
        });
      }
    </script>
  </body>
</html>

       

       

      2-2) nodejs 서버

      1) npm init

      2) npm install <package_name>

      2) node server.js

      const express = require("express");
const app = express();

//post방식으로 데이터를 받을 때 필요한 모듈입니다.
//req에 데이터를 담아줍니다.
var bodyParser = require("body-parser");
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

//cors정책을 피하기 위한 모듈
const cors = require("cors");
app.use(cors());

//받은 데이터를 다음과 같이 가공해 json을 통해 클라이언트로 보내줍니다.
//AJAX GET METHOD
app.get("/api/get", function (req, res) {
  var data = req.query.data;

  console.log("GET Parameter = " + data);

  var result = data + " Success";

  console.log(result);

  res.send({ result: result });
});

//AJAX POST METHOD
app.post("/api/post", function (req, res) {
  var data = req.body.data;

  console.log("POST Parameter = " + data);

  var result = data + " Success";

  console.log(result);

  res.send({ result: result });
});

app.listen(3000, () => {
  console.log("listen t0 3000");
});

       

      2-3) 결과

       

      참조

      https://m.blog.naver.com/jhc9639/221004675345

       

      [개발자 면접준비]#3. AJAX에 대해

      안녕하세요 루시드입니다. 요새 감기가 들어서 그런지 몸이 시큰시큰 아프네요.. 집중도 잘 안되지만.. 모...

      blog.naver.com

      https://coding-factory.tistory.com/143

       

      [Ajax] Ajax란 무엇인가?

       Ajax란? Ajax는 JavaScript의 라이브러리중 하나이며 Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자입니다. 브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 전체 페이지를..

      coding-factory.tistory.com

      https://coding-factory.tistory.com/144

       

      [Ajax] Ajax를 활용하여 다른페이지에 있는 데이터 받아오기

      이번 포스팅에서는 Ajax를 활용하여 다른페이지에있는 데이터를 받아오는 방법에 대해 알아보겠습니다. 저번 포스팅에서 말씀 드렸다시피 Ajax를 사용하지 않은 웹의 흐름에서는 갱신시 새로운 U

      coding-factory.tistory.com

       

      반응형
      저작자표시 변경금지

      댓글

    Designed by Tistory. didghwns0514@gmail.com

    티스토리툴바