[เรียนรู้อาแจ็กซ์ในสี่วัน] วันแรกของการเรียนรู้การสอนอาแจ็กซ์

Ajax ประกอบด้วย HTML, เทคโนโลยี JavaScript™, DHTML และ DOM เป็นวิธีที่ยอดเยี่ยมในการแปลงอินเทอร์เฟซเว็บที่ยุ่งยากให้กลายเป็นแอปพลิเคชัน Ajax แบบโต้ตอบ บทความนี้เขียนโดยผู้เชี่ยวชาญของ Ajax แสดงให้เห็นว่าเทคโนโลยีเหล่านี้ทำงานร่วมกันอย่างไร ตั้งแต่ภาพรวมทั่วไปไปจนถึงการอภิปรายโดยละเอียด เพื่อทำให้การพัฒนาเว็บที่มีประสิทธิภาพกลายเป็นความจริง นอกจากนี้เขายังทำให้เข้าใจแนวคิดหลักของ Ajax อย่างชัดเจน รวมถึงออบเจ็กต์ XMLHttpRequest

ห้าปีที่แล้ว ถ้าคุณไม่รู้จัก XML แสดงว่าคุณเป็นลูกเป็ดขี้เหร่ที่ไม่มีใครเอาจริงเอาจัง สิบแปดเดือนที่ผ่านมา Ruby กลายเป็นศูนย์กลางของความสนใจ และโปรแกรมเมอร์ที่ไม่รู้จัก Ruby ก็ทำได้เพียงนั่งบนม้านั่งสำรองเท่านั้น วันนี้ หากคุณต้องการติดตามเทคโนโลยีล่าสุด จุดหมายปลายทางของคุณคืออาแจ็กซ์

แต่ Ajax เป็นมากกว่าแฟชั่น มันเป็นวิธีที่มีประสิทธิภาพในการสร้างเว็บไซต์ที่ไม่ยากเท่ากับการเรียนรู้ภาษาใหม่ทั้งหมด

แต่ก่อนที่เราจะไปเจาะลึกว่า Ajax คืออะไร เราขอใช้เวลาสักครู่เพื่อทำความเข้าใจว่า Ajax ทำอะไรได้บ้าง ปัจจุบัน มีสองตัวเลือกพื้นฐานในการเขียนแอปพลิเคชัน:

· แอปพลิเคชันเดสก์ท็อป · แอปพลิเคชันบนเว็บ

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

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

ในทางกลับกัน เว็บแอปพลิเคชันถือเป็นเทรนด์ล่าสุด โดยให้บริการที่ไม่สามารถทำได้บนเดสก์ท็อป (เช่น Amazon.com และ eBay) อย่างไรก็ตาม ด้วยพลังของเว็บ ทำให้ต้องรอ รอให้เซิร์ฟเวอร์ตอบสนอง รอหน้าจอรีเฟรช รอคำขอกลับมา และสร้างเพจใหม่

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

คุณจะรออะไรอีก? มาดูกันว่า Ajax สามารถเปลี่ยนอินเทอร์เฟซเว็บที่เงอะงะให้เป็นแอปพลิเคชัน Ajax ที่ตอบสนองได้อย่างไร

เทคโนโลยีเก่า ลูกเล่นใหม่

เมื่อพูดถึง Ajax มันเกี่ยวข้องกับเทคโนโลยีที่หลากหลายจริง ๆ และการใช้งานอย่างยืดหยุ่นนั้นจำเป็นต้องมีความเข้าใจอย่างลึกซึ้งเกี่ยวกับเทคโนโลยีที่แตกต่างกันเหล่านี้ (บทความสองสามบทความแรกในชุดนี้จะกล่าวถึงแต่ละเทคโนโลยีเหล่านี้แยกกัน) ข่าวดีก็คือคุณอาจคุ้นเคยกับเทคโนโลยีเหล่านี้ส่วนใหญ่แล้ว และที่ดีไปกว่านั้นคือเทคโนโลยีเหล่านี้เรียนรู้ได้ง่ายและไม่ยากเท่ากับภาษาโปรแกรมเต็มรูปแบบเช่น Java หรือ Ruby

ต่อไปนี้เป็นเทคโนโลยีพื้นฐานที่ใช้ในแอปพลิเคชัน Ajax:

·HTML ใช้เพื่อสร้างเว็บฟอร์มและกำหนดฟิลด์ที่ใช้โดยส่วนอื่นๆ ของแอปพลิเคชัน
· โค้ด JavaScript เป็นโค้ดหลักที่รันแอปพลิเคชัน Ajax และช่วยปรับปรุงการสื่อสารกับแอปพลิเคชันเซิร์ฟเวอร์
·DHTML หรือ Dynamic HTML สำหรับการอัพเดตแบบฟอร์มแบบไดนามิก เราจะใช้ div, spans และองค์ประกอบ HTML ไดนามิกอื่นๆ เพื่อมาร์กอัป HTML
· Document Object Model DOM ใช้ในการประมวลผล (ผ่านโค้ด JavaScript) โครงสร้างของ HTML และ (ในบางกรณี) XML ที่ส่งคืนโดยเซิร์ฟเวอร์

