[jQuery] .load() 메서드
웹페이지의 내용을 동적으로 교체할 수 있는 메서드이다.
서버에서 json 데이터를 받아 Ajax로 HTML 요소를 생성하여 페이지 내부의 원하는 위치에 내용을 변경할 때 사용한다.
주어진 URL로부터 HTML 데이터를 받아 선택한 공간에 넣어줌으로써 동적인 변화를 나타낸다.
load 메서드의 3가지 매개변수
.load(url [, data] [, compleat])1) url : 데이터를 받을 url
2) data
URL 요청을 보낼 때 같이 보낼 데이터로써 자바스크립트 객체 또는 문자열을 말한다.
data가 주어진다면 POST 메서드로 전송되고 이외의 경우에는 GET 방식으로 보내진다.
3) complete : 요청 완료 후 호출 될 콜백함수
콜백이 제공되었을 경우 후처리와 HTML 삽입이 수행된 후에 실행된다.
jQuery 선택자로 여러개의 요소가 선택되었을 경우 콜백은 jQuery 컬렉션 안의 각 요소에 대해 한번씩 실행된다.
$("#result").load("load.html", function() {
alert("Load was performed");
});id가 result인 요소를 포함하고 있지 않을 경우에는 .load() 메서드는 실행되지 않는다.
요청이 성공적일 때는 textStatus가 'success' 혹은 'notmodified'이다.
받은 페이지의 일부만을 사용하고 싶을 때는 받은 문서에서 삽입될 부분을 지정하기 위해 url 파라미터에 대한 특수한 구문을 사용한다.
하나 이상의 공백이 문자열에 포함되어 있을 경우
첫번째 공백 다음의 문자열 부분 : 로드할 내용을 결정하는 jQuery 셀렉터로 간주된다.
$("#result").load("load.html #container");이 메서드가 실행될 때 load.html의 내용을 가져오는데 제이쿼리는 반환된 문서를 파싱하여 container라는 ID 요소를 찾는다.
그리고 이 요소와 요소에 포함된 내용이 result라는 ID 요소에 삽입되고, 반환된 나머지 내용은 버려진다.
제이쿼리는 브라우저의 .innerHTML 프로퍼티를 사용해 가져온 문서를 파싱하고 현재 문서에 삽입한다.
이 작업을 통해 브라우저는 종종 문서에 있는 <html>, <title>, <head>와 같은 요소들을 걸러내는데, 그 결과로 load 메서드에 의해 가져왔던 요소들은 문서가 직접 브라우저로 가져온 문서와 동일하지 않을 수도 있다.