====== jQuery - Ajax Method ======
<WRAP left notice 70%>
  * description : jQuery - Ajax Method
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2022-05-18 Wed
</WRAP>
<WRAP clear></WRAP>
\\
====Source of the article====
[[https://www.w3schools.com/jquery/jquery_ajax_intro.asp|jQuery - Ajax Introduction]]\\
\\
%%AJAX%%는 전체 페이지를 다시 로딩 하지 않고, 서버와 데이터를 교환하고 웹 페이지의 일부를 업데이트하는 기술입니다.\\

=====What is AJAX?=====
%%AJAX = Asynchronous JavaScript and XML.%%\\
\\
간단히 말해서; %%AJAX%%는 전체 페이지를 다시 로딩 하지 않고, 백그라운드에서 데이터를 로딩 하고 웹 페이지에 표시하는 것입니다.\\
\\
%%AJAX%%를 사용하는 애플리케이션의 예 : Gmail, Google Maps, Youtube 및 Facebook 탭.\\

===== What About jQuery and AJAX? =====
%%jQuery%%는 %%AJAX%% 기능을 위한 몇 가지 방법을 제공합니다.\\
\\
%%jQuery AJAX%% 메서드를 사용하면, %%HTTP Get%% 및 %%HTTP Post%% 두 개 모두 사용하여,\\ 
원격 서버에서 텍스트, %%HTML%%, %%XML%% 또는 %%JSON%%을 요청할 수 있습니다.\\
또한 외부 데이터를 웹 페이지에서 선택한 %%HTML%% 요소에 직접 로딩 할 수 있습니다!\\

  jQuery가 없으면 AJAX 코딩이 약간 까다로울 수 있습니다!
  \\
  브라우저마다 AJAX 구현 구문이 다르기 때문에 일반 AJAX 코드를 작성하는 것은 약간 까다로울 수 있습니다.
  즉, 다른 브라우저를 테스트하려면 추가 코드를 작성해야 합니다. 
  그러나 jQuery 팀이 이 문제를 처리했기 때문에, 단 한 줄의 코드로 AJAX 기능을 작성할 수 있습니다.
\\
 
===== $.ajax() 메서드 ======
\\
=== Ref Link === 
[[https://www.aladin.co.kr/shop/wproduct.aspx?ItemId=139107429&start=slayer|Do it! 자바스크립트 + 제이쿼리 입문]]\\
[[https://api.jquery.com/jquery.ajax/#jQuery-ajax-url-settings|jQuery.ajax()]]\\
사용자가 지정한 URL 경로에 파일의 데이터를 전송하고, 입력한 URL 경로 파일로부터 요청한 데이터를 불러옵니다.\\
\\
$.ajax()메소드의 기본형\\
<code jquery>
$.ajax({
   url : "데이터를 전송하고 요청할 외부 주소를 입력",
   type: "전송방식(get, post)",
   data: "전송할 데이터",
   dataType: "서버로부터 받아올 데이터 형식을 지정(html, xml, json)",
   success: function(data) {
      전송에 성공하면 실행될 코드;
   },
   error: function() {
      전송에 실패하면 실행될 코드;
   }
})
</code>
\\
$.ajax() 메소드의 옵션\\
^ 종류         ^ 설명                                                                                                                                                                                                                                       ^
| async        | 통신을 동기 또는 비동기 방식으로 설정하는 옵션입니다. 기본값은 비동기 통신 방식인 true로 설정되어 있습니다. 만일 비동기 방식으로 설정되어 있다면 사용자 컴퓨터에서 서버로 데이터를 전송하고 요청하는 동안에도 다른 작업을 할 수 있습니다.  |
| beforesend   | 요청하기 전에 함수를 실행하는 이벤트 핸들러입니다.                                                                                                                                                                                         |
| cache        | 요청한 페이지를 인터넷에 캐시(저장)할지의 여부를 설정합니다. 기본값은 true입니다.                                                                                                                                                          |
| complete     | ajax가 완료되었을 때 함수를 실행하는 이벤트 핸들러입니다.                                                                                                                                                                                  |
| contentType  | 서버로 전송할 데이터의 content-type을 설정합니다. 기본값은 application/x-www-form-urlencoded; charset=UTF-8입니다.                                                                                                                         |
| error        | 통신에 문제가 발생했을 때 함수를 실행합니다.                                                                                                                                                                                               |
| success      | Ajax로 통신이 정상적으로 이뤄지면 이벤트 핸들러를 실행합니다.                                                                                                                                                                              |
| timeout      | 통신 시간을 제한합니다. 시간 단위는 밀리초입니다.                                                                                                                                                                                          |
| type         | 데이터를 전송할 방식(get, post)을 설정합니다.                                                                                                                                                                                              |
| url          | 데이터를 전송할 페이지를 설정합니다. 기본값은 현재 페이지입니다.                                                                                                                                                                           |
| username     | HTTP 엑세스를 할 때 인증이 필요할 경우 사용자 이름을 지정합니다.                                                                                                                                                                           |

































{{tag>오션 jQuery - Ajax Method}}