คำจำกัดความของ Ajax

อย่างไรก็ตาม Ajax เป็นตัวย่อของ Asynchronous JavaScript และ XML (และ DHTML เป็นต้น) วลีนี้บัญญัติโดย Jesse James Garrett แห่ง Adaptive Path (ดูแหล่งข้อมูล) และดังที่ Jesse อธิบาย วลีนี้ไม่ใช่คำย่อ

มาวิเคราะห์ความรับผิดชอบของเทคโนโลยีเหล่านี้เพิ่มเติมกัน ฉันจะหารือเกี่ยวกับเทคโนโลยีเหล่านี้ในเชิงลึกในบทความต่อ ๆ ไป แต่ตอนนี้เพียงแค่ทำความคุ้นเคยกับส่วนประกอบและเทคโนโลยีเท่านั้น ยิ่งคุณคุ้นเคยกับโค้ดเหล่านี้มากเท่าไร การย้ายจากความเข้าใจที่กระจัดกระจายของเทคโนโลยีเหล่านี้ไปสู่ความเข้าใจเทคโนโลยีเหล่านี้อย่างแท้จริงก็จะยิ่งง่ายขึ้นเท่านั้น (ซึ่งยังเปิดประตูสู่การพัฒนาแอปพลิเคชันเว็บอย่างแท้จริงด้วย)

XMLHttpRequest Object

วัตถุเดียวที่ต้องเข้าใจอาจไม่คุ้นเคยมากที่สุดสำหรับคุณคือ XMLHttpRequest นี่คือออบเจ็กต์ JavaScript และการสร้างมันทำได้ง่าย ดังแสดงในรายการ 1

รายการ 1. การสร้างวัตถุ XMLHttpRequest ใหม่

<script language="javascript" type="text/javascript">
var xmlHttp = XMLHttpRequest ใหม่ ();
</script>

เราจะหารือเกี่ยวกับวัตถุนี้เพิ่มเติมในบทความถัดไป แต่สำหรับตอนนี้ โปรดทราบว่านี่คือวัตถุที่จัดการการสื่อสารของเซิร์ฟเวอร์ทั้งหมด ก่อนที่คุณจะอ่านต่อ ให้หยุดและคิดเกี่ยวกับสิ่งนี้: เทคโนโลยี JavaScript คือเทคโนโลยีที่สื่อสารกับเซิร์ฟเวอร์ผ่านอ็อบเจ็กต์ XMLHttpRequest นี่ไม่ใช่ขั้นตอนการสมัครทั่วไป และนี่คือที่มาของพลังของ Ajax

ในเว็บแอปพลิเคชันทั่วไป ผู้ใช้กรอกข้อมูลในฟิลด์แบบฟอร์มแล้วคลิกปุ่มส่ง จากนั้นแบบฟอร์มทั้งหมดจะถูกส่งไปยังเซิร์ฟเวอร์ ซึ่งส่งต่อไปยังสคริปต์ที่จัดการแบบฟอร์ม (โดยปกติคือ PHP หรือ Java อาจเป็นกระบวนการ CGI หรืออะไรที่คล้ายกัน) จากนั้นจะส่งหน้าใหม่กลับมาเมื่อสคริปต์เสร็จสมบูรณ์ หน้าเว็บอาจเป็น HTML โดยมีแบบฟอร์มใหม่ที่มีข้อมูลบางส่วนอยู่แล้ว อาจเป็นหน้ายืนยัน หรืออาจเป็นหน้าเว็บที่มีตัวเลือกบางอย่างที่เลือกไว้ตามข้อมูลที่ป้อนในแบบฟอร์มต้นฉบับ แน่นอนว่าผู้ใช้ต้องรอในขณะที่สคริปต์หรือโปรแกรมบนเซิร์ฟเวอร์ประมวลผลและส่งคืนแบบฟอร์มใหม่ หน้าจอว่างเปล่าและรอจนกว่าข้อมูลจะถูกส่งกลับจากเซิร์ฟเวอร์ก่อนที่จะวาดใหม่ นี่คือสาเหตุที่ทำให้การโต้ตอบไม่ดี ผู้ใช้ไม่ได้รับการตอบรับทันที ดังนั้นจึงให้ความรู้สึกแตกต่างจากแอปพลิเคชันบนเดสก์ท็อป

