제이쿼리 load() 메소드 사용방법 및 예제보기

 
파일에 있는 데이터를 불러오는 방법으로 load() 메소드를 사용하는 방법에 대하여 알아보려합니다.

load() 메소드는 비동기 방식으로 특정 위치에 있는 파일의 객체 또는 문서를 불러올 수 있는 AJAX 메소드입니다. 이런 비동기 방식은 당연히 ajax()가 매우 익숙한데 이 메소드의 단축 메소드로 하는 일은 거의 동일합니다. 이런 단축 메소드는 get(), post(), getJSON()등이 이에 속합니다.  그럼 load() 메소드의 사용방법에 대하여 알아보도록 하겠습니다. 일단, load() 메소드의 사용방법은 아주 간단합니다. 아래는 간단한 사용방법입니다.

$.load(url, data[Option], callback)

// Ex) $.load('test.html', {bdn: 'js'}, function() { ... })



i. url : 가져올 파일명
ii. data : 전달할 쿼리스트링(query string)의 값(선택가능)
iii. callback : 서버와 통신 후 실행할 콜백함수

그럼 아래는 간단한 이를 활용하여 서버의 데이터를 실제로 불러오는 예제소스를 만들어 실행해보겠습니다.

! load() 메소드 예제소스 보기

우리는 test.html이 서버에 존재하고 이 소스를 가지고 오려는 예제를 만들어 보겠습니다. 일단 무엇을 해야할까요? 일단 코드 작성의 경우 아래와 같이 작성할 수 있습니다.

1. code.html 코드 보기


2. open.html 코드 보기


위 코드를 실행하면 해당하는 loadView ID 요소안에는 code.html의 코드가 적용되게 됩니다. 참고로 불러올 html 코드 내부의 id값을 사용할 수도 있습니다. 아래의 예제를 보세요.


위와같이 html 안에 있는 ID 값을 사용하여 해당하는 부분만 불러와 적용될 것입니다. 즉 필요한 부분만 간단하게 적용하는 것이 가능합니다.


한가지 더! load() 역시 동일한 url 주소 안에서만 불러오는 것이 가능한 same-origin-policy가 적용됩니다. 그러므로 다른 url 주소나 sub domain의 경우 불러올 수 없다는 점을 유의하세요.

# load()는 ajax() 메소드와 차이점이 무엇일까?

load()와 ajax() 모두 서버와 통신하여 데이터를 가져온다는 점이 동일합니다. 그렇다면 이 둘의 가장 큰 차이점은 무엇일까요? 바로 load() 메소드는 간소화된 비동기 호출의 단축 메소드라는 점이 차이점입니다. 쉽게 설명한자면 과일을 깎는데 과도면 충분한데 굳이 소잡는 칼이 필요하지 않다는 점입니다.

이런 간략한 방식의 메소드는 ajax 외에도 많이 존재합니다. 예를들어 mouseenter(), mouserover() 등의 이벤트를 단축한 hover() 역시 이벤트 단축 메소드 중 하나입니다.

단축 메소드를 활용하는 이유는 우선 불필요한 리소스를 줄일 수 있다는 점이 있으며 또한 코드를 간결하게 만들 수도 있을 것입니다. 예를들어 ajax()를 사용하는 코드는 load()를 사용할 경우 더 간략하고 코드를 통해 어떤 과정이 이루어지는지 더 쉽게 이해할 수 있습니다.