jQuery ajax - วิธีการ ajax()

jQuery Ajax คู่มืออ้างอิง

ตัวอย่าง

โหลดข้อความส่วนหนึ่งด้วย AJAX

jQuery รหัส:

$(document).ready(function(){
  $("#b01").click(function(){
  htmlobj=$.ajax({url:"/jquery/test1.txt",async:false});
  $("#myDiv").html(htmlobj.responseText);
  });
});

รหัส HTML:

<div id="myDiv"><h2>ให้ AJAX เปลี่ยนข้อความนี้</h2></div>
<button id="b01" type="button">เปลี่ยนเนื้อหา</button>

ทดลองด้วยตัวเอง

การระบุและการใช้งาน

ฟังก์ชัน ajax() ใช้ HTTP การขอคำสั่งเพื่อโหลดข้อมูลที่อยู่ทางหลัง

นี่คือการทำงาน Ajax ที่อยู่ใต้ด้าน jQuery โดยง่ายและง่ายใช้ยิ่งกว่าการทำงานที่สูงยิ่งเช่น $.get, $.post และอื่นๆ ฟังก์ชัน $.ajax() จะกลับค่า XMLHttpRequest ที่ทำการสร้าง ในหลายกรณีคุณจะไม่ต้องใช้ฟังก์ชันนี้โดยตรง ยกเว้นว่าคุณต้องการใช้ตัวแปรที่ไม่เป็นทั่วไปเพื่อได้รับความยืดหยาบมากยิ่งขึ้น

ในกรณีที่เรียบง่ายที่สุด ฟังก์ชัน $.ajax() สามารถใช้ได้โดยไม่มีตัวแปรเพิ่มเติม

แนะนำทุกตัวเลือกสามารถตั้งค่าโดยทั่วไปด้วยฟังก์ชัน $.ajaxSetup()

การใช้งาน