โดยทั่วไป Ajax จะวางเทคโนโลยี JavaScript และวัตถุ XMLHttpRequest ระหว่างเว็บฟอร์มและเซิร์ฟเวอร์ เมื่อผู้ใช้กรอกแบบฟอร์ม ข้อมูลจะถูกส่งไปยังโค้ด JavaScript แทนที่จะส่งไปยังเซิร์ฟเวอร์โดยตรง แต่โค้ด JavaScript จะจับข้อมูลแบบฟอร์มและส่งคำขอไปยังเซิร์ฟเวอร์แทน ในขณะเดียวกัน แบบฟอร์มบนหน้าจอของผู้ใช้จะไม่สั่นไหว หายไป หรือล่าช้า กล่าวอีกนัยหนึ่ง โค้ด JavaScript จะส่งคำขอเบื้องหลังโดยที่ผู้ใช้ไม่รู้ด้วยซ้ำว่ากำลังมีการร้องขอ ยิ่งไปกว่านั้น คำขอจะถูกส่งแบบอะซิงโครนัส ซึ่งหมายความว่าโค้ด JavaScript (และผู้ใช้) ไม่จำเป็นต้องรอการตอบกลับจากเซิร์ฟเวอร์ เพื่อให้ผู้ใช้สามารถป้อนข้อมูล เลื่อน และใช้งานแอปพลิเคชันต่อไปได้

จากนั้นเซิร์ฟเวอร์จะส่งคืนข้อมูลไปยังโค้ด JavaScript (ยังอยู่ในรูปแบบเว็บ) ซึ่งจะตัดสินใจว่าจะทำอย่างไรกับข้อมูล อัปเดตข้อมูลแบบฟอร์มอย่างรวดเร็ว ให้ความรู้สึกว่าแอปพลิเคชันเสร็จสมบูรณ์ทันที โดยไม่ต้องส่งหรือรีเฟรชแบบฟอร์ม และผู้ใช้ได้รับข้อมูลใหม่ โค้ด JavaScript ยังสามารถคำนวณข้อมูลที่ได้รับและส่งคำขออื่นได้ โดยที่ผู้ใช้ไม่ต้องดำเนินการใดๆ! นี่คือพลังของ XMLHttpRequest มันสามารถโต้ตอบกับเซิร์ฟเวอร์ได้ด้วยตัวเองตามต้องการ และผู้ใช้สามารถไม่รู้เลยว่าเกิดอะไรขึ้นเบื้องหลัง ผลลัพธ์ที่ได้คือประสบการณ์การโต้ตอบแบบไดนามิก ตอบสนองสูง คล้ายกับแอปพลิเคชันบนเดสก์ท็อป แต่เปี่ยมไปด้วยพลังของอินเทอร์เน็ตที่อยู่เบื้องหลัง

เพิ่ม JavaScript

เพื่อรับหมายเลขอ้างอิงของ XMLHttpRequest แล้ว โค้ด JavaScript อื่น ๆ ก็ง่ายมาก ในความเป็นจริง เราจะใช้โค้ด JavaScript เพื่อทำงานพื้นฐานให้สำเร็จ:

· รับข้อมูลแบบฟอร์ม: โค้ด JavaScript สามารถดึงข้อมูลจากแบบฟอร์ม HTML และส่งไปยังเซิร์ฟเวอร์ได้อย่างง่ายดาย
·แก้ไขข้อมูลในแบบฟอร์ม: การอัปเดตแบบฟอร์มก็ทำได้ง่ายตั้งแต่การตั้งค่าฟิลด์ไปจนถึงการแทนที่รูปภาพอย่างรวดเร็ว
·แยกวิเคราะห์ HTML และ XML: ใช้โค้ด JavaScript เพื่อจัดการ DOM (ดูหัวข้อถัดไป) และประมวลผลโครงสร้างของข้อมูล XML ที่ส่งคืนโดยเซิร์ฟเวอร์ฟอร์ม HTML

สำหรับสองประเด็นแรก คุณจะต้องคุ้นเคยกับเมธอด getElementById() ดังที่แสดงในรายการ 2

รายการ 2. การจับและตั้งค่าฟิลด์ด้วยโค้ด JavaScript

// รับค่าของฟิลด์ "phone" และนำไปเก็บไว้ในตัวแปรที่เรียกว่า phone
var phone = document.getElementById("phone").value;

// ตั้งค่าบางค่าในแบบฟอร์มโดยใช้อาร์เรย์ที่เรียกว่า response
document.getElementById("สั่งซื้อ").value = การตอบสนอง[0];
document.getElementById("address").value = response[1];

ไม่มีอะไรพิเศษที่ควรทราบที่นี่ เยี่ยมมาก! คุณควรตระหนักว่าไม่มีอะไรซับซ้อนมากที่นี่ เมื่อคุณเชี่ยวชาญ XMLHttpRequest แล้ว ส่วนที่เหลือของแอปพลิเคชัน Ajax ของคุณจะเป็นโค้ด JavaScript อย่างง่าย ดังที่แสดงในรายการ 2 ผสมกับ HTML จำนวนเล็กน้อย ในขณะเดียวกัน เราก็จำเป็นต้องใช้ DOM เล็กน้อยด้วย ดังนั้นเรามาดูกันดีกว่า

ลงท้ายด้วย DOM

