jQuery ajax - load() 메서드
예제
AJAX 요청을 사용하여 div 요소의 텍스트를 변경합니다:
$("button").click(function(){
$("div").load('demo_ajax_load.txt');
});
정의와 사용법
load() 메서드는 AJAX 요청을 통해 서버에서 데이터를 가져오고, 반환된 데이터를 지정된 요소에 배치합니다.
주석：이름이 load 의 jQuery 이벤트메서드. 호출하는 것이 파라미터에 따라 결정됩니다.
문법
load(url,data,function(response,status,xhr))
| 파라미터 | 설명 |
|---|---|
| url | 요청을 보낼 URL을 지정합니다. |
| data | 선택 사항. 요청과 함께 서버로 보낼 데이터를 지정합니다. |
| function(response, status, xhr) |
선택 사항. 요청이 완료되면 실행할 함수를 지정합니다. 추가 파라미터:
|
상세 설명
이 메서드는 서버에서 데이터를 가져오는 가장 간단한 방법입니다. 이는 $.get(url, data, success)와 거의 동일하지만, 전역 함수가 아니며 내장된 콜백 함수를 가집니다. 성공적인 응답을 감지할 때 (예: textStatus가 "success" 또는 "notmodified" 일 때), .load()는 매칭 요소의 HTML 내용을 반환 데이터로 설정합니다. 따라서 이 메서드의 대부분의 사용은 매우 간단합니다:
$("#result").load("ajax/test.html");
回调 함수를 제공하면, 포스트 프로세싱 이후에 함수가 실행됩니다:
$("#result").load("ajax/test.html", function() {
alert("Load was performed.");
});
위 두 예제에서, 현재 문서가 "result" ID를 포함하지 않으면 .load() 메서드가 실행되지 않습니다.
데이터가 객체라면 POST 메서드를 사용하며, 그렇지 않으면 GET 메서드를 사용합니다.
페이지 단편 로드
.load() 메서드는 $.get()와 달리, 삽입할 수 있는 원격 문서의 일부를 지정할 수 있습니다. 이는 URL 파라미터의 특별한 문법을 통해 이루어집니다. 이 문자열이 하나나 여러 개의 공백을 포함하면, 첫 번째 공백 뒤의 문자열은 로드할 내용을 결정하는 jQuery 선택자입니다.
위 예제를 수정하여 가져온 문서의 일부를 사용할 수 있습니다:
$("#result").load("ajax/test.html #container");
이 메서드를 실행하면 ajax/test.html의 내용을 가져옵니다. 그런 다음, jQuery는 반환된 문서를 파싱하여 컨테이너 ID를 가진 요소를 찾습니다. 이 요소와 그 내용은 결과 ID를 가진 요소에 삽입되며, 가져온 문서의 나머지 부분은 버려집니다.
jQuery는 브라우저의 .innerHTML 속성을 사용하여 가져온 문서를 파싱하고 현재 문서에 삽입합니다. 이 과정에서 브라우저는 <html>, <title> 또는 <head> 요소와 같은 요소를 필터링할 수 있습니다. 결과적으로 .load()를 통해 가져온 요소는 브라우저가 직접 가져온 문서와 완전히 다를 수 있습니다。
주석：브라우저의 보안 제한으로 인해 대부분의 "Ajax" 요청은 동원 전략을 준수합니다；다른 도메인, 서브 도메인 또는 프로토콜에서 데이터를 성공적으로 가져올 수 없습니다。
更多实例
예제 1
feeds.html 파일 내용을 로드합니다：
$("#feeds").load("feeds.html");
예제 2
위의 예제와 유사하지만 POST 형식으로 추가 파라미터를 전송하고 성공 시 메시지를 표시합니다：
$("#feeds").load("feeds.php", {limit: 25}, function(){
alert("The last 25 entries in the feed have been loaded");
});
예제 3
아래의 불연속 목록에 문서 측边栏导航 부분을 로드합니다：
HTML 코드：
<b>jQuery 링크:</b> <ul id="links"></ul>
jQuery 코드：
$("#links").load("/Main_Page #p-Getting-Started li");
更多 TIY 예제
- AJAX 요청을 생성하고 해당 요청을 통해 데이터를 전송
- data 파라미터를 사용하여 AJAX 요청을 통해 데이터를 전송하는 방법을 설명합니다。（AJAX 강의에서 설명된 예제입니다。）
- AJAX 요청을 생성하고回调 함수를 사용
- AJAX 요청에서 데이터 결과를 처리하는 방법을 function 파라미터를 사용하여 설명합니다。
- 오류가 있는 AJAX 요청을 생성
- AJAX 요청에서 오류를 처리하는 방법을 function 파라미터를 사용하여 설명합니다（XMLHttpRequest 파라미터를 사용）。
