Phương thức getScript() của jQuery ajax

Tài liệu tham khảo jQuery Ajax

Mô hình

Nhận và chạy một tệp JavaScript bằng yêu cầu AJAX:

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

Thử ngay

Định nghĩa và cách sử dụng

Phương thức getScript() tải và thực thi tệp JavaScript qua yêu cầu HTTP GET.

Cú pháp

jQuery.getScript(url,success(response,status});
Tham số Mô tả
url Chuỗi URL mà sẽ yêu cầu.
success(response,status)

Tùy chọn. Định nghĩa hàm gọi lại được thực thi sau khi yêu cầu thành công.

Các tham số bổ sung:

  • response - Chứa dữ liệu kết quả từ yêu cầu
  • status - Chứa trạng thái yêu cầu ("success", "notmodified", "error", "timeout" hoặc "parsererror")

Giải thích chi tiết

Hàm này là viết tắt của hàm Ajax, tương đương với:

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

Hàm gọi lại ở đây sẽ truyền vào tệp JavaScript trả về. Thường thì không có ích lắm, vì lúc đó vân đề đã chạy.

Script được thực thi trong môi trường toàn cục, vì vậy có thể truy cập các biến khác và sử dụng các hàm jQuery.

Ví dụ như tải tệp test.js, chứa đoạn mã sau:

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

Bằng cách tham chiếu tên tệp này, bạn có thể tải và chạy đoạn mã này:

$.getScript("ajax/test.js", function() {
  alert("Đã thực hiện tải.");
});

Ghi chú:Trước jQuery 1.2, getScript chỉ có thể gọi tệp JS cùng域. Trong 1.2, bạn có thể gọi tệp JavaScript khác域. Lưu ý: Safari 2 hoặc sớm hơn không thể thực thi đồng bộ script trong phạm vi toàn cục. Nếu thêm script bằng getScript, hãy thêm hàm delay.

Các ví dụ khác

Ví dụ 1

Tải và thực thi test.js:

$.getScript("test.js");

Ví dụ 2

Tải và thực thi test.js, thành công sau đó hiển thị thông tin:

$.getScript("test.js", function(){
  alert("Script đã được tải và thực thi.");
});

Ví dụ 3

Tải vào Plugin animation màu sắc chính thức của jQuery Thành công sau đó gắn animation thay đổi màu sắc:

Mã HTML:

<button id="go">Chạy</button>
<div class="block"></div>

Mã 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);
  });
});

Tài liệu tham khảo jQuery Ajax