회원가입아이디/비번찾기
홈으로
load(), Ajax로 받은 HTML을 일치하는 요소 안에 추가
6년 전
개요 : 서버로부터 데이터를 받아서 일치하는 요소 안에 HTML을 추가합니다.

.load( url [, data] [, complete(responseText, textStatus, XMLHttpRequest)] )
url 정보를 요청할 URL
data 서버에 보낼 데이터
complete(responseText, textStatus, XMLHttpRequest) 요청이 완료되면 실행될 콜백 함수
Note: 이 함수는 여기서 쓰는 것 말고 다른 용도의 쓰임새도 있습니다. .load() 입니다. jQuery는 이 함수의 인자를 보고 구분해 냅니다.
이 함수는 서버에서 데이터를 받아서 처리할 수 있는 가장 간단한 형태의 함수입니다. 성공했다는 응답이 오면(textStatus 에 "success" 나 "notmodified" 같은 데이터가 있으면), .load() 함수는 반환된 데이터를 일치되는 요소 내부에 HTML 형식으로 짚어넣어 줍니다. 아주 심플한 예제를 보시죠.
$('#result').load('ajax/test.html');
Callback Function
만일 "complete"에 해당하는 콜백함수를 작성했다면, HTML의 삽입이 완료된 후에 실행됩니다. 이 콜백함수는 jQuery 컬렉션에 있는 요소의 수 만큼 실행이 되고, this 는 각 시점의 DOM 요소를 뜻하게 됩니다.
$('#result').load('ajax/test.html', function() {
  alert('Load was performed.');
});
위 두 예제에서 나온 "result" 라는 ID를 가진 요소가 없다면 .load() 함수는 실행되지 않습니다.
Request Method
데이터를 object 형태로 보내는 경우 POST 메서드가 사용되고, 그렇지 않으면 GET이 사용됩니다.
Loading Page Fragments
.load() 함수는 원격지 문서의 특정한 요소만 선택해서 가져올 수도 있습니다. 이것을 가능하게 하려면 url 파라미터에 특정한 규칙을 사용해야 합니다. 공백을 주고 jQuery 선택자(selector)를 적어주면 그 URL에 있는 내용중에 선택자에 해당하는 부분만 가져올 수 있습니다.
예제를 보면 바로 이해할 수 있습니다.
$('#result').load('ajax/test.html #container');
위 함수가 실행되면, ajax/test.html의 문서를 탐색해서, container ID를 가진 엘리먼트의 내용을 찾아 반환해 줍니다. 이 요소의 내용이 result ID를 가진 요소내에 삽입되고, 나머지 부분은 버려집니다.
jQuery는 브라우져의 .innerHTML 속성을 사용하여 문서를 탐색하고 삽입 합니다. 이런 프로세스 중에는 <html>, <title>, <head> 요소 같은 부분을 무시하게 됩니다. 결과적으로 .load() 함수에 의해 탐색되는 문서는 완전한 전체에 해당하는 소스가 아닐 수도 있는 것입니다.
이해되시죠? 필요없는 태그들은 무시하니까 전체 소스가 아닐수도 있다는 얘기입니다.
Script Execution
선택자가 없이 .load() 함수를 사용하면, 스크립트들은 제거되기 전에 html() 함수에 의해 같이 반환됩니다. 이 스크립트는 호출한 페이지에서 실행되게 됩니다. 하지만 선택자를 포함해서 .load() 함수를 호출하면, DOM이 업데이트 되기 전에 제거되고 실행되지도 않습니다. 아래 두가지 예를 보시죠.
아래는 JavaScript가 #a 안에서 로드됩니다.
$('#a').load('article.html');
하지만, 아래는 스크립트 블록이 제거되고 실행되지도 않습니다.
$('#b').load('article.html #target');
Additional Notes: 브라우져의 보안 때문에, 대부분의 "Ajax" 요청은 same origin policy에 의거 다른 도메인, 다른 서브도메인, 다른 프로토콜 일 경우 사용할 수 없습니다.
그래서 아래 예제들도 결과를 볼 수가 없습니다. jquery.com 과 도메인이 다르기 때문이죠. 요 테스트는 직접 페이지를 구현하셔서 해보셔야 겠네요.
예 제  
http://api.jquery.com/ 메인페이지의 하단 네비게이션(footer navigation)의 목록을 가져옵니다.
<!DOCTYPE html>
<html>
<head>
  <style>
