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.html", funcion() {
alert("Load was performed.");
});
위의 두 예제에서 만약 현재 문서가 id="result" 인 요소를 포함하고 있지 않다면, .load() 메서드는 실행되지 않습니다.
HTTP 요청 메서드(Request Method)
두 번째 인자인 data가 주어지면 POST 메서드로 보내어지고, 그 외의 경우에는 GET 방식으로 보내어집니다.
받은 페이지의 일부만 사용하기
.load() 메서드는 원격에서 받은 문서에서 삽입될 부분을 지정할 수 있습니다. 이것은 url 파라미터에 대한 특수한 구문을 사용하여 처리합니다. 하나 이상의 공백이 문자열에 포함되어 있으면 첫 번째 공백 다음의 문자열 부분은 로드할 내용을 결정하는 jQuery 셀렉터로 간주됩니다.
위의 예제를 수정하여 가져온 문서의 일부만 사용하도록 할 수 있습니다.
$("#result").load("data.html #container");
이 메서드가 실행될 때 그것은 data.html의 내용을 가져옵니다. 그러나 jQuery는 반환된 문서를 파싱하여 container라는 ID를 가진 요소를 찾습니다. 이 요소와 요소에 포함된 내용이 result라는 ID를 가진 요소에 삽입됩니다. 그리고 나머지 반환된 내용은 버려집니다.
jQuery는 브라우저의 .innerHTML 프로퍼티를 사용하여 가져온 문서를 파싱하고 현재 문서에 삽입합니다. 이 작업을 하는 동안 브라우저는 종종 문서에는 <html>, <title> 또는 <head> 와 같은 요소들을 걸러냅니다. 그 결과로 .load() 메서드에 의해 가져온 요소들은 문서가 직접 브라우저로 가져온 문서와 정확히 같지 않을 수 있습니다.
스크립트 실행
셀렉터를 나타내는 접미사가 없는 URL을 사용하여 .load()를 호출할 때 받은 컨텐츠는 스크립트가 제거되기에 앞서 .html() 메소드로 보내어집니다. 이것은 스크립트가 버려지기전에 스크립트 블록을 실행합니다. 만약 .load()가 셀렉터 표현을 포함하는 URL로 호출되었다면 스크립트는 DOM이 업데이트되기 전에 제거되고 실행되지 않습니다.
'IT > 자바스크립트' 카테고리의 다른 글
| [JSP] parseInt()함수를 이용한 Float을 Int로 변환 (0) | 2023.11.01 |
|---|---|
| radio 버튼 선택 값 가져오기 (0) | 2023.10.25 |
| [jQuery] CheckBox 선택된 값 가져오기 (0) | 2023.06.16 |
| [자바스크립트] C태그 forEach 사용법 (0) | 2023.06.16 |
| [자바스크립트] JSTL (c태그)사용법 정리 (2) | 2023.06.16 |
