Ajax

• Ajax는 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신
• 즉 Ajax를 이용하면 백그라운드 영역에서 서버와 통신하여, 그 결과를 웹 페이지의 일부분에만 표시

 

서버와 다음과 같은 다양한 형태의 데이터를 주고 받음

• JSOPN
• XML
• HTML
• 텍스트 파일등 

 

장점

 

1. 웹페이지를 전체 로딩하지않고 웹페이지 일부분만 변경가능
2. 웹페이지가 로드된 후에 서버로 데이터요청을 보낼 수 있음
3. 웹페에지가 로드된 후에 서버로 부터 데이터를 받을 수 있음
4. 백그라운드 영역에서 서버로 데이터를 보낼 수 있음

구성요소 

• 웹페이지의 표현을 위한 HTML과 CSS
• 데이터에 접근하거나 화면 구성을 동적으로 조작하기 위해 사용되는 DOM모델
• 데이터의 교환을 위한 JSON이나 XML
• 웹서버와의 비동기식 통신을 위한 XMLHttpRequest 객체
• 기술을 결합하여 사용자의 작업 흐름을 제어하기 위해 자바스크립트 사용

 

JQUERY 를 사용 

 

메뉴를 클릭하면 ajax로 나타내기 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
      $(function () {
        //메뉴가 클릭되었을 때 start

        let $menuObj = $("header>nav>ul>li>a");
        $menuObj.click(function () {
          let menuHref = $(this).attr("href");
          console.log("메뉴 href" + menuHref);
          
          let ajaxUrl ="";   //요청url
          let ajaxMethod = ""; //요청방식

          switch (menuHref) {
            case "login.html":
                //AJAX요청,응답
                ajaxUrl = menuHref;
                ajaxMethod = "GET";
                $.ajax({
                  url: ajaxUrl,
                  method: ajaxMethod,
                  success: function (responseData) {
                    // console.log(responseData);
                    $("section>div.articles").empty();
                    $("section>div.articles").html(responseData);
                  },
                  error: function (xhr) {
                    alert("응답실패:" + xhr.status);
                  },
                });
              return false;
            case "signup.html":
              break;
          }
        });

 

load사용

	<script>
      $(function () {
        /*--메뉴가 클릭되었을때 START--*/
        let $menuObj = $("header>nav>ul>li>a");
        $menuObj.click(function(){
          let menuHref = $(this).attr("href"); //href속성값얻기
          console.log("메뉴 href=" + menuHref);

          let ajaxUrl = ""; //요청URL
          let ajaxMethod = ""; //요청방식
          switch (menuHref) {
            case "login.html":
      $("section>div.articles").empty();
              $("section>div.articles").load(
                ajaxUrl,
                function(responseText, textStatus, jqXHR) {
                  if (jqXHR.status != 200) {
                    alert("응답실패" + jqXHR.status);
                  }
                }
              );

              return false; //기본이벤트핸들러금지, 이벤트전파중지
            // break;
            case "signup.html":
              break;
          }
        });