웹 페이지의 내용을 동적으로 교체하기 위해서 Ajax로 서버에서 데이터 json 형식으로 받아 HTML 요소를 생성하여 페이지내의 원하는 위치의 내용을 바꾸는 작업을 많이 합니다. jQuery의 .load() 메소드는 주어진 URL로부터 HTML 데이트를 받에서 jQuery 셀렉터로 선택된 위치에 넣어 줌으로써 동적으로 페이지의 내용을 교체하는 작업을 간단하게 처리할 수 있도록 해줍니다.
아래 코드는 간단한 사용법을 보여주고 있습니다. 페이지내에서 아이디(id)가 "result" 인 요소를 선택하고 그 요소의 내용을 "load/test.php" 페이지가 반환하는 내용으로 채웁니다.
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(function() {
$("#result").load("data.php");
});
//]]>
</script>
<div id="result"></div>
jQuery .load() 메소드 사용법은 다음과 같습니다. 세 가지 인자를 가질 수 있습니다.
.load( url [, data ] [, complete ] ) 반환값: jQuery
- url : 데이터를 받을 URL을 나타내는 문자열입니다.
- data : 선택적인 인자로 URL 로 요청을 보낼 때 같이 보낼 데이터로 자바스크립트 객체 또는 문자열 입니다.
- complete : 요청이 완료되면 호출되어질 콜백함수 입니다. Function( String responseText, String textStatus, jqXHR jqXHR )
성공적인 응답이 감지 되었을 경우("textStatus" 가 "success" 또는 "notmodified" 일때) .load() 메소드는 반환된 데이터를 매치된 요소의 HTML 컨텐츠로 설정합니다. 만약 셀렉터에 의해 매칭된 요소가 없다면 (이 경우, 만약 문서가 id="result" 인 요소를 포함하고 있지 않다면 ) Ajax 요청은 보내어지지 않습니다.
콜백 함수(Callback Function)
만약 "complete" 콜백이 제공되어 진다면, 그것은 후처리와 HTML 삽입이 수행되어진 다음에 실행되어집니다. jQuery 선택자로 여러개의 요소가 선택되었다면 콜백은 jQuery 콜렉션내의 각 요소에 대해 한번씩 실행되어 집니다. 그리고, this 는 각 DOM 요소가 차례로 설정되어집니다.
$("#result").load("data.php", funcion() {
alert("Load was performed.");
});
위의 두 예제에서 만약 현재 문서가 id="result" 인 요소를 포함하고 있지 않다면, .load() 메소드는 실행되지 않습니다.
HTTP 요청 메소드(Request Method)
두 번째 인자인 data가 주어지면 POST 메소드로 보내어지고, 그 외의 경우에는 GET 방식으로 보내어집니다.
받은 페이지의 일부만 사용하기
.load() 메소드는 원격에서 받은 문서에서 삽입 되어질 부분을 지정할 수 있습니다. 이것은 url 파라미터에 대한 특수한 구문을 사용하여 처리합니다. 하나 이상의 공백이 문자열에 포함되어 있으면 첫 번째 공백 다음의 문자열 부분은 로드 할 내용을 결정하는 jQuery 셀렉터로 간주됩니다.
위의 예제를 수정하여 가져온 문서의 일부만 사용하도록 할 수 있습니다.
$("#result").load("data.php #container");
이 메소드가 실행될 때 그것은 data.php 의 내용을 가져옵니다. 그러나 jQuery는 반환된 문서를 파싱하여 container라는 ID를 가진 요소를 찾습니다. 이 요소와 요소에 포함된 내용이 result라는 ID를 가진 요소에 삽입됩니다. 그리고 나머지 반환된 내용은 버려집니다.
jQuery는 브라우저의 .innerHTML 프로퍼티를 사용하여 가져온 문서를 파싱하고 현재 문서에 삽입합니다. 이 작업을 하는 동안 브라우저는 종종 문서에는 <html>, <title> 또는 <head> 와 같은 요소들을 걸러냅니다. 그 결과로 .load() 메소드에 의해 가져온 요소들은 문서가 직접 브라우저로 가져온 문서와 정확히 같지 않을 수 있습니다.
스크립트 실행
셀렉터를 나타내는 접미사가 없는 URL을 사용하여 .load()를 호출할 때 받은 컨텐츠는 스크립트가 제거되기에 앞서 .html() 메소드로 보내어집니다. 이것은 스크립트가 버려지기전에 스크립트 블록을 실행합니다. 만약 .load()가 셀렉터 표현을 포함하는 URL로 호출되었다면 스크립트는 DOM이 업데이트 되기 전에 제거되어지고 실행되지 않습니다.
※ 예제소스
'프로그래밍 > 자바스크립트' 카테고리의 다른 글
| jQuery UI autocomplete(입력필드 자동완성) 사용하기 (11) | 2018.04.20 |
|---|---|
| 자바스크립트 주기적인 실행(setInterval, setTimeout) (0) | 2018.04.20 |
| jQuery UI datepicker - 자바스크립트 달력 사용하기 (2) | 2018.04.20 |
| CKEditor 4 설치와 PHP 연동 하기 (14) | 2018.04.19 |
| jQuery 무한 스크롤(Infinite scroll) 플러그인 jScroll 사용법 (0) | 2018.04.19 |