jQuery.ajax([settings]
ตัวแปร คำอธิบาย
settings

เลือกได้ ชุดของตัวแปรที่ใช้เพื่อปรับแต่งคำขอ Ajax

สามารถตั้งค่าค่าเริ่มต้นสำหรับตัวแปรทุกตัวด้วย $.ajaxSetup()

ตัวแปร

options

ประเภท: Object

เลือกได้ การตั้งค่าคำขอ Ajax โดยเฉพาะ ทุกตัวเลือกเป็นเลือกได้

async

ประเภท: Boolean

ค่าเริ่มต้น: true ในการตั้งค่าเริ่มต้น ทุกคำขอเป็นการทำงานที่ไม่ต้องรอ ถ้าต้องการส่งคำขอที่เป็นระบบที่เทียบเท่า โปรดตั้งค่านี้เป็น false

注意 คำขอที่เป็นระบบที่เทียบเท่าจะล็อกเว็บเบราว์เซอร์ ผู้ใช้จะต้องรอการทำงานที่อื่นๆ จนกว่าคำขอจะเสร็จสิ้น

beforeSend(XHR)

ประเภท: Function

สามารถเปลี่ยน XMLHttpRequest วัตถุก่อนการส่งคำขอด้วยฟังก์ชัน เช่น เพิ่มหัว HTTP ที่สร้างขึ้นเอง

XMLHttpRequest วัตถุเป็นตัวเดียวที่ใช้เป็นพาหะ

นี่คือเหตุการณ์ Ajax หนึ่ง ถ้ากลับค่าเป็น false สามารถยกเลิกคำขอ ajax ครั้งนี้ได้

cache

ประเภท: Boolean

ค่าเริ่มต้น: true ค่าเริ่มต้นสำหรับ dataType ว่า script และ jsonp คือ false โดยเริ่มต้น การตั้งค่า false จะไม่คั่นชั่งหน้านี้。

jQuery 1.2 ความสามารถใหม่。

complete(XHR, TS)

ประเภท: Function

ฟังก์ชันที่เรียกกลับหลังจากที่คำขอเสร็จ (โดยเรียกทั้งหมดทั้งคำขอสำเร็จและล้มเหลว)

ตัวแปร: XMLHttpRequest และสตริงที่อธิบายประเภทของคำขอ

นี่คือเหตุการณ์ Ajax

contentType

ประเภท: String

ค่าเริ่มต้น: "application/x-www-form-urlencoded" ประเภทของการเข้ารหัสข้อมูลที่ส่งไปยังเซิร์ฟเวอร์

ค่าเริ่มต้นที่เหมาะสมสำหรับส่วนใหญ่ ถ้าคุณส่งค่า content-type ให้ $.ajax() มันจะส่งไปยังเซิร์ฟเวอร์ด้วยเหมือนกัน แม้ว่าไม่มีข้อมูลที่จะส่ง

context

ประเภท: Object

ตัวแปรนี้ใช้เพื่อตั้งค่าความเป็นมาสำหรับฟังก์ชันที่ตั้งค่าไว้ด้วย Ajax คือ ฟังก์ชันในตัวแปรนี้จะให้ค่าให้ตัว this ในฟังก์ชันที่ตั้งค่าไว้ หากไม่ได้ตั้งค่าค่านี้ ตัว this จะหน้าที่ในตัวแปร options ที่ส่งมาด้วย AJAX โดยตั้งค่า DOM ประกายค่าเป็น context จะตั้งค่าฟังก์ชัน success ให้เป็น DOM นี้

เช่นนี้:

$.ajax({ url: "test.html", context: document.body, success: function(){
        $(this).addClass("done");
      }});
data

ประเภท: String

ข้อมูลที่ส่งไปยังเซิร์ฟเวอร์ จะแปลงเป็นรูปแบบของข้อความที่ส่งคำขอ จะติดตั้งข้างหลัง URL ในคำขอ GET ตรวจสอบตัวเลือก processData เพื่อหยุดการแปลงเป็นรูปแบบนี้ จะต้องใช้รูปแบบ Key/Value ถ้าเป็นตัวแปรเรียกข้อมูลจะถูกแปลงเป็น '&key=value' อย่างเช่น {key:["value1", "value2"]} จะถูกแปลงเป็น '&key=value1&key=value2'

dataFilter

ประเภท: Function

ฟังก์ชันที่ทำงานในการประมวลเปิดแฟ้มข้อมูลตัวเดิมที่ส่งไปยัง Ajax โดย Ajax มีสองประกายค่าคือ data และ type คือข้อมูลตัวเดิมที่ส่งกลับมาโดย Ajax และ type คือประกายค่า dataType ที่ใช้ใน jQuery.ajax ฟังก์ชัน ค่าที่ฟังก์ชันจะกลับมาจะถูกจัดการต่อไปโดย jQuery

dataType

ประเภท: String

คาดหวังข้อมูลที่เซิร์ฟเวอร์จะส่งกลับมาเป็นชนิดของข้อมูล ถ้าไม่ระบุ จะได้รับการพิจารณาโดยอัตโนมัติโดย jQuery ตามข้อมูล MIME ของ HTTP แพ็ค อย่างเช่น MIME ประเภท XML จะถูกจับเป็น XML ใน 1.4 จะสร้าง JavaScript Object ขึ้นมา และ script จะปฏิบัติงานบทบาทนี้ หลังจากนั้นข้อมูลที่เซิร์ฟเวอร์ส่งกลับมาจะนำมาประมวลผลตามค่านี้และส่งผ่านไปยังฟังก์ชันที่ตั้งค่าไว้โดยอัตโนมัติ ค่าที่สามารถใช้ได้คือ:

  • "xml": คืนค่าเอกสาร XML ที่สามารถจัดการด้วย jQuery
  • "html": คืนค่าข้อมูล HTML ตัวอักษรสะดิ้น; แบตติ้งที่มี script จะทำงานเมื่อใส่ลงใน DOM
  • "script": คืนค่าข้อความ JavaScript ตัวอักษรสะดิ้น จะไม่เก็บค่าที่เคยใช้เก่า ยกเว้นถ้าได้ตั้งค่า "cache" ปรับปรุง: ในการขอคำร้องที่อยู่นอกเมือง (ไม่ใช่ในเดียวกันกับโดเมน) ทุกคำร้อง POST จะถูกเปลี่ยนเป็น GET คำร้อง (เพราะจะใช้ script แทนที่ DOM)
  • "json": คืนค่าข้อมูล JSON
  • "jsonp": รูปแบบ JSONP ใช้รูปแบบ JSONP โรงเรียงฟังก์ชัน อย่างเช่น "myurl?callback=?" jQuery จะแทนที่ ? ด้วยชื่อฟังก์ชันที่ถูกต้องเพื่อปฏิบัติฟังก์ชันคลิกแบ็ค
  • "text": คืนค่าข้อความตัวอักษรสะดิ้น
error

ประเภท: Function

ค่าเริ่มต้น: ตรวจสอบโดยอัตโนมัติ (xml หรือ html) โรงเรียนคำสั่งนี้เมื่อคำร้องล้มเหลว

มีค่าสามคำต่อไปนี้: XMLHttpRequest วัตถุ, ข้อความของข้อผิดพลาด, (ใช้ได้เลือก) วัตถุของความผิดพลาดที่จับ

ถ้าเกิดข้อผิดพลาด ข้อความของข้อผิดพลาด (ค่าที่สอง) นอกจาก null แล้ว ยังอาจเป็น 'timeout', 'error', 'notmodified', 'parsererror'

นี่คือเหตุการณ์ Ajax

global

ประเภท: Boolean

เว้นเสียงเหตุการณ์ AJAX ทั่วไป ค่าเริ่มต้น: true การตั้งค่าเป็น false จะไม่เปิดเหตุการณ์ AJAX ทั่วไป เช่น ajaxStart หรือ ajaxStop สามารถใช้เพื่อควบคุมเหตุการณ์ AJAX ต่างๆ

ifModified

ประเภท: Boolean

รับข้อมูลใหม่เมื่อข้อมูลบนเซิร์ฟเวอร์เปลี่ยนแปลงเท่านั้น ค่าเริ่มต้น: false ใช้ HTTP หัวข้อมูล Last-Modified ตรวจสอบ ใน jQuery 1.4 มันยังตรวจสอบ 'etag' ที่กำหนดโดยเซิร์ฟเวอร์เพื่อตรวจสอบว่าข้อมูลไม่ได้ถูกแก้ไข

jsonp

ประเภท: String

ในคำร้อง jsonp ให้เขียนชื่อฟังก์ชันคลิกแบ็ค ขึ้นมาใหม่ ค่านี้ใช้เป็นตัวแทนสำหรับความหมาย 'callback' ในตัวเลือก URL ของคำร้อง GET หรือ POST ที่มีรูปแบบ 'callback=?' ตัวอย่างเช่น {jsonp:'onJsonPLoad'} จะทำให้ 'onJsonPLoad=?' ถูกส่งไปยังเซิร์ฟเวอร์

jsonpCallback

ประเภท: String

กำหนดฟังก์ชันคอบกลับสำหรับคำขอ jsonp นี้ ค่านี้จะถูกใช้แทนฟังก์ชันที่ jQuery สร้างขึ้นเองอย่างสุ่มๆ นี่ใช้เพื่อทำให้ฟังก์ชันที่สร้างขึ้นโดย jQuery มีชื่อเด่นเพื่อง่ายต่อการจัดการ และง่ายต่อการให้ความสามารถในการเรียกคอบกลับและการจัดการข้อผิดพลาด คุณยังสามารถกำหนดฟังก์ชันคอบกลับนี้เมื่อต้องการที่จะให้บราวเซอร์เก็บความทรงจำของคำขอ GET

password

ประเภท: String

ใช้เพื่อตอบสนองคำขอยืนยันการเข้าถึง HTTP ด้วยรหัสผ่าน

processData

ประเภท: Boolean

ค่าเริ่มต้น: true โดยมาตรฐาน ข้อมูลที่ส่งมาผ่านตัวแปร data หากเป็นวัตถุ (เทคนิคแล้วไม่ใช่ตัวแปรข้อความ) จะถูกจัดการเป็นข้อความค้นหา โดยตรงกับประเภทสื่อที่ใช้โดยมาตรฐาน "application/x-www-form-urlencoded" ถ้าต้องการส่งข้อมูล DOM หรือข้อมูลอื่นที่ไม่ต้องการการเปลี่ยนแปลง ให้ตั้งค่าเป็น false

scriptCharset

ประเภท: String

ใช้เมื่อ dataType ของคำขอเป็น "jsonp" หรือ "script" และ type คือ "GET" เพื่อบังคับการเปลี่ยน charset โดยมาตรฐานนั้นใช้เมื่อมีการแยกเข้ากันของการเข้ารหัสระหว่างสื่อสารในท้องถิ่นและระยะไกล

success

ประเภท: Function

ฟังก์ชันโรลบากหลังการขอคำขอสำเร็จ

ตัวแปร: ข้อมูลที่ส่งมาโดยเซิร์ฟเวอร์และจัดการตามตัวแปร dataType; ข้อความเรียกเตือนสถานะ

นี่คือเหตุการณ์ Ajax

traditional

ประเภท: Boolean

ถ้าคุณต้องการที่จะใช้วิธีที่เก่าแก่ในการเรียกเข้าไปข้อมูล ให้ตั้งค่าเป็น true โปรดอ้างอิงที่ jQuery.param ในประเภทเครื่องมือ

timeout

ประเภท: Number

ตั้งค่าเวลาหยุดเวลาของคำขอ (มิลลิเซกันด์) การตั้งค่านี้จะทำให้ทับทางการตั้งค่าโลก

type

ประเภท: String

ค่าเริ่มต้น: "GET") วิธีการขอคำขอ ("POST" หรือ "GET") โดยมาตรฐานคือ "GET" คำเตือน: วิธีการขอคำขอ HTTP อื่น ๆ อย่างเช่น PUT และ DELETE ก็สามารถใช้ได้ แต่มีบางเบราเซอร์ที่ไม่สนับสนุน