สุดท้ายก็มี DOM ซึ่งเป็น Document Object Model DOM อาจจะดูน่ากลัวเล็กน้อยสำหรับผู้อ่านบางคน นักออกแบบ HTML ไม่ค่อยได้ใช้มัน และแม้แต่โปรแกรมเมอร์ JavaScript ก็ไม่ค่อยได้ใช้มัน เว้นแต่พวกเขาต้องการทำงานเขียนโปรแกรมระดับสูงให้เสร็จสิ้น โปรแกรม Java และ C/C++ ที่ซับซ้อนใช้งาน DOM อย่างหนัก ซึ่งอาจเป็นสาเหตุว่าทำไม DOM จึงถือว่าเรียนรู้ได้ยาก

โชคดีที่การทำงานกับ DOM ในเทคโนโลยี JavaScript นั้นง่ายและใช้งานง่ายมาก ตามธรรมเนียมแล้ว คุณควรอธิบายวิธีใช้ DOM หรืออย่างน้อยก็ให้โค้ดตัวอย่างบางส่วน แต่การทำเช่นนั้นอาจทำให้คุณเข้าใจผิดได้ แม้ว่าคุณจะเพิกเฉยต่อ DOM คุณยังคงสามารถเจาะลึก Ajax ได้ และนั่นคือแนวทางที่ฉันจะใช้ เราจะกลับมาดู DOM อีกครั้งในบทความหน้า แต่สำหรับตอนนี้ก็เพียงพอแล้วที่จะรู้ว่าคุณอาจต้องการมัน เราจะเจาะลึก DOM เมื่อเราต้องการส่ง XML ระหว่างโค้ด JavaScript และเซิร์ฟเวอร์ และเปลี่ยนรูปแบบ HTML คุณสามารถทำงานที่น่าสนใจได้โดยไม่ต้องใช้มัน ดังนั้น ให้พัก DOM ไว้ก่อน

การรับอ็อบเจ็กต์ Request

ด้วยความรู้พื้นฐานข้างต้น เรามาดูตัวอย่างที่เฉพาะเจาะจงกัน XMLHttpRequest เป็นหัวใจสำคัญของแอปพลิเคชัน Ajax และอาจไม่คุ้นเคยกับผู้อ่านจำนวนมาก ดังนั้นเรามาเริ่มกันเลย ดังที่คุณเห็นจากรายการ 1 การสร้างและใช้งานวัตถุนี้ง่ายมากใช่ไหม รอ.

จำสงครามเบราว์เซอร์ที่น่ารังเกียจเมื่อไม่กี่ปีก่อนได้ไหม? ไม่มีสิ่งใดที่ให้ผลลัพธ์เหมือนกันในเบราว์เซอร์ที่แตกต่างกัน เชื่อหรือไม่ว่าสงครามเหล่านี้ยังคงดำเนินต่อไป แม้ว่าจะมีขนาดเล็กกว่าก็ตาม แต่น่าแปลกที่ XMLHttpRequest ได้กลายเป็นหนึ่งในผู้เสียชีวิตจากสงครามครั้งนี้ ดังนั้นการได้รับออบเจ็กต์ XMLHttpRequest อาจต้องใช้แนวทางที่แตกต่างออกไป ฉันจะอธิบายรายละเอียดด้านล่าง

การใช้เบราว์เซอร์ Microsoft

เบราว์เซอร์ Microsoft Internet Explorer ใช้ตัวแยกวิเคราะห์ MSXML เพื่อประมวลผล XML (คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับ MSXML ได้ในแหล่งข้อมูล) ดังนั้นหากคุณเขียนแอปพลิเคชัน Ajax ที่โต้ตอบกับ Internet Explorer คุณต้องสร้างวัตถุด้วยวิธีพิเศษ

แต่มันไม่ง่ายขนาดนั้น จริงๆ แล้ว MSXML มีสองเวอร์ชันที่แตกต่างกัน ขึ้นอยู่กับเวอร์ชันของเทคโนโลยี JavaScript ที่ติดตั้งใน Internet Explorer ดังนั้นคุณต้องเขียนโค้ดแยกกันสำหรับแต่ละกรณี ดูรายการที่ 3 ซึ่งมีโค้ดที่สร้าง XMLHttpRequest บนเบราว์เซอร์ Microsoft

รายการ 3. สร้างวัตถุ XMLHttpRequest บนเบราว์เซอร์ Microsoft

