기본적인 MVC2 방식을 사용할 경우, 리턴받는 응답은 View 객체임을 기억한다.
이를 이용한 비동기적 페이지 로딩방법입니다. 아래로 부터는 출처: https://offbyone.tistory.com/235 [쉬고 싶은 개발자] 님의 글이 출처임을 밝힙니다.
웹 페이지의 내용을 동적으로 교체하기 위해서 Ajax로 서버에서 데이터 json 형식으로 받아 HTML 요소를 생성하여 페이지내의 원하는 위치의 내용을 바꾸는 작업을 많이 합니다. jQuery의 .load() 메소드는 주어진 URL로부터 HTML 데이트를 받에서 jQuery 셀력터로 선택된 위에에 넣어 줌으로써 동적으로 페이지의 내용을 교체하는 작업을 간단하게 처리할 수 있도록 해줍니다.
<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 요청은 보내어지지 않습니다.
HTTP 요청 메소드(Request Method)
두 번째 인자인 data가 주어지면 POST 메소드로 보내어지고, 그 외의 경우에는 GET 방식으로 보내어집니다.
위의 예제를 수정하여 가져온 문서의 일부만 사용하도록 할 수 있습니다.
$("#result").load("data.php #container");
이 메소드가 실행될 때 그것은 data.php 의 내용을 가져옵니다. 그러나 jQuery는 반환된 문서를 파싱하여 container라는 ID를 가진 요소를 찾습니다. 이 요소와 요소에 포함된 내용이 result라는 ID를 가진 요소에 삽입됩니다. 그리고 나머지 반환된 내용은 버려집니다.
jQuery는 브라우저의 .innerHTML 프로퍼티를 사용하여 가져온 문서를 파싱하고 현재 문서에 삽입합니다. 이 작업을 하는 동안 브라우저는 종종 문서에는 <html>, <title> 또는 <head> 와 같은 요소들을 걸러냅니다. 그 결과로 .load() 메소드에 의해 가져온 요소들은 문서가 직접 브라우저로 가져온 문서와 정확히 같지 않을 수 있습니다.
스크립트 실행
셀렉터를 나타내는 접미사가 없는 URL을 사용하여 .load()를 호출할 때 받은 컨텐츠는 스크립트가 제거되기에 앞서 .html() 메소드로 보내어집니다. 이것은 스크립트가 버려지기전에 스크립트 블록을 실행합니다. 만약 .load()가 셀렉터 표현을 포함하는 URL로 호출되었다면 스크립트는 DOM이 업데이트 되기 전에 제거되어지고 실행되지 않습니다.
감사하다는 말씀을 드립니다., 글은 문제가 있을 시 언제든지 삭제하도록 하겠습니다.
'Ajax' 카테고리의 다른 글
| Ajax 통신 기초. (0) | 2020.08.26 |
|---|---|
| 싱글페이지 어플리케이션과 , include 페이지 사용. (0) | 2020.08.21 |
| Loading 바 구현 (0) | 2020.08.05 |
| Ajax 로 폼데이터 보내기 (0) | 2020.08.05 |
| Ajax 를 이용하는 Jquery 기본 메서드. (0) | 2020.08.05 |