jQuery - AJAX load() Method
1. jQuery load() Method
load() 메소드는 간단하면서도 강력한 AJAX 메소드 입니다.
load() 메소드는 서버로 부터 데이터를 로드하고, 선택된 요소에 반환된 값을 넣습니다.
문법:
$(selector).load(URL,data,callback);
필수적인 URL 파라미터는 로드를 원하는 URL을 명시합니다.
선택적인 data 파라미터는 요구와 함께 보내지는 키 / 값 쌍의 일련의 질의 문자열을 명시합니다.
선택적인 callback 파라미터는 load() 메소드가 끝나고 난 뒤 실행될 함수의 이름입니다.
아래 "demo_test.txt"라는 텍스트 예제 파일이 있습니다.
<h2>jQuery and AJAX is FUN!!!</h2>
<p id="p1">This is some text in a paragraph.</p>
아래 예제는 demo.txt의 내용을 불러와 <div>에 명시하는 예제입니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!DOCTYPE html> <html> <head> <script> $(document).ready(function(){ $("button").click(function(){ $("#div1").load("demo.txt"); }); }); </script> </head> <body> <div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div> <button>Get External Content</button> </body> </html> | cs |
또한, URL 파라미터에 jQuery 선택자를 추가할 수 있습니다.
| $("#div1").load("demo_test.txt #p1"); | cs
|
선택적인 callback 파라미터는 다른 파라미터를 갖을 수 있습니다:
- responseTxt: 호출이 성공할 시, 결과 내용을 포함
- statusTxt: 호출 상태를 포함
- xhr: XMLHttpRequest 객체를 포함
아래 예제는 load() 메소드가 완료되고 난 뒤, 알림창을 화면에 띄우는 예제입니다.
load() 메소드가 성공하면, 화면은 "External content loaded successfully!"를 띄우고,
실패하면, 에러 메세지를 출력합니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <!DOCTYPE html> <html> <head> <script> $(document).ready(function(){ $("button").click(function(){ $("#div1").load("demo_test.txt", function(responseTxt, statusTxt, xhr){ if(statusTxt == "success") alert("External content loaded successfully!"); if(statusTxt == "error") alert("Error: " + xhr.status + ": " + xhr.statusText); }); }); }); </script> </head> <body> <div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div> <button>Get External Content</button> </body> </html> | cs |
