JQuery

비동기

lily_y 2023. 10. 16. 17:25

 

 

여러 작업을 동시에 처리하기 위해 비동기(Asynchronous) 를 통해,

특정 작업의 완료를 기다리지 않고 다른 작업을 동시에 수행이 가능하도록 하였다.

 

 

Ajax (Asynchronous JavaScript and XML)

웹에서 비동기 처리를 가능하게 하는 기술

클라이언트(방문자 컴퓨터)가 비동기 방식으로 자바 스크립트를 이용하여
              화면 전환 없이 서버(서비스 제공 컴퓨터) 측에 자료(XML, HTML, JSON, 텍스트 유형 등)를 요청할 때 사용

다른 서버에게 데이터를 요청할때 XMLHttpRequest 객체나 혹은 fetch 메서드로 요청을하게 하는데, 서버로부터 응답을 기다리는 동안에도 사용자와의 인터랙션을 유지할 수 있으므로 사용자 경험을 향상

 

 

 

 

 

 

 

 

 

 

load( ) 메서드

$(요소 선택).load(url, data, 콜백 함수)

 

사용자가 지정한 URL 주소에 데이터를 전송하고 외부 콘텐츠를 요청하여 가져올 때 사용

 

외부 HTML의 일부 요소만 불러와 지정한 요소에 삽입하고자 할 땐,

 

load( ) 함수를 사용하여 외부 파일(jquery_ajax_ news.html)의 일부 요소를 불러온 다음, 

선택한 문단 태그 에 추가하면 된다.

 

 

<head>
   <meta charset="UTF-8">
   <title> Ajax </title>
   <script src="js/jquery.js"></script>
   <script>

      $(function () {
         $("#newsWrap_1")
            .load("jquery_ajax_news.html #news_1");
         // HTML중에서 id가 news.1인걸 사이에 넣겠다

         $("#newsWrap_2")
            .load("jquery_ajax_news.html #news_2");
      });
   </script>
</head>

<body>
   <h1>LOAD 1</h1>
   <div id="newsWrap_1"></div>
   <!-- 태그에 있는 데이터를 가져와서 -->
   <h1>LOAD 2</h1>
   <div id="newsWrap_2"></div>
</body>

</html>

 

 

jquery ajax news.html 이라는 파일에서

news 1 의 태그를 꺼내와서

newsWrap 1에 넣겠다

 

 

 

$.ajax( ) 메서드

 

사용자가 지정한 URL 경로에 파일의 데이터를 전송하고 입력한 URL 경로 파일 로부터 요청한 데이터를 불러온다

텍스트, HTML, XML, JSON 형식 등을 불러올 수 있다.

선택한 요소에 Ajax를 이용해 요청한 외부 데이터를 불러온다.

중괄호 내에 다양한 옵션을 입력할 수 있다.( 속성과 값으로 이루어진다.)

 

반드시 외워야하는 ajax({})

 

 

$.ajax({
   ❶ url: "전송 페이지"(action url),
   ❷ type: "전송 방식"(get, post 방식),
   ❸ data: "전송할 데이터",
   ❹ dataType: "요청한 데이터 형식" ("html", "xml", "json", "text", "jsonp"),
   ❺ success: function(data){
             전송에 성공하면 실행될 코드;
        },
       error: function( ) {
           전송에 실패하면 실행될 코드;
       }
   });

 

❶ url에는 데이터 전송 및 요청할 외부 주소를 입력

❷ type에는 전송 방식을 입력

❸ data에는 전송할 데이터를 입력

❹ dataType은 서버로부터 받아올 데이터 형식을 지정
          데이터가 HTML일 경우에는 "html",
          XML일 경우에는 "xml",
          JSON일 경우에는 "json"이라고 입력

❺ 데이터 전송 및 요청이 정상적으로 이뤄지면 함수가 실행된다.
    이때 매개변수(result)에는 요청한 데이터가 저장됩 니다.