เว็บแอปพลิเคชันส่วนใหญ่ใช้โมเดลคำขอ/ตอบกลับเพื่อรับเพจ HTML ที่สมบูรณ์จากเซิร์ฟเวอร์ มักเป็นกระบวนการซ้ำๆ ของการคลิกปุ่ม รอให้เซิร์ฟเวอร์ตอบสนอง คลิกปุ่มอื่น แล้วรออีกครั้ง ด้วย Ajax และออบเจ็กต์ XMLHttpRequest คุณสามารถใช้โมเดลคำขอ/ตอบกลับที่ไม่ต้องการให้ผู้ใช้รอการตอบกลับจากเซิร์ฟเวอร์ ในบทความนี้ Brett McLaughlin อธิบายวิธีสร้างอินสแตนซ์ XMLHttpRequest ที่สามารถปรับให้เข้ากับเบราว์เซอร์ที่แตกต่างกัน สร้างและส่งคำขอ และตอบสนองต่อเซิร์ฟเวอร์
ในบทความก่อนหน้าในชุดนี้ (ดูแหล่งข้อมูลสำหรับลิงก์) เราได้แนะนำแอปพลิเคชัน Ajax และตรวจสอบแนวคิดพื้นฐานที่ขับเคลื่อนแอปพลิเคชัน Ajax หัวใจสำคัญของสิ่งนี้คือเทคโนโลยีมากมายที่คุณอาจรู้จักอยู่แล้ว: JavaScript, HTML และ XHTML, HTML ไดนามิกเล็กน้อย และ DOM (Document Object Model) บทความนี้จะขยายประเด็นหนึ่งและเน้นไปที่รายละเอียดเฉพาะของอาแจ็กซ์
ในบทความนี้ คุณจะเริ่มติดต่อกับอ็อบเจ็กต์พื้นฐานและพื้นฐานที่สุด รวมถึงวิธีการเขียนโปรแกรมที่เกี่ยวข้องกับ Ajax: อ็อบเจ็กต์ XMLHttpRequest ออบเจ็กต์นี้เป็นเพียงเธรดทั่วไปที่ครอบคลุมแอปพลิเคชัน Ajax ทั้งหมด และอย่างที่คุณคาดหวัง คุณจะต้องเข้าใจออบเจ็กต์นี้อย่างถี่ถ้วนเพื่อตระหนักถึงศักยภาพในการเขียนโปรแกรมทั้งหมดของคุณ ในความเป็นจริง บางครั้งคุณจะพบว่าการใช้ XMLHttpRequest อย่างถูกต้อง คุณจะไม่สามารถใช้ XMLHttpRequest ได้อย่างชัดเจน เกิดอะไรขึ้น?
ข้อมูลโดยย่อเกี่ยวกับ Web 2.0
ก่อนที่จะเจาะลึกโค้ด เรามาดูมุมมองล่าสุดกันก่อน สิ่งสำคัญคือต้องมีความชัดเจนเกี่ยวกับแนวคิดของ Web 2.0 เมื่อคุณได้ยินคำว่า Web 2.0 คุณควรถามก่อนว่า "Web 1.0 คืออะไร" แม้ว่าจะไม่ค่อยมีคนพูดถึง Web 1.0 แต่จริงๆ แล้วคำนี้หมายถึงเว็บแบบดั้งเดิมที่มีรูปแบบคำขอและการตอบสนองที่แตกต่างไปจากเดิมอย่างสิ้นเชิง ตัวอย่างเช่น ไปที่เว็บไซต์ Amazon.com แล้วคลิกปุ่มหรือป้อนคำค้นหา คำขอจะถูกส่งไปยังเซิร์ฟเวอร์ และการตอบกลับจะถูกส่งกลับไปยังเบราว์เซอร์ คำขอไม่ได้เป็นเพียงรายการหนังสือและชื่อเรื่อง แต่เป็นหน้า HTML ที่สมบูรณ์อีกหน้าหนึ่ง ดังนั้น คุณอาจเห็นการกะพริบหรือกระวนกระวายใจเมื่อเว็บเบราว์เซอร์วาดหน้าใหม่ด้วย HTML ใหม่ ในความเป็นจริง คำขอและการตอบกลับจะมองเห็นได้ชัดเจนในทุกหน้าใหม่ที่คุณเห็น
Web 2.0 (ส่วนใหญ่) กำจัดการโต้ตอบไปมาที่มองเห็นได้นี้ ตัวอย่างเช่น เยี่ยมชมไซต์เช่น Google Maps หรือ Flickr (ดูแหล่งข้อมูลสำหรับลิงก์ไปยัง Web 2.0 และไซต์ที่เปิดใช้งาน Ajax เหล่านี้) ตัวอย่างเช่น บน Google Maps คุณสามารถลากแผนที่เพื่อซูมเข้าและออกโดยต้องวาดใหม่ให้น้อยที่สุด แน่นอนว่ายังมีการร้องขอและการตอบกลับอยู่ แต่สิ่งเหล่านั้นถูกซ่อนอยู่เบื้องหลัง ในฐานะผู้ใช้ ประสบการณ์จะสะดวกสบายยิ่งขึ้นและให้ความรู้สึกเหมือนกับแอปพลิเคชันบนเดสก์ท็อป ความรู้สึกและกระบวนทัศน์ใหม่นี้คือสิ่งที่คุณจะได้รับเมื่อมีคนพูดถึง Web 2.0
ข้อกังวลคือการทำให้ปฏิสัมพันธ์ใหม่ๆ เหล่านี้เกิดขึ้นได้ แน่นอนว่าคุณยังคงต้องส่งคำขอและรับการตอบกลับ แต่เป็นการวาด HTML ใหม่สำหรับการโต้ตอบระหว่างคำขอ/การตอบกลับแต่ละครั้ง ที่สร้างความรู้สึกของการโต้ตอบบนเว็บที่ช้าและเกะกะ เห็นได้ชัดว่าเราต้องการวิธีส่งคำขอและรับการตอบกลับที่มีเฉพาะข้อมูลที่จำเป็น แทนที่จะเป็นหน้า HTML ทั้งหมด ครั้งเดียวที่คุณต้องได้รับหน้า HTML ใหม่ทั้งหมดคือเมื่อคุณต้องการให้ผู้ใช้เห็นหน้าใหม่
แต่การโต้ตอบส่วนใหญ่จะเพิ่มรายละเอียดให้กับหน้าที่มีอยู่ แก้ไขข้อความหลัก หรือเขียนทับข้อมูลต้นฉบับ ในกรณีเหล่านี้ วิธีการ Ajax และ Web 2.0 อนุญาตให้ส่งและรับข้อมูลโดยไม่ต้องอัปเดตหน้า HTML ทั้งหมด สำหรับผู้ที่ใช้เวลาออนไลน์เป็นจำนวนมาก ความสามารถนี้จะทำให้แอปพลิเคชันของคุณรู้สึกเร็วขึ้นและตอบสนองมากขึ้น ทำให้พวกเขากลับมาที่ไซต์ของคุณเป็นครั้งคราว
บทนำสู่ XMLHttpRequest
เพื่อให้บรรลุถึงปาฏิหาริย์ที่งดงามนี้อย่างแท้จริง คุณจะต้องคุ้นเคยกับอ็อบเจ็กต์ JavaScript ซึ่งก็คือ XMLHttpRequest เป็นอย่างดี วัตถุเล็กๆ นี้มีอยู่จริงในเบราว์เซอร์หลายตัวมาระยะหนึ่งแล้ว และเป็นหัวใจสำคัญของ Web 2.0, Ajax และอีกมากมายที่ฉันจะกล่าวถึงในคอลัมน์นี้ในอีกไม่กี่เดือนข้างหน้า เพื่อให้เห็นภาพรวมโดยย่อ นี่เป็นเพียงวิธีการและคุณสมบัติบางส่วนที่จะใช้กับออบเจ็กต์นี้
·open(): สร้างคำขอใหม่ไปยังเซิร์ฟเวอร์
·ส่ง(): ส่งคำขอไปยังเซิร์ฟเวอร์
·abort(): ยกเลิกคำขอปัจจุบัน
·readyState: จัดเตรียมสถานะพร้อมของ HTML ปัจจุบัน
·responseText: ข้อความตอบกลับคำขอที่ส่งคืนโดยเซิร์ฟเวอร์
ไม่ต้องกังวลหากคุณไม่ทราบสิ่งเหล่านี้ (หรืออย่างใดอย่างหนึ่ง) เราจะกล่าวถึงแต่ละวิธีและคุณสมบัติในบทความสองสามบทความถัดไป สิ่งที่คุณควรรู้ตอนนี้คือจะทำอย่างไรกับ XMLHttpRequest โปรดทราบว่าวิธีการและคุณสมบัติเหล่านี้เกี่ยวข้องกับการส่งคำขอและการประมวลผลการตอบกลับ ที่จริงแล้ว หากคุณดูวิธีการและคุณสมบัติทั้งหมดของ XMLHttpRequest คุณจะพบว่าวิธีการและคุณสมบัติทั้งหมดเกี่ยวข้องกับโมเดลคำขอ/การตอบกลับที่เรียบง่ายมาก แน่นอนว่าเราจะไม่พบกับออบเจ็กต์ GUI ใหม่โดยเฉพาะหรือวิธีการสุดลึกลับในการสร้างปฏิสัมพันธ์กับผู้ใช้ เราจะใช้คำขอที่เรียบง่ายและการตอบกลับที่เรียบง่ายมาก อาจฟังดูเหมือนไม่มากนัก แต่การใช้วัตถุนี้อย่างดีสามารถปฏิวัติแอปพลิเคชันของคุณได้
ใหม่อย่างง่าย
ก่อนอื่นต้องสร้างตัวแปรใหม่และกำหนดอินสแตนซ์ออบเจ็กต์ XMLHttpRequest ซึ่งทำได้ง่ายเพียงแค่ใช้คำสำคัญใหม่กับชื่อออบเจ็กต์ใน JavaScript ดังที่แสดงในรายการ 1
รายการ 1. การสร้างวัตถุ XMLHttpRequest ใหม่
ไม่ยากใช่ไหม? โปรดจำไว้ว่า JavaScript ไม่ต้องการให้คุณระบุประเภทตัวแปร ดังนั้นคุณไม่จำเป็นต้องทำสิ่งที่คุณทำในรายการที่ 2 (ซึ่งคุณอาจทำในภาษา Java)
รายการ 2. Java pseudocode สำหรับสร้าง XMLHttpRequestXMLHttpRequest
request = new XMLHttpRequest();
ดังนั้นใน JavaScript คุณสร้างตัวแปรโดยใช้ var ตั้งชื่อ (เช่น "request") จากนั้นกำหนดอินสแตนซ์ XMLHttpRequest ใหม่ วัตถุนั้นสามารถนำไปใช้ในฟังก์ชั่นได้
การจัดการข้อผิดพลาด
ทุกสิ่งสามารถผิดพลาดได้จริง ๆ และโค้ดด้านบนไม่ได้ระบุการจัดการข้อผิดพลาดใด ๆ แนวทางที่ดีกว่าคือการสร้างวัตถุและออกอย่างสวยงามหากมีข้อผิดพลาดเกิดขึ้น ตัวอย่างเช่น เบราว์เซอร์รุ่นเก่าๆ (เชื่อหรือไม่ว่ายังมีผู้ใช้ Netscape Navigator เวอร์ชันเก่าอยู่) ไม่รองรับ XMLHttpRequest และคุณต้องแจ้งให้ผู้ใช้เหล่านี้ทราบว่ามีบางอย่างผิดปกติ รายการ 3 แสดงวิธีสร้างออบเจ็กต์นี้เพื่อส่งคำเตือน JavaScript เมื่อเกิดปัญหา
รายการ 3 การสร้าง XMLHttpRequest พร้อมความสามารถในการจัดการข้อผิดพลาด
อย่าลืมเข้าใจขั้นตอนเหล่านี้:
1. สร้างคำขอตัวแปรใหม่และกำหนดค่าเป็นเท็จ เท็จจะถูกใช้เป็นเงื่อนไขการตัดสินในภายหลัง ซึ่งหมายความว่ายังไม่ได้สร้างออบเจ็กต์ XMLHttpRequest
2. เพิ่มบล็อกลอง/จับ:
1) ลองสร้างวัตถุ XMLHttpRequest
2) หากล้มเหลว (catch (ล้มเหลว)) รับประกันว่าค่าของคำขอยังคงเป็นเท็จ
3. ตรวจสอบว่าคำขอยังคงเป็นเท็จหรือไม่ (จะไม่เป็นเท็จหากทุกอย่างเป็นปกติ)
4. หากเกิดปัญหา (คำขอเป็นเท็จ) ให้ใช้คำเตือน JavaScript เพื่อแจ้งให้ผู้ใช้ทราบว่าเกิดปัญหาขึ้น
โค้ดนั้นง่ายมาก และสำหรับ JavaScript และนักพัฒนาเว็บส่วนใหญ่ การทำความเข้าใจอย่างแท้จริงจะใช้เวลานานกว่าการอ่านและเขียนโค้ด ตอนนี้คุณมีโค้ดการสร้างออบเจ็กต์ XMLHttpRequest ส่วนหนึ่งที่ได้รับการตรวจสอบข้อผิดพลาด และสามารถบอกคุณได้ว่ามีอะไรผิดพลาด
ดูเหมือนว่าทุกอย่างจะเรียบร้อยดีกับ Microsoft
อย่างน้อยก็จนกว่าคุณจะลองใช้โค้ดกับ Internet Explorer หากคุณทดลองเช่นนี้ คุณจะเห็นสถานการณ์เลวร้ายแสดงในรูปที่ 1
รูปที่ 1. ข้อผิดพลาดในการรายงานของ Internet Explorer
มีบางอย่างผิดปกติอย่างชัดเจน และ Internet Explorer ก็ไม่ใช่เบราว์เซอร์ที่ล้าสมัยเนื่องจากมีการใช้งานโดย 70% ของโลก กล่าวอีกนัยหนึ่ง ถ้าคุณไม่สนับสนุน Microsoft และ Internet Explorer คุณจะไม่ได้รับความนิยมในโลกเว็บ! ดังนั้นเราจึงต้องใช้แนวทางที่แตกต่างออกไปกับเบราว์เซอร์ Microsoft
ได้รับการตรวจสอบว่า Microsoft รองรับ Ajax แต่เวอร์ชัน XMLHttpRequest มีชื่ออื่น อันที่จริงมันเรียกมันว่าหลายอย่างที่แตกต่างกัน หากคุณใช้ Internet Explorer เวอร์ชันใหม่ คุณจะต้องใช้อ็อบเจ็กต์ Msxml2.XMLHTTP ในขณะที่ Internet Explorer เวอร์ชันเก่าใช้ Microsoft.XMLHTTP เราจำเป็นต้องรองรับออบเจ็กต์ทั้งสองประเภท (รวมถึงเบราว์เซอร์ที่ไม่ใช่ของ Microsoft) ดูที่รายการ 4 ซึ่งสร้างจากโค้ดก่อนหน้าและเพิ่มการรองรับสำหรับ Microsoft
Microsoft มีส่วนเกี่ยวข้องหรือไม่?
มีการเขียนมากมายเกี่ยวกับความสนใจและการมีส่วนร่วมที่เพิ่มขึ้นของ Ajax และ Microsoft ในด้านนี้ ในความเป็นจริง มีการกล่าวกันว่า Internet Explorer เวอร์ชันล่าสุดของ Microsoft เวอร์ชัน 7.0 ซึ่งจะออกในช่วงครึ่งหลังของปี 2549 จะเริ่มรองรับ XMLHttpRequest โดยตรง โดยให้คุณใช้คีย์เวิร์ดใหม่แทนโค้ดสร้าง Msxml2.XMLHTTP ทั้งหมดได้ แต่อย่าเพิ่งตื่นเต้นไป เพราะเบราว์เซอร์รุ่นเก่ายังต้องได้รับการสนับสนุน ดังนั้นโค้ดข้ามเบราว์เซอร์จะไม่หายไปในเร็วๆ นี้
รายการ 4. การเพิ่มการรองรับเบราว์เซอร์ Microsoft
ไม่มีอะไรยากที่จะเข้าใจที่นี่ ขั้นแรก รหัสจะสร้างโทรศัพท์ตัวแปรใหม่และกำหนดค่าของฟิลด์แบบฟอร์มด้วย ID "โทรศัพท์" รายการ 8 แสดง XHTML สำหรับแบบฟอร์มนี้ ซึ่งคุณสามารถดูฟิลด์โทรศัพท์และแอตทริบิวต์รหัสได้
รายการ 8. พิซซ่าหน้าหักคอ
ป้อนหมายเลขโทรศัพท์ของคุณ:
<ประเภทอินพุต = "ข้อความ" ขนาด = "14" ชื่อ = "โทรศัพท์" id = "โทรศัพท์"
onChange="getCustomerInfo();" />
คำสั่งซื้อของคุณจะถูกจัดส่ง
พิมพ์คำสั่งซื้อของคุณที่นี่:
โปรดทราบว่าเมื่อผู้ใช้ป้อนหมายเลขโทรศัพท์หรือเปลี่ยนหมายเลขโทรศัพท์ เมธอด getCustomerInfo() ที่แสดงในรายการ 8 จะถูกทริกเกอร์ เมธอดนี้รับหมายเลขโทรศัพท์และสร้างสตริง URL ที่จัดเก็บไว้ในตัวแปร url โปรดจำไว้ว่า เนื่องจากโค้ด Ajax อยู่ในแซนด์บ็อกซ์และสามารถเชื่อมต่อกับโดเมนเดียวกันเท่านั้น จึงไม่จำเป็นต้องมีชื่อโดเมนใน URL สคริปต์ในตัวอย่างนี้เรียกว่า /cgi-local/lookupCustomer.php สุดท้าย หมายเลขโทรศัพท์จะถูกต่อท้ายสคริปต์เป็นพารามิเตอร์ GET: "phone=" + Escape(phone)
หากคุณไม่เคยเห็นเมธอด Escape() มาก่อน จะใช้เพื่อเลี่ยงอักขระใดๆ ที่ไม่สามารถส่งในรูปแบบข้อความที่ชัดเจนได้อย่างถูกต้อง ตัวอย่างเช่น การเว้นวรรคในหมายเลขโทรศัพท์จะถูกแปลงเป็นอักขระ %20 ทำให้สามารถส่งอักขระเหล่านี้ใน URL ได้
คุณสามารถเพิ่มพารามิเตอร์ได้มากเท่าที่ต้องการ ตัวอย่างเช่น หากคุณต้องการเพิ่มพารามิเตอร์อื่น เพียงต่อท้าย URL และคั่นด้วยอักขระเครื่องหมายและ (&) [พารามิเตอร์แรกถูกแยกออกจากชื่อสคริปต์ด้วยเครื่องหมายคำถาม (?)]
เปิดคำขอ
เมื่อคุณมี URL ที่จะเชื่อมต่อแล้ว คุณสามารถกำหนดค่าคำขอได้ ซึ่งสามารถทำได้โดยใช้เมธอด open() ของวัตถุ XMLHttpRequest วิธีนี้มีพารามิเตอร์ห้าตัว:
ประเภทคำขอ: ประเภทของคำขอที่จะส่ง ค่าทั่วไปคือ GET หรือ POST แต่สามารถส่งคำขอ HEAD ได้เช่นกัน
url: URL ที่จะเชื่อมต่อ
asynch: จริง หากคุณต้องการใช้การเชื่อมต่อแบบอะซิงโครนัส มิฉะนั้นจะเป็นเท็จ พารามิเตอร์นี้เป็นทางเลือกและมีค่าเริ่มต้นเป็นจริง
ชื่อผู้ใช้: หากจำเป็นต้องมีการรับรองความถูกต้อง คุณสามารถระบุชื่อผู้ใช้ได้ที่นี่ พารามิเตอร์ทางเลือกนี้ไม่มีค่าเริ่มต้น รหัสผ่าน: หากจำเป็นต้องมีการรับรองความถูกต้อง คุณสามารถระบุรหัสผ่านได้ที่นี่ พารามิเตอร์ทางเลือกนี้ไม่มีค่าเริ่มต้น
open() เปิดหรือไม่
นักพัฒนาอินเทอร์เน็ตไม่เห็นด้วยกับสิ่งที่ open() วิธีการทำ แต่มันไม่ได้เปิดคำขอจริงๆ หากคุณตรวจสอบเครือข่ายและการถ่ายโอนข้อมูลระหว่างเพจ XHTML/Ajax และสคริปต์การเชื่อมต่อ คุณจะไม่เห็นการสื่อสารใดๆ เมื่อเรียกใช้เมธอด open() ไม่ชัดเจนว่าเหตุใดจึงเลือกชื่อนี้ แต่ก็ไม่ใช่ตัวเลือกที่ดีอย่างชัดเจน
โดยปกติแล้วจะใช้พารามิเตอร์สามตัวแรก ในความเป็นจริง แม้ว่าจำเป็นต้องมีการเชื่อมต่อแบบอะซิงโครนัส พารามิเตอร์ที่สามควรระบุเป็น "จริง" นี่เป็นค่าเริ่มต้น แต่การยืนยันอย่างชัดเจนว่าคำขอเป็นแบบอะซิงโครนัสหรือซิงโครนัสนั้นง่ายต่อการเข้าใจ
การรวมสิ่งเหล่านี้เข้าด้วยกันมักจะได้ผลลัพธ์เป็นบรรทัดของโค้ดเหมือนกับที่แสดงในรายการ 9
รายการ 9. เปิด
ฟังก์ชันคำขอ getCustomerInfo() {
โทรศัพท์ var = document.getElementById("โทรศัพท์").value;
var url = "/cgi-local/lookupCustomer.php?phone=" + หลบหนี (โทรศัพท์);
request.open("GET", url, true);
}
เมื่อคุณตั้งค่า URL แล้ว ที่เหลือก็เป็นเรื่องง่าย สำหรับคำขอส่วนใหญ่ GET ก็เพียงพอแล้ว (คุณจะเห็นเมื่อต้องใช้ POST ในบทความต่อๆ ไป) รวมถึง URL และทั้งหมดที่คุณต้องใช้เมธอด open()
ความไม่ซิงโครไนซ์ที่ท้าทาย
ในบทความถัดไปในชุดนี้ ฉันจะใช้เวลาส่วนใหญ่ในการเขียนและใช้โค้ดอะซิงโครนัส แต่คุณควรเข้าใจว่าทำไมพารามิเตอร์สุดท้ายของ open() จึงมีความสำคัญมาก ในโมเดลคำขอ/การตอบกลับทั่วไป เช่น Web 1.0 ไคลเอนต์ (เบราว์เซอร์หรือโค้ดที่ทำงานบนเครื่องท้องถิ่น) ทำการร้องขอไปยังเซิร์ฟเวอร์ คำขอเป็นแบบซิงโครนัส กล่าวคือ ไคลเอ็นต์รอการตอบกลับจากเซิร์ฟเวอร์ เมื่อไคลเอนต์กำลังรอ คุณจะได้รับแจ้งการรอในรูปแบบใดรูปแบบหนึ่งเป็นอย่างน้อย:
·นาฬิกาทราย (โดยเฉพาะบน Windows)
·ลูกบอลหมุน (โดยปกติจะใช้กับเครื่อง Mac)
·โดยพื้นฐานแล้วแอปพลิเคชั่นค้างและหลังจากนั้นครู่หนึ่งเคอร์เซอร์ก็เปลี่ยนไป
นี่คือเหตุผลว่าทำไมเว็บแอปพลิเคชันจึงรู้สึกอึดอัดหรือช้า—ขาดการโต้ตอบที่แท้จริง เมื่อกดปุ่ม แอปพลิเคชันจะใช้งานไม่ได้จนกว่าจะมีการตอบกลับคำขอที่เพิ่งถูกทริกเกอร์ หากคำขอต้องการการประมวลผลเซิร์ฟเวอร์จำนวนมาก ระยะเวลารออาจยาวนาน (อย่างน้อยก็ในมัลติโปรเซสเซอร์ โลกที่ไม่ต้องรอ DSL)
คำขอแบบอะซิงโครนัสไม่รอการตอบกลับจากเซิร์ฟเวอร์ แอปพลิเคชันยังคงทำงานต่อไปหลังจากส่งคำขอ ผู้ใช้ยังคงสามารถป้อนข้อมูลในแบบฟอร์มบนเว็บหรือแม้กระทั่งออกจากแบบฟอร์มได้ ไม่มีลูกบอลหรือนาฬิกาทรายหมุน และแอปก็ไม่ค้างอย่างเห็นได้ชัด เซิร์ฟเวอร์ตอบสนองต่อคำขออย่างเงียบๆ และเมื่อดำเนินการเสร็จแล้ว จะบอกผู้ร้องขอเดิมว่างานเสร็จสิ้นแล้ว (คุณจะเห็นได้ว่าเร็วแค่ไหน) ผลลัพธ์ที่ได้คือแอปที่รู้สึกแล็คหรือเฉื่อยน้อยลง ตอบสนองได้ดีขึ้น โต้ตอบได้ และรู้สึกเร็วขึ้นมาก นี่เป็นเพียงส่วนหนึ่งของ Web 2.0 แต่เป็นส่วนสำคัญ ส่วนประกอบ GUI เก่าทั้งหมดและกระบวนทัศน์การออกแบบเว็บไม่สามารถเอาชนะโมเดลคำขอ/การตอบสนองแบบซิงโครนัสที่ช้าได้
การส่งคำขอ
เมื่อกำหนดค่าด้วย open() คุณสามารถส่งคำขอได้ โชคดีที่วิธีการส่งคำขอมีชื่อที่เหมาะสมมากกว่า open(): send()
send() มีเพียงพารามิเตอร์เดียวเท่านั้นซึ่งเป็นเนื้อหาที่จะส่ง แต่ก่อนที่จะพิจารณาวิธีนี้ โปรดจำไว้ว่าคุณได้ส่งข้อมูลผ่าน URL แล้ว:
var url = "/cgi-local/lookupCustomer.php?phone=" + Escape(phone);
แม้ว่าคุณสามารถใช้ send() เพื่อส่งข้อมูลได้ ,แต่ก็สามารถส่งข้อมูลผ่าน URL ได้ด้วยนั่นเอง ในความเป็นจริง ด้วยคำขอ GET (ซึ่งเกิดขึ้นในประมาณ 80% ของแอปพลิเคชัน Ajax ทั่วไป) การส่งข้อมูลโดยใช้ URL จึงง่ายกว่ามาก หากคุณต้องการส่งข้อมูลที่ปลอดภัยหรือ XML คุณอาจต้องการพิจารณาใช้ send() เพื่อส่งเนื้อหา (ข้อมูลที่ปลอดภัยและข้อความ XML จะกล่าวถึงในบทความต่อๆ ไปในชุดนี้) หากคุณไม่ต้องการส่งข้อมูลผ่าน send() เพียงส่งค่า null เป็นพารามิเตอร์ของวิธีนี้ ดังนั้นคุณจะพบว่าทั้งหมดที่คุณต้องทำในตัวอย่างในบทความนี้ (ดูรายการ 10)
รายการ 10. ส่ง
ฟังก์ชันคำขอ getCustomerInfo() {
โทรศัพท์ var = document.getElementById("โทรศัพท์").value;
var url = "/cgi-local/lookupCustomer.php?phone=" + หลบหนี (โทรศัพท์);
request.open("GET", url, true);
คำขอส่ง (null);
}
ระบุวิธีการโทรกลับ
สิ่งที่เราทำตอนนี้มีอะไรใหม่ ปฏิวัติ หรืออะซิงโครนัสน้อยมาก ต้องยอมรับว่าคีย์เวิร์ดเล็กๆ "true" ในเมธอด open() สร้างคำขอแบบอะซิงโครนัส แต่นอกเหนือจากนั้น โค้ดก็ไม่ต่างจากการเขียนโปรแกรมด้วย Java servlet และ JSP, PHP หรือ Perl แล้วความลับที่ยิ่งใหญ่ที่สุดของ Ajax และ Web 2.0 คืออะไร? ความลับอยู่ในคุณสมบัติที่เรียบง่ายพร้อมระบุการเปลี่ยนแปลงของ XMLHttpRequest
อย่าลืมทำความเข้าใจขั้นตอนในโค้ดนี้ก่อน (ตรวจสอบรายการ 10 หากจำเป็น) สร้างคำขอแล้วทำการร้องขอ นอกจากนี้ เนื่องจากคำขอเป็นแบบอะซิงโครนัส เมธอด JavaScript (getCustomerInfo() ในตัวอย่าง) จึงไม่รอเซิร์ฟเวอร์ ดังนั้นโค้ดจะยังคงดำเนินการต่อไป นั่นคือ วิธีการจะออก และการควบคุมจะถูกส่งกลับไปยังแบบฟอร์ม ผู้ใช้สามารถป้อนข้อมูลต่อไปได้และแอปพลิเคชันไม่รอเซิร์ฟเวอร์
สิ่งนี้ทำให้เกิดคำถามที่น่าสนใจ: จะเกิดอะไรขึ้นหลังจากที่เซิร์ฟเวอร์ดำเนินการตามคำขอเสร็จสิ้นแล้ว คำตอบคือไม่มีอะไรเกิดขึ้น อย่างน้อยก็สำหรับโค้ดปัจจุบัน! แน่นอนว่าวิธีนี้ใช้ไม่ได้ผล ดังนั้นเซิร์ฟเวอร์จึงต้องการคำแนะนำบางอย่างเกี่ยวกับสิ่งที่ต้องทำหลังจากเสร็จสิ้นการประมวลผลคำขอที่ส่งถึงเซิร์ฟเวอร์ผ่าน XMLHttpRequest
ฟังก์ชั่นอ้างอิงใน JavaScript:
JavaScript เป็นภาษาที่พิมพ์ไม่ชัดเจน และคุณสามารถใช้ตัวแปรเพื่ออ้างอิงอะไรก็ได้ ดังนั้นหากคุณประกาศฟังก์ชัน updatePage() JavaScript ก็จะถือว่าชื่อฟังก์ชันเป็นตัวแปรด้วย กล่าวอีกนัยหนึ่ง คุณสามารถอ้างอิงฟังก์ชันในโค้ดของคุณโดยใช้ชื่อตัวแปร updatePage
รายการ 11. ตั้งค่า
ฟังก์ชันวิธีการโทรกลับ getCustomerInfo() {
โทรศัพท์ var = document.getElementById("โทรศัพท์").value;
var url = "/cgi-local/lookupCustomer.php?phone=" + หลบหนี (โทรศัพท์);
request.open("GET", url, true);
request.onreadystatechange = อัพเดตเพจ;
คำขอส่ง (null);
}
สิ่งสำคัญที่ควรทราบคือตั้งค่าคุณสมบัตินี้ไว้ที่ใดในโค้ด - จะถูกตั้งค่าก่อนที่จะเรียกใช้ send() ต้องตั้งค่าคุณสมบัตินี้ก่อนที่จะส่งคำขอเพื่อให้เซิร์ฟเวอร์สามารถดูได้หลังจากตอบคำขอที่เสร็จสมบูรณ์แล้ว ตอนนี้สิ่งที่เหลืออยู่คือการเขียนเมธอด updatePage() ซึ่งเป็นจุดเน้นของส่วนสุดท้ายของบทความนี้
เซิร์ฟเวอร์ประมวลผลตอบสนอง
ต่อคำขอ ผู้ใช้มีความสุขในการใช้เว็บฟอร์ม (ในขณะที่เซิร์ฟเวอร์กำลังประมวลผลคำขอ) และตอนนี้เซิร์ฟเวอร์ได้เสร็จสิ้นการประมวลผลคำขอแล้ว เซิร์ฟเวอร์ดูที่แอตทริบิวต์onreadystatechangeเพื่อกำหนดวิธีที่จะเรียก มิฉะนั้น ให้ปฏิบัติต่อแอปพลิเคชันของคุณเหมือนกับแอปพลิเคชันอื่นๆ ไม่ว่าจะเป็นแบบอะซิงโครนัสหรือไม่ก็ตาม กล่าวอีกนัยหนึ่ง คุณไม่จำเป็นต้องดำเนินการพิเศษเพื่อเขียนวิธีการที่ตอบสนองต่อเซิร์ฟเวอร์ คุณเพียงแค่ต้องเปลี่ยนแบบฟอร์ม ปล่อยให้ผู้ใช้ไปที่ URL อื่น หรือทำทุกอย่างที่เซิร์ฟเวอร์ตอบกลับต้องการ ในส่วนนี้เรามุ่งเน้นไปที่การตอบสนองต่อเซิร์ฟเวอร์และการดำเนินการทั่วไป - การเปลี่ยนแปลงส่วนของแบบฟอร์มที่ผู้ใช้เห็นทันที
Callbacks และ Ajax
ตอนนี้เราได้เห็นวิธีการบอกเซิร์ฟเวอร์ว่าต้องทำอย่างไรเมื่อเสร็จแล้ว: ตั้งค่าคุณสมบัติ onreadystatechange ของออบเจ็กต์ XMLHttpRequest ให้เป็นชื่อของฟังก์ชันที่จะเรียกใช้ ด้วยวิธีนี้ ฟังก์ชันจะถูกเรียกใช้โดยอัตโนมัติหลังจากที่เซิร์ฟเวอร์ประมวลผลคำขอแล้ว นอกจากนี้ยังไม่จำเป็นต้องกังวลเกี่ยวกับพารามิเตอร์ใดๆ ของฟังก์ชันอีกด้วย เราเริ่มต้นด้วยวิธีการง่ายๆ ดังแสดงในรายการที่ 12
รายการ 12. รหัสสำหรับวิธีการโทรกลับ
มันแค่ออกคำเตือนง่ายๆ เพื่อแจ้งให้คุณทราบเมื่อเซิร์ฟเวอร์ทำงานเสร็จเรียบร้อยแล้ว ลองใช้โค้ดนี้บนหน้าเว็บของคุณเองแล้วเปิดในเบราว์เซอร์ (ดูรายการ 8 หากคุณต้องการดู XHTML ในตัวอย่างนี้) กรอกหมายเลขโทรศัพท์แล้วออกจากช่องจะพบหน้าต่างแจ้งเตือน Pop-up (ดังรูปที่ 3) แต่เมื่อคลิก OK ก็จะปรากฏขึ้นมาอีกครั้ง...
รูปที่ 3. รหัส Ajax สำหรับคำเตือนแบบ Pop-up
คุณอาจเห็นคำเตือนสองสามหรือสี่ครั้งก่อนที่แบบฟอร์มจะหยุดปรากฏขึ้นทั้งนี้ขึ้นอยู่กับเบราว์เซอร์ เกิดอะไรขึ้น? ปรากฎว่าเราไม่ได้พิจารณาสถานะความพร้อมของ HTTP ซึ่งเป็นส่วนสำคัญของวงจรคำขอ/ตอบกลับ
สถานะพร้อม HTTP
ตามที่กล่าวไว้ก่อนหน้านี้ เซิร์ฟเวอร์ค้นหาวิธีการที่จะเรียกในแอตทริบิวต์ onreadystatechange ของ XMLHttpRequest หลังจากเสร็จสิ้นการร้องขอ นี่เป็นเรื่องจริงแต่ไม่สมบูรณ์ ในความเป็นจริง มันจะเรียกเมธอดนี้ทุกครั้งที่สถานะพร้อมใช้ HTTP เปลี่ยนแปลง สิ่งนี้หมายความว่าอย่างไร? ขั้นแรก คุณต้องเข้าใจสถานะความพร้อมของ HTTP
สถานะพร้อมใช้ HTTP แสดงถึงสถานะหรือเงื่อนไขของคำขอ ใช้เพื่อกำหนดว่าคำขอได้เริ่มต้น ได้รับการตอบกลับ หรือโมเดลคำขอ/ตอบกลับเสร็จสมบูรณ์แล้วหรือไม่ นอกจากนี้ยังสามารถช่วยพิจารณาว่าจะปลอดภัยหรือไม่ในการอ่านข้อความตอบกลับหรือข้อมูลที่เซิร์ฟเวอร์ให้ไว้ มีสถานะความพร้อมห้าสถานะที่ต้องระวังในแอปพลิเคชัน Ajax:
·0: ยังไม่ได้ออกคำขอ (ก่อนที่จะเรียกใช้ open())
·1: คำขอได้ถูกสร้างขึ้นแล้ว แต่ยังไม่ได้ส่ง (ก่อนที่จะเรียกว่า send())
·2: คำขอถูกส่งไปแล้วและกำลังดำเนินการ (โดยปกติแล้วส่วนหัวของเนื้อหาจะได้รับจากการตอบกลับ)
· 3: คำขอได้รับการประมวลผลแล้วและข้อมูลบางส่วนมักจะมีอยู่ในการตอบสนอง แต่เซิร์ฟเวอร์ยังไม่ตอบสนองจนเสร็จสมบูรณ์
· 4: การตอบกลับเสร็จสมบูรณ์ และคุณสามารถเข้าถึงการตอบกลับของเซิร์ฟเวอร์และใช้งานได้
เช่นเดียวกับปัญหาข้ามเบราว์เซอร์ส่วนใหญ่ สถานะพร้อมเหล่านี้ไม่ได้ใช้อย่างสม่ำเสมอ คุณอาจคาดหวังว่าสถานะความพร้อมของงานจะเปลี่ยนจาก 0 เป็น 1 เป็น 2 เป็น 3 เป็น 4 แต่กรณีนี้ไม่ค่อยเกิดขึ้น เบราว์เซอร์บางตัวไม่เคยรายงาน 0 หรือ 1 แต่เริ่มต้นด้วย 2 จากนั้น 3 และ 4 โดยตรง เบราว์เซอร์อื่นรายงานสถานะทั้งหมด คนอื่นรายงานสถานะพร้อม 1 หลายครั้ง ดังที่เห็นในส่วนก่อนหน้า เซิร์ฟเวอร์เรียก updatePage() หลายครั้ง และกล่องคำเตือนจะปรากฏขึ้นทุกครั้งที่มีการเรียก - มันอาจจะแตกต่างจากที่คาดไว้!
สำหรับการเขียนโปรแกรม Ajax สถานะเดียวที่ต้องจัดการโดยตรงคือสถานะพร้อม 4 ซึ่งบ่งชี้ว่าการตอบสนองของเซิร์ฟเวอร์เสร็จสมบูรณ์และข้อมูลการตอบสนองนั้นปลอดภัยในการใช้งาน จากนี้ บรรทัดแรกในวิธีการโทรกลับควรมีลักษณะเหมือนรายการ 13
รายการ 13.
ฟังก์ชั่นการตรวจสอบความพร้อม updatePage() {
ถ้า (คำขอ readyState == 4)
alert("เซิร์ฟเวอร์เสร็จสิ้น!");
}
หลังจากแก้ไข คุณสามารถมั่นใจได้ว่าการประมวลผลของเซิร์ฟเวอร์เสร็จสมบูรณ์แล้ว ลองใช้โค้ด Ajax เวอร์ชันใหม่ แล้วคุณจะเห็นข้อความเตือนแสดงเพียงครั้งเดียวตามที่คาดไว้
รหัสสถานะ HTTP
แม้ว่ารหัสในรายการ 13 ดูเหมือนจะใช้ได้ แต่มีปัญหาเกิดขึ้น - จะเกิดอะไรขึ้นหากเซิร์ฟเวอร์ตอบสนองต่อคำขอและดำเนินการเสร็จสิ้นแต่รายงานข้อผิดพลาด โปรดทราบว่าโค้ดฝั่งเซิร์ฟเวอร์ควรเข้าใจว่ามันถูกเรียกโดย Ajax, JSP, ฟอร์ม HTML ธรรมดา หรือโค้ดประเภทอื่นๆ แต่สามารถรายงานข้อมูลโดยใช้วิธีการเฉพาะของเว็บแบบดั้งเดิมเท่านั้น ในโลกของเว็บ รหัส HTTP สามารถจัดการกับปัญหาต่าง ๆ ที่อาจเกิดขึ้นในการร้องขอได้
ตัวอย่างเช่น คุณต้องพบสถานการณ์ที่คุณป้อนคำขอ URL ผิดและได้รับรหัสข้อผิดพลาด 404 ซึ่งหมายความว่าไม่มีหน้าเว็บนั้น นี่เป็นเพียงหนึ่งในรหัสข้อผิดพลาดจำนวนมากที่สามารถรับได้ด้วยคำขอ HTTP (ดูลิงก์ในแหล่งข้อมูลเพื่อดูรายการรหัสสถานะทั้งหมด) 403 และ 401 ซึ่งระบุว่าข้อมูลที่เข้าถึงได้รับการคุ้มครองหรือห้ามก็เป็นเรื่องปกติเช่นกัน ไม่ว่าในกรณีใด รหัสข้อผิดพลาดเหล่านี้ได้มาจากการตอบสนองที่เสร็จสมบูรณ์ กล่าวอีกนัยหนึ่ง เซิร์ฟเวอร์ตอบสนองคำขอ (นั่นคือ สถานะพร้อมใช้ HTTP คือ 4) แต่ไม่ได้ส่งคืนข้อมูลที่ไคลเอ็นต์คาดหวัง
ดังนั้นนอกจากสถานะพร้อมแล้ว คุณยังต้องตรวจสอบสถานะ HTTP ด้วย รหัสสถานะที่คาดหวังคือ 200 ซึ่งหมายความว่าทุกอย่างเป็นไปด้วยดี หากสถานะพร้อมคือ 4 และรหัสสถานะคือ 200 คุณสามารถประมวลผลข้อมูลของเซิร์ฟเวอร์ได้ และข้อมูลควรเป็นข้อมูลที่ร้องขอ (แทนที่จะเป็นข้อผิดพลาดหรือข้อมูลที่เป็นปัญหาอื่นๆ) ดังนั้นเราจึงจำเป็นต้องเพิ่มการตรวจสอบสถานะในวิธีการโทรกลับ ดังที่แสดงในรายการ 14
รายการ 14. ตรวจสอบ
ฟังก์ชันรหัสสถานะ HTTP updatePage() {
ถ้า (คำขอ readyState == 4)
ถ้า (request.status == 200)
alert("เซิร์ฟเวอร์เสร็จสิ้น!");
}
หากต้องการเพิ่มการจัดการข้อผิดพลาดที่มีประสิทธิภาพยิ่งขึ้น และพยายามหลีกเลี่ยงภาวะแทรกซ้อนที่มากเกินไปโดยการเพิ่มการตรวจสอบรหัสสถานะหรือสองรายการ ลองดูที่เวอร์ชันแก้ไขของ updatePage() ในรายการ 15
รายการ 15. เพิ่มฟังก์ชันตรวจสอบข้อผิดพลาดเล็กน้อย
updatePage() {
ถ้า (คำขอ readyState == 4)
ถ้า (request.status == 200)
alert("เซิร์ฟเวอร์เสร็จสิ้น!");
อย่างอื่นถ้า (request.status == 404)
alert("ไม่มี URL คำขอ");
อื่น
alert("ข้อผิดพลาด: รหัสสถานะคือ " + request.status);
}
ตอนนี้เปลี่ยน URL ใน getCustomerInfo() เป็น URL ที่ไม่มีอยู่และดูว่าเกิดอะไรขึ้น คุณควรเห็นข้อความเตือนระบุว่าไม่มี URL ที่ร้องขอ เยี่ยมมาก! เป็นการยากที่จะจัดการกับเงื่อนไขข้อผิดพลาดทั้งหมด แต่การเปลี่ยนแปลงเล็กน้อยนี้สามารถครอบคลุม 80% ของปัญหาในเว็บแอปพลิเคชันทั่วไป
การอ่านข้อความตอบกลับ
ทำให้มั่นใจได้ว่าคำขอได้รับการประมวลผล (ผ่านสถานะพร้อม) เซิร์ฟเวอร์ให้การตอบกลับปกติ (ผ่านรหัสสถานะ) และในที่สุดเราก็สามารถประมวลผลข้อมูลที่ส่งคืนโดยเซิร์ฟเวอร์ ข้อมูลที่ส่งคืนจะถูกเก็บไว้ในคุณสมบัติการตอบสนองของวัตถุ XMLHTTPREQUEST
เนื้อหาของข้อความใน ResponseText เช่นรูปแบบและความยาวนั้นมีความคลุมเครือโดยเจตนา วิธีนี้เซิร์ฟเวอร์สามารถตั้งค่าข้อความเป็นอะไรก็ได้ ตัวอย่างเช่นสคริปต์หนึ่งอาจส่งคืนค่าที่คั่นด้วยเครื่องหมายจุลภาคอื่นใช้ท่อ (อักขระ |) เพื่อแยกค่าและยังส่งคืนสตริงข้อความยาว ขึ้นอยู่กับเซิร์ฟเวอร์ที่จะตัดสินใจว่าจะไปที่ไหน
ในตัวอย่างที่ใช้ในบทความนี้เซิร์ฟเวอร์จะส่งคืนคำสั่งซื้อล่าสุดของลูกค้าและที่อยู่ลูกค้าคั่นด้วยอักขระท่อ คำสั่งซื้อและที่อยู่จะถูกใช้เพื่อตั้งค่าองค์ประกอบในแบบฟอร์ม
รายการ 16.
ฟังก์ชั่นการตอบสนองเซิร์ฟเวอร์ Handling updatePage () {
if (request.readyState == 4) {
if (request.status == 200) {
การตอบสนอง var = request.responsetext.split ("|");
document.getElementById ("order"). value = response [0];
document.getElementById ("ที่อยู่"). innerhtml =
การตอบสนอง [1]. แทนที่ (/ n/g, "");
} อื่น
การแจ้งเตือน ("สถานะคือ" + request.status);
-
}
ก่อนอื่นรับ ResponseText และแยกออกจากท่อโดยใช้วิธี JavaScript Split () อาร์เรย์ที่ได้จะถูกวางไว้ในการตอบสนอง ค่าแรกในอาร์เรย์ - คำสั่งซื้อก่อนหน้านี้ - เข้าถึงได้ด้วยการตอบกลับ [0] และตั้งค่าเป็นค่าของฟิลด์ที่มี ID "คำสั่งซื้อ" การตอบกลับค่าที่สอง [1] ที่อยู่ของลูกค้าต้องใช้การประมวลผลเพิ่มเติมเล็กน้อย เนื่องจากบรรทัดในที่อยู่จะถูกคั่นด้วยตัวคั่นบรรทัดปกติ (อักขระ " n") รหัสจำเป็นต้องใช้ตัวคั่นเส้นสไตล์ XHTML
แทน กระบวนการเปลี่ยนทำโดยใช้ฟังก์ชั่นแทนที่ () และนิพจน์ทั่วไป ในที่สุดข้อความที่แก้ไขจะใช้เป็น HTML ภายในในรูปแบบ HTML Div ผลที่ได้คือแบบฟอร์มจะอัปเดตข้อมูลลูกค้าอย่างฉับพลันดังแสดงในรูปที่ 4
รูปที่ 4. แบ่งรูปแบบคอหลังจากได้รับข้อมูลลูกค้า
ก่อนที่จะจบบทความนี้ฉันอยากจะแนะนำคุณลักษณะสำคัญอีกประการหนึ่งของ Xmlhttprequest, Responsexml คุณสมบัตินี้มี (ตามที่คุณอาจเดาได้) การตอบสนอง XML หากเซิร์ฟเวอร์เลือกใช้การตอบกลับ XML การประมวลผลการตอบสนอง XML นั้นแตกต่างจากการประมวลผลข้อความสามัญที่เกี่ยวข้องกับการแยกวิเคราะห์รูปแบบวัตถุเอกสาร (DOM) และปัญหาอื่น ๆ XML จะได้รับการคุ้มครองเพิ่มเติมในบทความในภายหลัง แต่เนื่องจาก Responsexml มักจะถูกกล่าวถึงร่วมกับ ResponsetExt จึงสมควรได้รับการกล่าวถึงที่นี่ สำหรับแอปพลิเคชัน AJAX ที่ง่ายต่อการตอบสนองจะเพียงพอ แต่ในไม่ช้าคุณจะเห็นว่า XML สามารถจัดการได้ดีกับแอปพลิเคชัน AJAX
บทสรุป
คุณอาจจะเบื่อหน่ายกับ XMLHTTPREQUEST เล็กน้อย แต่คุณจะใช้วัตถุนี้ซ้ำแล้วซ้ำอีกในทุกหน้าและแอปพลิเคชันที่คุณเขียนโดยใช้ AJAX ตรงไปตรงมามีบางอย่างที่จะพูดสำหรับ xmlhttprequest บทความถัดไปจะแนะนำวิธีการใช้โพสต์และรับการร้องขอเพื่อตั้งส่วนหัวเนื้อหาในคำขอและอ่านส่วนหัวเนื้อหาจากการตอบกลับเซิร์ฟเวอร์และเข้าใจวิธีการเข้ารหัสคำขอและประมวลผล XML ในรูปแบบคำขอ/การตอบกลับ
หลังจากนั้นเราจะแนะนำกล่องเครื่องมือ AJAX ทั่วไป กล่องเครื่องมือเหล่านี้ซ่อนรายละเอียดมากมายที่อธิบายไว้ในบทความนี้ทำให้การเขียนโปรแกรม AJAX ง่ายขึ้น คุณอาจสงสัยว่าทำไมคุณต้องเขียนโค้ดรายละเอียดระดับต่ำเมื่อมีกล่องเครื่องมือมากมาย คำตอบคือมันยากที่จะพบปัญหาในแอปพลิเคชันโดยไม่ทราบว่าแอปพลิเคชันกำลังทำอะไรอยู่
ดังนั้นอย่าเพิกเฉยต่อรายละเอียดหรือเรียกดูและหากมีสิ่งผิดปกติเกิดขึ้นกับกล่องเครื่องมือที่มีประโยชน์และงดงามนี้คุณจะไม่ต้องเกาหัวหรือส่งอีเมลเพื่อรองรับ หากคุณเข้าใจวิธีการใช้ XMLHTTPREQUEST โดยตรงคุณจะพบว่ามันง่ายต่อการดีบักและแก้ปัญหาที่แปลกประหลาดที่สุด กล่องเครื่องมือจะดีก็ต่อเมื่อคุณปล่อยให้มันแก้ปัญหาของคุณ
ดังนั้นโปรดทำความคุ้นเคยกับ xmlhttprequest ในความเป็นจริงหากคุณมีรหัส AJAX ที่ใช้กล่องเครื่องมือลองเขียนใหม่โดยใช้วัตถุ XMLHTTPRequest และคุณสมบัติและวิธีการของมัน นี่คือการออกกำลังกายที่ดีเพื่อช่วยให้คุณเข้าใจหลักการได้ดีขึ้น
บทความถัดไปจะหารือเกี่ยวกับวัตถุนี้ต่อไปสำรวจคุณสมบัติที่น่าสนใจกว่า (เช่น Responsexml) และวิธีการใช้คำขอโพสต์และส่งข้อมูลในรูปแบบที่แตกต่างกัน โปรดเริ่มเขียนโค้ดและเราจะหารือกันอีกครั้งในหนึ่งเดือน