Hello World

load() 본문

jQuery/Core

load()

EnterKey 2012. 9. 24. 01:47
반응형

원문 링크 arrow3.jpg http://api.jquery.com/load/

.load( url [, data] [, complete(responseText, textStatus, XMLHttpRequest)] )Returns : jQuery

개요 : 서버로부터 데이터를 받아서 일치하는 요소 안에 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); 의 형식으로 쓰셔도 됩니다. 그래도 이게 훠얼 간결해 보이겠네요.

그럼 즐프하세요.

※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.

반응형
저작자표시 비영리 변경금지

'jQuery > Core' 카테고리의 다른 글

stopPropagation, preventDefault, return false 간의 차이점  (0) 2016.04.05
jquery 체크박스 값 얻기  (0) 2012.09.23
공유하기 링크
'jQuery/Core' Related Articles more
Comments