อาแจ็กซ์
เหตุผลที่น่าสนใจที่สุดในการใช้ เฟรมเวิร์ก JavaScript คือการกำหนดมาตรฐานคำขอ Ajax ข้ามเบราว์เซอร์ คำขอ Ajax คือคำขอ HTTP แบบอะซิงโครนัสที่ส่งคำขอไปยังสคริปต์ฝั่งเซิร์ฟเวอร์ จากนั้นรับผลลัพธ์การตอบสนอง เช่น ข้อมูลในรูปแบบ XML, JSON, HTML หรือข้อความธรรมดา กรอบงาน JavaScript ส่วนใหญ่มีรูปแบบของวัตถุคำขอ Ajax บางรูปแบบที่ยอมรับชุดของตัวเลือกเป็นพารามิเตอร์ ตัวเลือกเหล่านี้รวมถึงฟังก์ชันการโทรกลับที่ถูกเรียกเมื่อได้รับการตอบกลับจากเว็บเซิร์ฟเวอร์ คำขอ Ajax สำหรับ ExtJS, MooTools และ Prototype มีลักษณะดังนี้:
รายการ 11: คำขอ Ajax ในไลบรารี ExtJS
Ext.Ajax.request({
URL: 'server_script.php',
พารามิเตอร์: {
ชื่อ 1: 'value1',
name2: 'value2'
-
วิธีการ: 'โพสต์'
ความสำเร็จ: ฟังก์ชั่น (การขนส่ง) {
การแจ้งเตือน (transport.responseText);
-
-
ExtJS ยอมรับพารามิเตอร์ รวมถึงฟิลด์ต่างๆ เช่น url, params, method และฟังก์ชันการประมวลผลความสำเร็จ ฟิลด์ url มีที่อยู่ของสคริปต์ฝั่งเซิร์ฟเวอร์ ซึ่งถูกเรียกโดยคำขอ Ajax Params นั้นเป็นออบเจ็กต์ที่ประกอบด้วยคู่คีย์/ค่า ซึ่งจะถูกส่งต่อไปยังเซิร์ฟเวอร์ ฟิลด์วิธีการมีค่าที่ไม่บังคับสองค่า: GET หรือ POST และค่าเริ่มต้นคือวิธีการโพสต์ ฟิลด์สุดท้ายคือความสำเร็จ ซึ่งจะถูกเรียกหลังจากที่เซิร์ฟเวอร์ได้รับการตอบกลับสำเร็จ ในตัวอย่างนี้ จะถือว่าเซิร์ฟเวอร์ส่งคืนข้อความธรรมดา และข้อความนี้จะถูกนำเสนอต่อผู้ใช้ผ่านเมธอด alert()
ต่อไป ให้เราสำรวจคำขอ Ajax ใน MooTools เพิ่มเติม
รายการ 12: คำขอ Ajax ใน MooTools
คำขอใหม่ ({
URL: 'server-script.php',
ข้อมูล: {
ชื่อ 1: 'value1',
name2: 'value2'
-
วิธีการ: 'โพสต์'
onComplete: ฟังก์ชั่น (ตอบสนอง) {
การแจ้งเตือน (ตอบกลับ);
-
}).ส่ง();
อย่างที่คุณเห็น MooTools นั้นคล้ายกับ ExtJS มาก คุณจะสังเกตเห็นว่าตัวแปรถูกส่งผ่านช่องข้อมูล และช่องวิธีการจะต้องเป็นตัวพิมพ์เล็ก นอกจากนี้ MooTools ใช้ฟังก์ชัน onComplete ซึ่งต่างจากฟังก์ชันตัวจัดการความสำเร็จ ในที่สุด MooTools จะส่งคำขอโดยใช้ฟังก์ชัน Request send() ซึ่งต่างจาก ExtJS
สุดท้ายนี้ เรามาดูความแตกต่างที่ชัดเจนระหว่าง Prototype กัน
รายการ 13: คำขอ Ajax ในต้นแบบ
ใหม่ Ajax.Request ('server-script.php', {
พารามิเตอร์: {
ชื่อ 1: 'value1',
name2: 'value2'
-
วิธีการ: 'โพสต์'
onSuccess: ฟังก์ชั่น (การขนส่ง) {
การแจ้งเตือน (transport.responseText);
-
-
ดูสิ Prototype ทำงานในลักษณะเดียวกัน แต่มีความแตกต่างทางไวยากรณ์เล็กน้อย สำหรับผู้เริ่มต้น ออบเจ็กต์คำขอต้นแบบจะยอมรับพารามิเตอร์สองตัวที่จะส่งผ่านไปยังตัวสร้าง พารามิเตอร์แรกคือ URL ที่จะส่งคำขอไป ดังที่คุณเห็นในสองตัวอย่างก่อนหน้านี้ และพารามิเตอร์ตัวที่สองคือออบเจ็กต์ที่มีตัวเลือกสำหรับคำขอ Ajax แต่ละรายการ แน่นอนว่า URl ถูกส่งผ่านเป็นพารามิเตอร์แยกต่างหากและไม่อยู่ในรายการตัวเลือก นอกจากนี้ เป็นที่น่าสังเกตว่า ไม่เหมือนกับ MooTools ตรงที่ Constructor ของออบเจ็กต์ Prototype จะส่งคำขอโดยปริยาย ดังนั้นจึงไม่จำเป็นต้องเรียกใช้เมธอดใดๆ เพื่อทริกเกอร์คำขอ HTTP
เฟรมเวิร์ก JavaScript ส่วนใหญ่รองรับ Ajax นอกเหนือจากที่ฉันได้กล่าวถึงที่นี่ การปรับปรุงที่โดดเด่นบางประการ ได้แก่ การอัปเดตองค์ประกอบโดยอัตโนมัติเมื่อได้รับการตอบกลับ โดยไม่จำเป็นต้องใช้ฟังก์ชัน onSuccess พิเศษใดๆ ห้องสมุดบางแห่งมีฟังก์ชันเติมข้อความอัตโนมัติที่สร้างไว้ล่วงหน้าดังที่คุณเห็นในเครื่องมือค้นหาของ Google ซึ่งจะให้คำแนะนำข้อความค้นหาแก่คุณในขณะที่คุณพิมพ์
ในบทต่อไปนี้ คุณจะได้เรียนรู้เกี่ยวกับการปรับปรุงประสบการณ์ผู้ใช้ (UE) ที่เฟรมเวิร์ก JavaScript นำมาสู่นักพัฒนาเว็บ
ที่อยู่พิมพ์ซ้ำ: http://www.denisdeng.com/?p=729
ที่อยู่เดิม: http://www.ibm.com/developerworks/web/library/wa-jsframeworks/index.html