url

ประเภท: String

ค่าเริ่มต้น: ที่อยู่ของหน้าปัจจุบัน ที่ส่งคำขอ

username

ประเภท: String

ใช้เพื่อตอบสนองคำขอยืนยันการเข้าถึง HTTP ด้วยชื่อผู้ใช้

xhr

ประเภท: Function

ต้องการส่งกลับออブเจกท์ XMLHttpRequest อันหนึ่ง。โดยมาตรฐานใน IE คือ ActiveXObject และในสถานการณ์อื่น คือ XMLHttpRequest สำหรับเขียนเข้าไปหรือจัดทำออบเจกท์ XMLHttpRequest ที่มีความสามารถเพิ่มเติม ใน jQuery 1.3 ก่อนหน้านี้ จะไม่มีความสามารถนี้

ฟังก์ชัน callback

ถ้าต้องการประมวลผลข้อมูลที่ได้มาจาก $.ajax() ต้องใช้ฟังก์ชัน callback ต่างๆ ได้แก่ beforeSend, error, dataFilter, success, complete

beforeSend

เรียกฟังก์ชันก่อนที่จะส่งคำสั่ง และส่ง XMLHttpRequest ในรูปของอุปกรณ์

error

เรียกฟังก์ชันหลังจากที่คำสั่งล้มเหลว ส่ง XMLHttpRequest object และ string ที่มีรายงานประเภทของความล้มเหลว และ object ของความผิดพลาด (ถ้ามี)

