jQuery ajax - วิธี getScript()

คู่มือ jQuery Ajax

ตัวอย่าง

รับและปฏิบัติการ JavaScript ไฟล์ผ่าน AJAX คำขอ

$("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("Load was performed.");
});

หมายเหตุ:ก่อน jQuery 1.2 คำสั่ง getScript สามารถเรียกใช้ไฟล์ JS ในท้องที่เท่านั้น ใน jQuery 1.2 คุณสามารถเรียกใช้ไฟล์ JavaScript ที่อยู่ในโดเมนอื่น ความเป็นจริง: Safari 2 หรือตัวรุ่นเก่ากว่าไม่สามารถปฏิบัติตามสคริปต์ได้ในโดเมนส่วนบุคคลทั้งหมด ถ้าใช้ getScript โหลดสคริปต์ ให้ใช้ฟังก์ชันหลังเวลาที่ระบุ

รายละเอียดเพิ่มเติม

ตัวอย่าง 1

โหลดและปฏิบัติตาม test.js:

$.getScript("test.js");

ตัวอย่าง 2

โหลดและปฏิบัติตาม test.js สำเร็จแล้วแสดงข้อความ:

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

ตัวอย่าง 3

โหลด jQuery Official Color Animation Plugin ต่อไปนี้คือการเชื่อมโยงสีการเปลี่ยนแปลงตามเวลาที่ระบุ:

รหัส 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