var xmlHttp = false;
พยายาม {
xmlHttp = ActiveXObject ใหม่ ("Msxml2.XMLHTTP");
} จับ (e) {
พยายาม {
xmlHttp = ใหม่ ActiveXObject("Microsoft.XMLHTTP");
} จับ (e2) {
xmlHttp = เท็จ;
-
}

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

xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");

และ

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

โดยทั่วไปโค้ดสองบรรทัดนี้พยายามสร้างออบเจ็กต์โดยใช้ MSXML เวอร์ชันหนึ่ง และหากล้มเหลว ให้สร้างออบเจ็กต์โดยใช้เวอร์ชันอื่น ไม่เลวใช่มั้ย? หากไม่สำเร็จ ตัวแปร xmlHttp จะถูกตั้งค่าเป็นเท็จ เพื่อแจ้งโค้ดของคุณว่ามีปัญหา หากสิ่งนี้เกิดขึ้น อาจเป็นเพราะเบราว์เซอร์ที่ไม่ใช่ของ Microsoft ถูกติดตั้งซึ่งต้องใช้รหัสอื่น

การจัดการเบราว์เซอร์ Mozilla และเบราว์เซอร์ที่ไม่ใช่ของ Microsoft

หากคุณเลือกเบราว์เซอร์อื่นที่ไม่ใช่ Internet Explorer หรือหากคุณเขียนโค้ดสำหรับเบราว์เซอร์ที่ไม่ใช่ของ Microsoft คุณจะต้องใช้โค้ดอื่น จริงๆ แล้วมันเป็นบรรทัดโค้ดง่ายๆ ที่แสดงในรายการ 1:

var xmlHttp = new XMLHttpRequest object;.

บรรทัดโค้ดที่ง่ายกว่านี้มากจะสร้างอ็อบเจ็กต์ XMLHttpRequest ใน Mozilla, Firefox, Safari, Opera และโดยพื้นฐานแล้วเบราว์เซอร์ที่ไม่ใช่ของ Microsoft ที่รองรับ Ajax ในรูปแบบหรือรูปแบบใด ๆ

ในการรวมสิ่งนี้เข้าด้วยกัน

คือการรองรับเบราว์เซอร์ทั้งหมด ใครต้องการเขียนแอปพลิเคชันที่ใช้งานได้กับเบราว์เซอร์ Internet Explorer หรือที่ไม่ใช่ของ Microsoft เท่านั้น? หรือแย่กว่านั้นคือเขียนใบสมัครสองครั้ง? ไม่แน่นอน! ดังนั้นโค้ดจึงต้องรองรับทั้งเบราว์เซอร์ Internet Explorer และที่ไม่ใช่ของ Microsoft รายการ 4 แสดงรหัสดังกล่าว

รายการ 4. การสร้างวัตถุ XMLHttpRequest ในลักษณะที่รองรับหลายเบราว์เซอร์

/* สร้างวัตถุ XMLHttpRequest ใหม่เพื่อสื่อสารกับเว็บเซิร์ฟเวอร์ */
var xmlHttp = เท็จ;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
พยายาม {
xmlHttp = ActiveXObject ใหม่ ("Msxml2.XMLHTTP");
} จับ (e) {
พยายาม {
xmlHttp = ใหม่ ActiveXObject("Microsoft.XMLHTTP");
} จับ (e2) {
xmlHttp = เท็จ;
-
-
@end @*/

if (!xmlHttp && typeof XMLHttpRequest != 'ไม่ได้กำหนด') {
xmlHttp = XMLHttpRequest ใหม่();
}

ในตอนนี้ ไม่ต้องสนใจสัญลักษณ์แปลก ๆ ที่แสดงความเห็นไว้ เช่น @cc_on ซึ่งเป็นคำสั่งคอมไพเลอร์ JavaScript พิเศษที่จะกล่าวถึงโดยละเอียดในบทความถัดไปเกี่ยวกับ XMLHttpRequest แกนหลักของโค้ดนี้แบ่งออกเป็นสามขั้นตอน:

1. สร้างตัวแปร xmlHttp เพื่ออ้างอิงอ็อบเจ็กต์ XMLHttpRequest ที่จะสร้าง
2. ลองสร้างวัตถุในเบราว์เซอร์ Microsoft:
1) ลองสร้างมันโดยใช้วัตถุ Msxml2.XMLHTTP
2) หากล้มเหลว ให้ลองใช้ออบเจ็กต์ Microsoft.XMLHTTP อีกครั้ง
2. หากยังไม่ได้สร้าง xmlHttp ให้สร้างออบเจ็กต์ด้วยวิธีที่ไม่ใช่ของ Microsoft
สุดท้าย xmlHttp ควรอ้างอิงอ็อบเจ็กต์ XMLHttpRequest ที่ถูกต้อง ไม่ว่าเบราว์เซอร์นั้นจะใช้เบราว์เซอร์ใดก็ตาม

หมายเหตุเล็กน้อยเกี่ยวกับความปลอดภัย

แล้วความปลอดภัยล่ะ? ขณะนี้เบราว์เซอร์อนุญาตให้ผู้ใช้เพิ่มระดับความปลอดภัย ปิดเทคโนโลยี JavaScript และปิดใช้งานตัวเลือกใดๆ ในเบราว์เซอร์ ในกรณีนี้รหัสจะไม่ทำงานอยู่ดี ณ จุดนี้ จำเป็นต้องจัดการกับปัญหาอย่างเหมาะสม ซึ่งต้องมีบทความแยกต่างหากไว้อ่านทีหลัง (ชุดนี้ยาวพอใช่ไหม ไม่ต้องกังวล คุณอาจอ่านเจอก่อนอ่านจบ) ตอนนี้เรามาเขียนโค้ดที่แข็งแกร่งแต่ยังไม่สมบูรณ์แบบ ซึ่งดีสำหรับการเรียนรู้ Ajax เราจะหารือเรื่องนี้โดยละเอียดในภายหลัง

คำขอ/การตอบสนองใน Ajax World

ตอนนี้เราได้แนะนำ Ajax แล้ว เรามีความเข้าใจพื้นฐานเกี่ยวกับออบเจ็กต์ XMLHttpRequest และวิธีการสร้างอ็อบเจ็กต์นั้น หากคุณอ่านอย่างละเอียด คุณอาจรู้อยู่แล้วว่าเป็นเทคโนโลยี JavaScript ที่เกี่ยวข้องกับแอปพลิเคชันเว็บบนเซิร์ฟเวอร์ แทนที่จะเป็นรูปแบบ HTML ที่ส่งโดยตรงไปยังแอปพลิเคชันนั้น

มีอะไรหายไป? วิธีใช้ XMLHttpRequest อย่างแน่นอน เนื่องจากโค้ดนี้มีความสำคัญมากจนทุกแอปพลิเคชัน Ajax ที่คุณเขียนจะใช้มันในรูปแบบใดรูปแบบหนึ่ง เรามาเริ่มด้วยการดูว่าโมเดลคำขอ/การตอบกลับพื้นฐานของ Ajax มีลักษณะอย่างไร

การร้องขอ

ตอนนี้คุณมีออบเจ็กต์ XMLHttpRequest ใหม่แล้ว ปล่อยให้มันทำงานบ้างดีกว่า ขั้นแรก คุณต้องมีเมธอด JavaScript ที่เว็บเพจสามารถเรียกได้ (เช่น เมื่อผู้ใช้ป้อนข้อความหรือเลือกรายการจากเมนู) ต่อไปเป็นกระบวนการที่เหมือนกันในแอปพลิเคชัน Ajax ทั้งหมด:

1. รับข้อมูลที่ต้องการจากแบบฟอร์มบนเว็บ
2. สร้าง URL ที่จะเชื่อมต่อ
3. เปิดการเชื่อมต่อกับเซิร์ฟเวอร์
4. ตั้งค่าฟังก์ชันให้รันโดยเซิร์ฟเวอร์หลังจากเสร็จสิ้น
5. ส่งคำขอ

ตัวอย่างเมธอด Ajax ในรายการที่ 5 ถูกจัดเรียงตามลำดับนี้:

รายการที่ 5 การร้องขอ Ajax

ฟังก์ชั่น callServer() {
// รับเมืองและรัฐจากเว็บฟอร์ม
เมือง var = document.getElementById("เมือง").value;
var state = document.getElementById("state").value;
// ดำเนินการต่อเมื่อมีค่าทั้งสองฟิลด์เท่านั้น
ถ้า ((เมือง == null) || (เมือง == "")) กลับ;
if ((state == null) || (state == "")) กลับ;

// สร้าง URL ที่จะเชื่อมต่อ
var url = "/scripts/getZipCode.php?city=" + Escape(city) + "&state=" + Escape(state);

// เปิดการเชื่อมต่อกับเซิร์ฟเวอร์
xmlHttp.open("GET", url, true);

// ตั้งค่าฟังก์ชันให้เซิร์ฟเวอร์ทำงานเมื่อเสร็จแล้ว
xmlHttp.onreadystatechange = updatePage;

// ส่งคำขอ
xmlHttp.send(null);
}

ความหมายของรหัสส่วนใหญ่ชัดเจนมาก โค้ดตอนต้นใช้โค้ด JavaScript พื้นฐานเพื่อรับค่าของฟิลด์ฟอร์มต่างๆ จากนั้นตั้งค่าสคริปต์ PHP เป็นเป้าหมายของลิงก์ โปรดสังเกตวิธีการระบุ URL ของสคริปต์ เมืองและรัฐ (จากแบบฟอร์ม) จะถูกผนวกเข้ากับ URL โดยใช้พารามิเตอร์ GET แบบง่าย

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

คุณลักษณะ onreadystatechange ของ xmlHttp (โปรดจำไว้ว่า นี่คืออินสแตนซ์ออบเจ็กต์ XMLHttpRequest) จะบอกเซิร์ฟเวอร์ว่าต้องทำอย่างไรหลังจากที่รันเสร็จแล้ว (ซึ่งอาจใช้เวลาห้านาทีหรือห้าชั่วโมง) เนื่องจากโค้ดไม่ได้รอเซิร์ฟเวอร์ จึงต้องแจ้งให้เซิร์ฟเวอร์ทราบว่าต้องทำอย่างไรเพื่อให้คุณสามารถตอบสนองได้ ในตัวอย่างนี้ หากเซิร์ฟเวอร์ประมวลผลคำขอเสร็จแล้ว เมธอดพิเศษที่เรียกว่า updatePage() จะถูกทริกเกอร์

ในที่สุด send() จะถูกเรียกพร้อมกับค่า null เนื่องจากข้อมูลที่จะส่งไปยังเซิร์ฟเวอร์ (เมืองและรัฐ) ได้รับการเพิ่มลงใน URL คำขอแล้ว จึงไม่จำเป็นต้องส่งข้อมูลในคำขอ วิธีนี้เป็นการร้องขอและเซิร์ฟเวอร์ทำงานตามคำขอของคุณ

หากคุณไม่พบสิ่งใหม่ คุณควรซาบซึ้งกับความเรียบง่ายและตรงไปตรงมานี้! นอกเหนือจากการรักษาลักษณะอะซิงโครนัสของ Ajax แล้ว ทั้งหมดนี้ค่อนข้างเรียบง่าย รู้สึกขอบคุณที่ Ajax ช่วยให้คุณมุ่งเน้นไปที่การเขียนแอปพลิเคชันและอินเทอร์เฟซที่สวยงาม แทนที่จะกังวลเกี่ยวกับโค้ดคำขอ/ตอบกลับ HTTP ที่ซับซ้อน

รหัสในรายการ 5 แสดงให้เห็นถึงความง่ายในการใช้งานของ Ajax ข้อมูลเป็นข้อความธรรมดาและสามารถใช้เป็นส่วนหนึ่งของ URL คำขอได้ ส่งคำขอด้วย GET แทน POST ที่ซับซ้อนมากขึ้น ไม่มี XML และไม่มีส่วนหัวของเนื้อหาที่จะเพิ่ม และไม่มีข้อมูลที่จะส่งในส่วนเนื้อหาคำขอ หรืออีกนัยหนึ่ง นี่คือ Ajax utopia

ไม่ต้องกังวล สิ่งต่างๆ จะซับซ้อนมากขึ้นเมื่อมีการเปิดเผยบทความชุดนี้ คุณจะเห็นวิธีส่งคำขอ POST วิธีตั้งค่าส่วนหัวของคำขอและประเภทเนื้อหา วิธีเข้ารหัส XML ในข้อความ วิธีเพิ่มความปลอดภัยของคำขอ และอื่นๆ อีกมากมายที่คุณสามารถทำได้! ไม่ต้องกังวลกับปัญหาเหล่านั้นในตอนนี้ เพียงแค่ฝึกฝนสิ่งพื้นฐานให้เชี่ยวชาญ แล้วเร็วๆ นี้เราจะสร้างชุดเครื่องมือ Ajax ครบชุด

การจัดการการตอบสนอง

ตอนนี้มาถึงการตอบสนองของเซิร์ฟเวอร์ มีสองสิ่งที่ควรรู้ในตอนนี้:

· ไม่ต้องทำอะไรจนกว่าค่าของคุณสมบัติ xmlHttp.readyState จะเท่ากับ 4
·เซิร์ฟเวอร์จะเติมคุณสมบัติ xmlHttp.responseText พร้อมการตอบกลับ

สถานะแรกคือสถานะพร้อม จะมีการพูดคุยโดยละเอียดในบทความถัดไป และคุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับขั้นตอนของคำขอ HTTP มากกว่าที่คุณคิด สำหรับตอนนี้ก็เพียงพอแล้วที่จะตรวจสอบค่าเฉพาะ (4) (จะมีค่าเพิ่มเติมให้ครอบคลุมในบทความถัดไป) ประเด็นที่สอง ใช้คุณสมบัติ xmlHttp.responseText เพื่อรับการตอบสนองของเซิร์ฟเวอร์ ซึ่งง่ายมาก วิธีการตัวอย่างในรายการ 6 สามารถเรียกได้โดยเซิร์ฟเวอร์ตามข้อมูลที่ส่งในรายการ 5

รายการ 6. การจัดการ

ฟังก์ชันตอบสนองของเซิร์ฟเวอร์ updatePage() {
ถ้า (xmlHttp.readyState == 4) {
การตอบสนอง var = xmlHttp.responseText;
document.getElementById("zipCode").value = การตอบสนอง;
-
}

รหัสก็ไม่ยากหรือซับซ้อนเช่นกัน รอให้เซิร์ฟเวอร์โทร และหากพร้อม ให้ตั้งค่าของฟิลด์ฟอร์มอื่นโดยใช้ค่าที่เซิร์ฟเวอร์ส่งคืน (นี่คือรหัสไปรษณีย์ของเมืองและรัฐที่ผู้ใช้ป้อน) ทันใดนั้นฟิลด์ zipCode ที่มีรหัสไปรษณีย์ก็ปรากฏขึ้นโดยที่ผู้ใช้ไม่ต้องกดปุ่มใด ๆ ! นี่คือสิ่งที่ฉันพูดถึงก่อนหน้านี้ว่าเป็นแอปพลิเคชันเดสก์ท็อป การตอบสนองที่รวดเร็ว ความรู้สึกแบบไดนามิก ฯลฯ ทั้งหมดนี้เป็นเพราะโค้ด Ajax ชิ้นเล็กๆ

ผู้อ่านที่ระมัดระวังอาจสังเกตเห็นว่า zipCode เป็นช่องข้อความธรรมดา เมื่อเซิร์ฟเวอร์ส่งคืนการเข้ารหัส ZIP แล้ว เมธอด updatePage() จะตั้งค่าของฟิลด์นั้นด้วยการเข้ารหัส ZIP ของเมือง/รัฐ ซึ่งผู้ใช้สามารถแทนที่ได้ การดำเนินการนี้เกิดขึ้นด้วยเหตุผลสองประการ: เพื่อให้ตัวอย่างเรียบง่ายและเพื่อแสดงให้เห็นว่าบางครั้งคุณอาจต้องการให้ผู้ใช้สามารถแก้ไขข้อมูลที่ส่งคืนโดยเซิร์ฟเวอร์ได้ โปรดจำไว้เสมอว่าทั้งสองสิ่งนี้มีความสำคัญต่อการออกแบบส่วนต่อประสานกับผู้ใช้ที่ดี

มีอะไรอีกบ้าง

ในการเชื่อมต่อกับเว็บฟอร์ม

จริงๆแล้วเหลือไม่มากแล้ว วิธี JavaScript หนึ่งจะจับข้อมูลที่ผู้ใช้ป้อนลงในแบบฟอร์มและส่งไปยังเซิร์ฟเวอร์ และวิธี JavaScript อีกวิธีหนึ่งจะรับฟังและประมวลผลการตอบสนอง และตั้งค่าของฟิลด์เมื่อการตอบกลับกลับมา ทั้งหมดนี้จริงๆ แล้วอาศัยการเรียกเมธอด JavaScript แรกซึ่งจะเริ่มต้นกระบวนการทั้งหมด วิธีแก้ปัญหาที่ชัดเจนที่สุดคือการเพิ่มปุ่มลงในแบบฟอร์ม HTML แต่นั่นเป็นปี 2001 ใช่ไหม? มาใช้เทคโนโลยี JavaScript เช่น Listing 7 กันเถอะ

รายการ 7. การเริ่มต้นกระบวนการ Ajax

<form>
<p>เมือง: <input type="text" name="city" id="city" size="25"
onChange="callServer();" /></p>
<p>สถานะ: <input type="text" name="state" id="state" size="25"
onChange="callServer();" /></p>
<p>รหัสไปรษณีย์: <input type="text" name="zipCode" id="city" size="5" /></p>
</form>

ถ้านี่ให้ความรู้สึกเหมือนเป็นโค้ดธรรมดาๆ คุณก็พูดถูก! เมื่อผู้ใช้ป้อนค่าใหม่ในฟิลด์เมืองหรือรัฐ เมธอด callServer() จะถูกทริกเกอร์ และ Ajax จะเริ่มทำงาน คุณเข้าใจบ้างไหมว่าเกิดอะไรขึ้น? แค่นั้นแหละ!

ตอน

นี้คุณคงพร้อมที่จะเริ่มเขียนแอปพลิเคชัน Ajax แรกของคุณแล้ว และอย่างน้อยก็ต้องการอ่านบทความในแหล่งข้อมูลอย่างละเอียดใช่ไหม? แต่คุณสามารถเริ่มต้นด้วยแนวคิดพื้นฐานเกี่ยวกับวิธีการทำงานของแอปพลิเคชันเหล่านี้และความเข้าใจพื้นฐานของวัตถุ XMLHttpRequest ในภาคถัดไป คุณจะเชี่ยวชาญวัตถุนี้และเรียนรู้วิธีจัดการการสื่อสารระหว่าง JavaScript และเซิร์ฟเวอร์ วิธีใช้แบบฟอร์ม HTML และวิธีรับหมายเลขอ้างอิง DOM

ตอนนี้ใช้เวลาสักครู่เพื่อพิจารณาว่าแอปพลิเคชัน Ajax มีประสิทธิภาพเพียงใด ลองนึกภาพเว็บฟอร์มที่ตอบสนองทันทีเมื่อคุณคลิกปุ่ม ป้อนข้อมูลในฟิลด์ เลือกตัวเลือกจากกล่องคำสั่งผสม หรือลากเมาส์ผ่านหน้าจอ ลองนึกถึงความหมายของ async จริงๆ ลองนึกถึงโค้ด JavaScript ที่ทำงานอยู่และไม่รอให้เซิร์ฟเวอร์ตอบสนองต่อคำขอ คุณจะเจอปัญหาอะไรบ้าง? มันจะเข้าวงการไหนครับ? ด้วยแนวทางใหม่นี้ เราควรเปลี่ยนการออกแบบแบบฟอร์มเมื่อเขียนโปรแกรมอย่างไร

หากคุณใช้เวลาเพียงเล็กน้อยกับปัญหาเหล่านี้ คุณจะได้รับมากกว่าเพียงแค่การตัด/วางโค้ดบางส่วนลงในแอปพลิเคชันที่คุณไม่เข้าใจเลย ในตอนถัดไป เราจะนำแนวคิดเหล่านี้ไปปฏิบัติจริง โดยมีรายละเอียดโค้ดที่จำเป็นในการทำให้แอปพลิเคชันทำงานในลักษณะนี้ ดังนั้นในตอนนี้ ขอให้สนุกไปกับความเป็นไปได้ที่อาแจ็กซ์มอบให้