body{ font-size: 12px; font-family: Arial; }
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  
<b>Footer navigation:</b>
<ol id="new-nav"></ol>

<script>
  $("#new-nav").load("/ #jq-footerNavigation li");
</script>

</body>
</html>
미리보기
위에도 얘기했지만 도메인이 달라 Ajax가 안됩니다.

예 제  
에러가 있으면 알려줍니다.
<!DOCTYPE html>
<html>
<head>
  <style>
  body{ font-size: 12px; font-family: Arial; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  
<b>Successful Response (should be blank):</b>
<div id="success"></div>
<b>Error Response:</b>
<div id="error"></div>
  
<script>
$("#success").load("/not-here.php", function(response, status, xhr) {
  if (status == "error") {
    var msg = "Sorry but there was an error: ";
    $("#error").html(msg + xhr.status + " " + xhr.statusText);
  }
});
  </script>

</body>
</html>
미리보기

이 예제는 404에러를 일부러 낸겁니다. 에러인 경우 처리 방법을 보여주고 있네요.

예 제  
feeds.html 내용을 "feeds" ID를 가진 엘리먼트에 보여줍니다.
$("#feeds").load("feeds.html");

//Result:
<div id="feeds"><b>45</b> feeds found.</div>

예 제  
서버에 배열 데이터를 보냅니다.
$("#objectID").load("test.php", { 'choices[]': ["Jon", "Susan"] } );

예 제  
위의 예제와 같지만, 서버에 POST 로 추가적인 파라미터를 보내고, 서버에서 처리가 끝나면 콜백함수가 실행됩니다.
$("#feeds").load("feeds.php", {limit: 25}, function(){
alert("The last 25 entries in the feed have been loaded");
});

특정 요소를 선택하고 그 영역만 업데이트 해야 할 경우 이 함수를 사용합니다. 아주 유용해 보입니다. 꼭꼭 알아두셔서 두고두고 써먹으세요. 아~ 물론 get()으로 받아서 $('#some').html(returndata); 의 형식으로 쓰셔도 됩니다.
추천추천 : 307 추천 목록
번호 제목
2,880
 제이쿼리 랜덤으로 배경색 변경
2,879
 preg match에 관한 정규식
2,878
 Stream an audio file with MediaPlayer 오디오 파일 스트리밍 하기
2,877
 Audio Streaming PHP Code
2,876
 PHP $ SERVER 환경 변수 정리
2,875
 Vimeo (비메오) API 를 사용하여 플레이어 컨트롤하기
2,874
 iframe 사용시 하단에 발생하는 공백 제거방법
2,873
 아이프레임(iframe) 전체화면 가능하게 하기
2,872
 부트스트랩(bootstrapk)에서 사용하는 class명 정리
2,871
 부트스트랩 CSS
2,870
 크롬에서 마진 조절
2,869
 PHP 현재 페이지의 도메인명이나 url등의 정보 알아오기
2,868
 PHP preg match all()
2,867
 PHP 로 웹페이지 긁어오기 모든 방법 총정리!
2,866
 [PHP] 원격지 파일 주소 노출 안하고 curl로 다운로드 받기
2,865
 PHP 함수 정리
2,864
 아이프레임(iframe) 비율 유지하면서 크기 조절하는 방법
2,863
 PHP 배열에서 무작위로 하나 뽑아주는 array rand() 함수
2,862
 PHP 정규식 정리
2,861
 PHP 정규식을 활용한 태그 및 특정 문자열 제거 및 추출 방법
2,860
 php 크롤링 또는 파싱 함수, 정규식 모음
2,859
 제이쿼리 기본 명령어
2,858
 웹페이지 가로 모드세로 모드 인식하기
2,857
 모바일 웹 화면 강제 회전(가로모드 고정)
2,856
 [HTML5]에서 frameset 대체 방법과 iframe 속성
2,855
 HTML <Audio> 사용법
2,854
 윈도우10 시스템파일 손상 (초간단 오류 복구방법!!)
2,853
 PHP 파일 존재 여부 파악하기(로컬 파일 존재 및 원격지 파일 존재)
2,852
 [CSS] 박스 세로 가운데 중앙 정렬 6가지
2,851
 CSS Layout 수평 & 수직 정렬
목록
뮤직트로트 부산광역시 부산진구 가야동 ㅣ 개인정보취급방침
Copyright (C) musictrot All rights reserved.