======jQuery - Ajax load() Method======
<WRAP left notice 70%>
  * description : jQuery - Ajax load() Method
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-04-19
</WRAP>
<WRAP clear></WRAP>
\\
====Source of the article====
[[https://www.w3schools.com/jquery/jquery_ajax_load.asp|jQuery - Ajax load() Method]]\\

=====jQuery load() Method=====

%%jQuery%% ''load()'' 메서드는 간단하지만 강력한 %%AJAX%% 메서드입니다.\\
\\
''load()'' 메서드는 서버에서 데이터를 로딩하고, 반환된 데이터를 선택한 요소에 넣습니다.\\
\\
====Syntax:====
<code jquery>
$(selector).load(URL,data,callback);
</code>
\\
필수 %%URL%% 매개변수는 로딩하려는 %%URL%%을 지정합니다.\\
\\
데이터 매개변수 선택은 요청과 함께 전송할 __쿼리문자열 키/값 쌍 집합__(a set of querystring key/value pairs)을 지정합니다.\\
\\
콜백 매개변수 선택은 ''load()'' 메소드가 완료된 후 실행할 함수의 이름입니다.\\
\\
**다음은 예제 파일 %%"demo_test.txt"%%의 내용입니다.:**\\
\\
<code jquery>
<h2>jQuery and AJAX is FUN!!</h2>
<p id="p1">This is some text in a paragraph.</p>
</code>
\\
다음 예제는 %%"demo_test.txt"%% 파일의 콘텐츠를 특정 ''%%<div>%%'' 요소로 로딩 합니다:\\

====예제====
<code jquery>
    $(document).ready(function () {
      $("button").click(function () {
        $("#div1").load("demo_test.txt");
      });
    });
</code>
\\
%%URL%% 매개변수에 %%jQuery%% 셀렉터를 추가할 수도 있습니다.\\
\\
다음 예제는 "demo_test.txt"파일 내부에서 %%id="p1"%%를 가진 요소의 콘텐츠를 특정 ''%%<div>%%'' 요소에 로딩합니다.\\

====예제====
<code jquery>
    $(document).ready(function () {
      $("button").click(function () {
        $("#div1").load("demo_test.txt #p1");
      });
    });
</code>
\\
콜백 매개 변수 선택은 ''load()'' 메서드가 완료 될 때, 실행할 콜백 함수를 지정합니다.\\ 
콜백 함수는 아래와 같은 다른 매개 변수를 가질 수 있습니다.\\

  * ''responseTxt'' - 호출이 성공한 경우, 결과 콘텐츠를 포함합니다
  * ''statusTxt'' - 호출 상태를 포함합니다
  * ''xhr-XMLHttpRequest'' - XMLHttpRequest 오브젝트를 포함합니다
\\
다음 예제에서는 %%load()%% 메서드가 완료된 후, 경고 상자(alert box)를 표시합니다.\\ 
''load()'' 메서드가 성공하면, "External content loaded successfully!"가 표시되고, 실패하면 오류 메시지가 표시됩니다.\\

====예제====
<code jquery>
    $(document).ready(function () {
      $("button").click(function () {
        $("#div1").load("demo_test.txt", function (responseText, statusTxt, xhr) {
          if (statusTxt == "success")
            alert("External content loaded successfully!");
          if (statusTxt == "error")
            alert("Error: " + xhr.status + ": " + xhr.statusText);
        });
      });
    });
</code>


=====jQuery AJAX Reference=====
모든 %%jQuery AJAX%% 메서드에 대한 전체 개요를 보려면, [[https://www.w3schools.com/jquery/jquery_ajax_load.asp|jQuery AJAX Reference]]로 이동하십시오.\\


{{tag>오션 jQuery - Ajax load() Method}}