dataFilter

เรียกฟังก์ชันหลังจากที่คำสั่งทำงานสำเร็จ ส่งข้อมูลที่กลับมาและค่าของประมาณการ dataType ต้องกลับค่าข้อมูลที่ปรับปรุงแล้ว (อาจเป็นข้อมูลที่ปรับปรุง) ที่จะส่งไปยังฟังก์ชัน callback success

success

เรียกฟังก์ชันหลังจากที่คำสั่งทำงานเสร็จ ส่งข้อมูลที่กลับมาและ string ที่มีรหัสสำเร็จ

complete

เรียกฟังก์ชันนี้หลังจากที่การขอคำสั่งเสร็จ ไม่ว่าจะเป็นการสำเร็จหรือล้มเหลว ส่ง XMLHttpRequest object และ string ที่มีรหัสสำหรับการสำเร็จหรือความล้มเหลว

ชนิดข้อมูล

ฟังก์ชัน $.ajax() ขึ้นอยู่กับข้อมูลที่เซิร์ฟเวอร์ให้เพื่อการประมวลผลข้อมูลที่กลับมา ถ้าเซิร์ฟเวอร์รายงานว่าข้อมูลที่กลับมาเป็น XML ผลลัพธ์ที่กลับมาสามารถใช้เครื่องมือ XML หรือ jQuery selector ที่ปกติ ถ้าเห็นชนิดอื่น อย่างเช่น HTML ข้อมูลจะถูกจัดการในรูปของข้อความ

ผ่านตัวเลือก dataType ยังสามารถกำหนดวิธีการประมวลผลข้อมูลอื่น นอกจาก XML แล้ว ยังสามารถกำหนด html, json, jsonp, script หรือ text

ในขณะนี้ ข้อมูลที่มีชนิด text และ xml จะไม่ได้รับการประมวลผล ข้อมูลจะถูกส่งต่อเพียงแค่นี้จากค่า responseText หรือ responseHTML ของ XMLHttpRequest ไปยังฟังก์ชัน success callback

แนะนำเราต้องให้ความแน่ใจว่าชนิด MIME ที่เซิร์ฟเวอร์เผยแพร่ตามที่เราเลือก dataType ตรงกัน ตัวอย่างเช่น ถ้าเป็น XML ต้องมีการประกาศ text/xml หรือ application/xml ที่เซิร์ฟเวอร์เพื่อที่จะได้ผลลัพธ์ที่สอดคล้อง

