JQUERY, AJAX

JQUERY

 

jQuery는 자바스크립트 라이브러리로, “write less, do more”라는 모토로 2006년 미국의 SW 개발자 존 레식(John Resig)이 발표하였다.

과거 웹 브라우저(크롬,익스플로러,사파리,파이어폭스) 간의 호환성이 좋지 않았던 시절 모든 웹 브라우저에 호환되며 짧은 코드로 다양한 기능을 다룰 수 있는 jQuery는 매우 인기 있었다.

특히 DOM을 쉽게 다룰 수 있다는 점과 jQuery를 기반으로 한 다양한 라이브러리를 사용할 수 있다는 점이 큰 장점

 

 

DOM(Document Object Model) -  웹 페이지를 이루는 태그들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리구조로 만든 객체 모델

 

 

 

 $()의 의미와 활용

 

• $ :  제이쿼리를 의미하면서 제이쿼리에 접근할 수 있는 식별자
• 괄호안에 "선택자"를 이용하여 원하는 HTML 요소를 선택하고 동작 함수를 정의하여 선택된 요소에 원하는 동작을 설정합니다.

 

.  : class

# : id

> :  자식 엘리먼트를 가리키는 것

 

<script>
    $(document).ready(function () {
        $('.gnb > li').click(function(){
           $(this).find('.lnb').stop().slideToggle(300);
        })    
    });
    function hadnleClick(target) {
      $(target).find(".lnb").stop().slideToggle(300);
    }
   
</script>
 <style>
    li {
      list-style: none;
      cursor: pointer;
      width: fit-content;
    }
    .lnb {
      list-style: none;
      display: none;
    }
 </style>
  
    <ul class="gnb">
      <li onclick="hadnleClick(this)">
        주제1
        <ul class="lnb">
          <li>가</li>
          <li>나</li>
          <li>다</li>
        </ul>
      </li>
      <li onclick="hadnleClick(this)">
        주제2
        <ul class="lnb">
          <li>가</li>
          <li>나</li>
          <li>다</li>
        </ul>
      </li>
      <li onclick="hadnleClick(this)">
        주제3
        <ul class="lnb">
          <li>가</li>
          <li>나</li>
          <li>다</li>
        </ul>
      </li>
    </ul>

 

 

jqeury를 사용하지 않는 이유

 

 jQuery가 현재 사용되지 않는 주요한 이유는 다음과 같다.

• 사용할 이유가 딱히 없다. 이제 과거와 달리 크로스 브라우징 이슈도 적어졌고, virtual DOM의 인기로 DOM을 직접 조작할 필요가 없어졌다. 또한, jQuery로 할 수 있는 대부분 기능은 바닐라 JS나 TypeScript 등으로 똑같이 구현할 수 있다.
  
  
•  무겁다. jQuery는 기존 코드를 래핑(wrapping)해서 새롭게 만든 패키지이다. 문제는 이러한 래핑이 지나치게 많고, 애초에 최적화를 위해 설계되지도 않았다는 점이다. 

 

 

 

javascript	jquery
document.getElementById(“some-id”)	$(“#some-id”)

 

jquery 쪽이 훨씬 보기 편하다.

그런데 너무 쉽다보니 $를 남발하게 되기 때문에 생각보다 $를 쓰는게 메모리와 CPU를 잡아 먹는다.

 

 

 

AJAX

• Ajax는 Asynchronous Javascript and Xml의 약자
• 이는 자바스크립트의 라이브러리 중 하나이며, 브라우저가 가지고 있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고 페이지의 일부만을 로드하는 기법. (비동기처리)
• JSON이나 XML형태로 필요한 데이터만 받아 갱신하기 때문에 그만큼의 자원과 시간을 아낄 수 있다.
• 클라이언트와 서버간에 XML 데이터를 주고받는 기술

 

 

동기 & 비동기

 

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

 

• Javascript 함수가 웹 서버에 i번 페이지의 데이터를 달라고 HTTP 요청을 보낸다.
• 웹 서버는 i번 페이지의 데이터를 JSON등의 형식으로 응답한다.
• Javascript에서 해당 JSON 내용을 분석해, HTML의 일부분을 만든다.
• Javascript에서 만든 HTML의 일부분을 현재 페이지의 내용과 바꾼다.

이러한 비동기 방식은 시간도 빠르고, 화면을 리로드하는 경우 전체 리소스를 다 가져올 필요없이 일부 필요한 부분만 가져오기 때문에 장점을 가짐.

 

 

AJAX의 통신 방식

• 사용자가 이벤트를 발생시킨다
• 자바스크립트는 DOM을 사용해 필요한 정보를 구한뒤 XMLHttpRequest객체를 통해 웹서버 요청을 전달한다
• 웹 서버는 XMLHttprequest로 부터 요청을 처리한 후 결과를 XML이나 plain-text로 생성해 XMLHttpRequest에 전송한다
• 서버에서 응답이 도착하면 XMLHttpRequest객체는 자바 스크립트에 도착사실을 알리고 자바스크립트는 응답데이터와 DOM을 이용해 사용자 화면에 반영한다

 

$.ajax ({
  // URL은 필수 요소이므로 반드시 구현해야 하는 Property입니다.
  url	: "url", // 요청이 전송될 URL 주소
  type	: "GET", // http 요청 방식 (default: ‘GET’)
  async : true,  // 요청 시 동기화 여부. 기본은 비동기(asynchronous) 요청 (default: true)
  cache : true,  // 캐시 여부
  timeout : 3000, // 요청 제한 시간 안에 완료되지 않으면 요청을 취소하거나 error 콜백을 호출.(단위: ms)
  data  : {key : value}, // 요청 시 포함되어질 데이터
  processData : true, // 데이터를 컨텐트 타입에 맞게 변환 여부
  contentType : "application/json", // 요청 컨텐트 타입 
  dataType    : "json", // 응답 데이터 형식 (명시하지 않을 경우 자동으로 추측)
  beforeSend  : function () {
    // XHR Header를 포함해서 HTTP Request를 하기전에 호출됩니다.
  },
  success : function(data, status, xhr) {
    // 정상적으로 응답 받았을 경우에는 success 콜백이 호출되게 됩니다.
    // 이 콜백 함수의 파라미터에서는 응답 바디, 응답 코드 그리고 XHR 헤더를 확인할 수 있습니다.
  },
  error	: function(xhr, status, error) {
        // 응답을 받지 못하였다거나 정상적인 응답이지만 데이터 형식을 확인할 수 없기 때문에 
        // error 콜백이 호출될 수 있습니다.
        // 예를 들어, dataType을 지정해서 응답 받을 데이터 형식을 지정하였지만,
        // 서버에서는 다른 데이터형식으로 응답하면  error 콜백이 호출되게 됩니다.
  },
  complete : function(xhr, status) {
    // success와 error 콜백이 호출된 후에 반드시 호출됩니다.
    // try - catch - finally의 finally 구문과 동일합니다.
  }
});


$.ajax({
  type: "POST",
  url: "/user/signup",
  data: {user_id: username, user_pwd: password, user_nick: nick},
  success: function (res) {
      console.log(res);
      
      if (res.result == "FAIL") {
         let error_message = (document.getElementById("signup_error").innerText = `이미 존재하는 아이디입니다.`);
         console.log(error_message);
      } 
      else {
          alert("회원가입이 완료되었습니다.");
          window.location.href = "/";
      }  
      
  },
});

 

 

---

출처 - AJAX란-무엇인가 , AJAX의-모든-것