jQuery ajax - getScript() 메서드

jQuery Ajax 참조 매뉴얼

예제

AJAX 요청을 통해 JavaScript 파일을 가져오고 실행합니다:

$("button").click(function(){
  $.getScript("demo_ajax_script.js");
});

직접 테스트해 보세요

정의와 사용법

getScript() 메서드는 HTTP GET 요청을 통해 JavaScript 파일을 로드하고 실행합니다.

문법

jQuery.getScript(url,success(response,status});
매개변수 설명
url 요청할 URL 문자열.
success(response,status)

선택적입니다. 요청 성공 후 실행할 콜백 함수를 정의합니다.

추가 매개변수:

  • response - 요청에서 결과 데이터를 포함합니다.
  • status - 요청 상태를 포함합니다. ("success", "notmodified", "error", "timeout" 또는 "parsererror")

상세 설명

이 함수는 줄임말된 Ajax 함수입니다. 다음과 동일합니다:

$.ajax({
  url: url,
  dataType: "script",
  success: success
});

여기서의 콜백 함수는 반환된 JavaScript 파일을 전달합니다. 이는 일반적으로 많이 사용되지 않습니다. 왜냐하면 그때 스크립트가 이미 실행된 것입니다.

로드된 스크립트는 전체 환경에서 실행되므로 다른 변수를 참조하고 jQuery 함수를 사용할 수 있습니다.

예를 들어 test.js 파일을 로드하면 다음과 같은 코드가 포함될 수 있습니다:

$(".result").html("<p>Lorem ipsum dolor sit amet.</p>");

이 파일 이름을 참조하여 스크립트를 로드하고 실행할 수 있습니다:

$.getScript("ajax/test.js", function() {
  alert("로드가 수행되었습니다.");
});

주석:jQuery 1.2 버전 이전에는 getScript가 동일 도메인 JS 파일을 호출할 수 밖에 없었습니다. 1.2에서는 JavaScript 파일을 다른 도메인에서 호출할 수 있습니다. 주의: Safari 2 또는 이전 버전은 전체 스코프에서 스크립트를 동기적으로 실행할 수 없습니다. getScript를 통해 스크립트를 추가할 경우 딜레이 함수를 추가하세요.

더 많은 예제

예제 1

test.js를 로드 및 실행합니다:

$.getScript("test.js");

예제 2

test.js를 로드 및 실행하고 성공하면 정보를 표시합니다:

$.getScript("test.js", function(){
  alert("스크립트 로드 및 실행되었습니다.");
});

예제 3

로드 jQuery 공식 색상 애니메이션 플러그인 색상 변화 애니메이션을 성공적으로 바인딩했습니다:

HTML 코드:

<button id="go">Run</button>
<div class="block"></div>

jQuery 코드:

jQuery.getScript("http://dev.jquery.com/view/trunk/plugins/color/jquery.color.js",
 function(){
  $("#go").click(function(){
    $(".block").animate({ backgroundColor: 'pink' }, 1000)
      .animate({ backgroundColor: 'blue' }, 1000);
  });
});

jQuery Ajax 참조 매뉴얼