ถ้ากำหนดเป็นชนิด html ระบบ JavaScript ที่ฝั่งด้านภายในจะทำงานก่อนที่จะกลับค่าของ HTML ในรูปของตัวแปร string มาก่อน。อีกทั้ง ถ้ากำหนดชนิด script ก็จะทำ JavaScript ที่สร้างโดยเซิร์ฟเวอร์ก่อนที่จะกลับค่าของสคริปต์ในรูปของข้อมูลข้อความมา

ถ้ากำหนดเป็นประเภท json จะแปลงข้อมูลที่ได้รับมาเป็น JavaScript ตัวเรียกและส่งตัวเรียกที่สร้างเรียบร้อยกลับคืน ในการทำงานนี้มันจะพยายามใช้ JSON.parse() แรก และถ้าเบราซเซอร์ไม่สนับสนุน จะใช้ฟังก์ชันเพื่อสร้าง

ข้อมูล JSON คือข้อมูลที่สามารถประมวลผลได้ง่ายโดย JavaScript และมีโครงสร้าง ถ้าข้อมูลไฟล์คงอยู่บนเซิร์ฟเวอร์ห่างไกล (โดยมีโดเมนที่ต่างกัน หรือการรับข้อมูลทางด้านนอก) จะต้องใช้ประเภท jsonp ถ้าใช้ประเภทนี้ จะสร้างตัวแปรคำถามคำกลับ callback=? และเพิ่มใน URL ของการขอ ฝ่ายเซิร์ฟเวอร์จะต้องเพิ่มชื่อฟังก์ชันกลับไว้ก่อน JSON ในการทำคำขอ JSONP ถ้าต้องการกำหนดชื่อตัวแปรคำกลับแทน callback จะสามารถตั้งค่าตัวเลือก jsonp ของ $.ajax()

แนะนำJSONP คือการขยาย JSON มีรูปแบบ JSON ต้องการรหัสสำหรับเซิร์ฟเวอร์ด้านหลังเพื่อตรวจสอบและจัดการกับตัวแปรคำถามในคำถาม

ถ้ากำหนด script หรือ jsonp ประเภท ในขณะที่รับข้อมูลมาจากเซิร์ฟเวอร์จริงๆ ใช้ <script> แทน XMLHttpRequest ในกรณีนี้ $.ajax() จะไม่ส่งคืน XMLHttpRequest และจะไม่ส่งฟังก์ชันการจัดการเหตุการณ์ เช่น beforeSend

ส่งข้อมูลไปยังเซิร์ฟเวอร์

โดยมาตรฐาน Ajax การขอคำสั่งใช้วิธี GET ถ้าต้องการใช้วิธี POST สามารถตั้งค่าตัวเลือก type ได้ ตัวเลือกนี้ยังส่งผลต่อวิธีที่ข้อมูลในตัวเลือก data จะถูกส่งไปยังเซิร์ฟเวอร์

data ตัวเลือกสามารถมีความหมายของคำถามที่มีค่า อย่างเช่น key1=value1&key2=value2 หรือเป็นแผนภาพ อย่างเช่น {key1: 'value1', key2: 'value2'} ถ้าใช้แบบหลัง ข้อมูลจะถูกเปลี่ยนเป็นคำถามที่มีค่า ก่อนการส่งข้อมูลไปที่ตัวส่งข้อมูล กระบวนการนี้ก็สามารถหลีกเลี่ยงได้โดยการตั้งค่าตัวเลือก processData ให้เป็น false และถ้าเราต้องการส่ง XML ตัวเราไปยังเซิร์ฟเวอร์ กระบวนการนี้อาจไม่เหมาะสม และในกรณีนี้เรายังควรเปลี่ยนค่าตัวเลือก contentType ให้เป็น MIME ประเภทที่เหมาะสมแทน application/x-www-form-urlencoded โดยเรียบร้อย

高级选项

global 选项用于阻止响应注册的回调函数，比如 .ajaxSend，或者 ajaxError，以及类似的方法。这在有些时候很有用，比如发送的请求非常频繁且简短的时候，就可以在 ajaxSend 里禁用这个。

如果服务器需要 HTTP 认证，可以使用用户名和密码可以通过 username 和 password 选项来设置。

Ajax 请求是限时的，所以错误警告被捕获并处理后，可以用来提升用户体验。请求超时这个参数通常就保留其默认值，要不就通过 jQuery.ajaxSetup 来全局设定，很少为特定的请求重新设置 timeout 选项。

默认情况下，请求总会被发出去，但浏览器有可能从它的缓存中调取数据。要禁止使用缓存的结果，可以设置 cache 参数为 false。如果希望判断数据自从上次请求后没有更改过就报告出错的话，可以设置 ifModified 为 true。

scriptCharset 允许给