Metode jQuery ajax - getScript()

Panduan referensi jQuery Ajax

Contoh

Mendapatkan dan menjalankan berkas JavaScript melalui permintaan AJAX:

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

Coba sendiri

Definisi dan penggunaan

Metode getScript() mengirim permintaan HTTP GET untuk memuat dan melaksanakan berkas JavaScript.

Syntaks

jQuery.getScript(url,success(response,status});
Parameter Deskripsi
url String URL permintaan yang akan diambil.
success(response,status)

Pilihan. Menentukan fungsi kembalian yang akan dijalankan setelah permintaan sukses.

Parameter ekstra:

  • response - Memasukkan data hasil permintaan yang datang
  • status - Memasukkan status permintaan ("success", "notmodified", "error", "timeout" atau "parsererror")

Penjelasan

Fungsi ini adalah penyingkatan fungsi Ajax, yang setara dengan:

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

Fungsi kembalian ini akan menerima kembalian berupa berkas JavaScript. Ini biasanya tidak berguna, karena saat itu skrip sudah dijalankan.

Skrip yang dimuat di lingkungan global, sehingga dapat mengakses variabel lain dan menggunakan fungsi jQuery.

Contoh: Memuat berkas test.js, yang mengandung kode berikut:

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

Dengan mengutip nama berkas ini, dapat memuat dan melaksanakan skrip ini:

$.getScript("ajax/test.js", function() {
  alert("Load was performed.");
});

Komentar:Sebelum versi jQuery 1.2, getScript hanya dapat memanggil berkas JS di domain yang sama. Pada versi 1.2, Anda dapat memanggil berkas JavaScript antar domain. Perhatian: Versi Safari 2 atau yang lebih awal tidak dapat melaksanakan skrip secara sinkron di lingkungan global. Jika menambahkan skrip melalui getScript, tambahkan fungsi delay.

Beberapa contoh lain

Contoh 1

Memuat dan melaksanakan test.js:

$.getScript("test.js");

Contoh 2

Memuat dan melaksanakan test.js, setelah sukses menampilkan informasi:

$.getScript("test.js", function(){
  alert("Script loaded and executed.");
});

Contoh 3

Memuat Plugin animasi warna resmi jQuery Setelah sukses mengikat animasi perubahan warna:

Kode HTML:

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

Kode 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);
  });
});

Panduan referensi jQuery Ajax