[เรียนรู้ Ajax ในสี่วัน] ในวันที่สองของการเรียนรู้บทช่วยสอน Ajax JavaScript และ Ajax จะส่งคำขอแบบอะซิงโครนัส

เว็บแอปพลิเคชันส่วนใหญ่ใช้โมเดลคำขอ/ตอบกลับเพื่อรับเพจ 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 ใหม่

<script language="javascript" type="text/javascript">
คำขอ var = XMLHttpRequest ใหม่ ();
</script>

ไม่ยากใช่ไหม? โปรดจำไว้ว่า JavaScript ไม่ต้องการให้คุณระบุประเภทตัวแปร ดังนั้นคุณไม่จำเป็นต้องทำสิ่งที่คุณทำในรายการที่ 2 (ซึ่งคุณอาจทำในภาษา Java)

รายการ 2. Java pseudocode สำหรับสร้าง XMLHttpRequestXMLHttpRequest

request = new XMLHttpRequest();

ดังนั้นใน JavaScript คุณสร้างตัวแปรโดยใช้ var ตั้งชื่อ (เช่น "request") จากนั้นกำหนดอินสแตนซ์ XMLHttpRequest ใหม่ วัตถุนั้นสามารถนำไปใช้ในฟังก์ชั่นได้

การจัดการข้อผิดพลาด

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

รายการ 3 การสร้าง XMLHttpRequest พร้อมความสามารถในการจัดการข้อผิดพลาด

<script language="javascript" type="text/javascript">
คำขอ var = false;
พยายาม {
คำขอ = XMLHttpRequest ใหม่ ();
} จับ (ล้มเหลว) {
คำขอ = เท็จ;
}

ถ้า (!คำขอ)
alert("เกิดข้อผิดพลาดในการเริ่มต้น XMLHttpRequest!");
</script>

อย่าลืมเข้าใจขั้นตอนเหล่านี้:

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

<script language="javascript" type="text/javascript">
คำขอ var = false;
พยายาม {
คำขอ = XMLHttpRequest ใหม่ ();
} จับ (trymicrosoft) {
พยายาม {
คำขอ = ActiveXObject ใหม่ ("Msxml2.XMLHTTP");
} จับ (อื่นๆของ Microsoft) {
พยายาม {
คำขอ = ActiveXObject ใหม่ ("Microsoft.XMLHTTP");
} จับ (ล้มเหลว) {
คำขอ = เท็จ;
-
-
}

ถ้า (!คำขอ)
alert("เกิดข้อผิดพลาดในการเริ่มต้น XMLHttpRequest!");
</สคริปต์>

เป็นเรื่องง่ายที่จะสับสนด้วยเครื่องหมายปีกกาเหล่านี้ ดังนั้นแต่ละขั้นตอนจึงมีการแนะนำด้านล่าง:

1. สร้างคำขอตัวแปรใหม่และกำหนดค่าเป็นเท็จ ใช้ false เป็นเงื่อนไขการตัดสิน ซึ่งหมายความว่ายังไม่ได้สร้างออบเจ็กต์ XMLHttpRequest
2. เพิ่มบล็อกลอง/จับ:
1) ลองสร้างวัตถุ XMLHttpRequest
2) หากล้มเหลว (catch (trymicrosoft)):
1>ลองใช้เบราว์เซอร์ Microsoft เวอร์ชันใหม่กว่าเพื่อสร้างวัตถุที่เข้ากันได้กับ Microsoft (Msxml2.XMLHTTP)
2> หากล้มเหลว (catch (othermicrosoft)) ให้ลองสร้างวัตถุที่เข้ากันได้กับ Microsoft (Microsoft.XMLHTTP) โดยใช้เบราว์เซอร์ Microsoft เวอร์ชันเก่า
2) หากล้มเหลว (catch (ล้มเหลว)) รับประกันว่าค่าของคำขอยังคงเป็นเท็จ
3. ตรวจสอบว่าคำขอยังคงเป็นเท็จหรือไม่ (จะไม่เป็นเท็จหากทุกอย่างเป็นไปด้วยดี)
4. หากเกิดปัญหา (คำขอเป็นเท็จ) ให้ใช้คำเตือน JavaScript เพื่อแจ้งให้ผู้ใช้ทราบว่าเกิดปัญหาขึ้น

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

รูปที่ 2. Internet Explorer ทำงานได้ตามปกติ

คงที่และไดนามิก

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

อย่างไรก็ตาม คุณสามารถใส่โค้ดนี้ในรูปแบบ Listing 5 ได้

รายการ 5. การย้ายโค้ดการสร้าง XMLHttpRequest ไปไว้ในเมธอด

<script language = "javascript" type = "text / javascript">

คำขอ

var;

พยายาม {
คำขอ = XMLHttpRequest ใหม่ ();
} จับ (trymicrosoft) {
พยายาม {
คำขอ = ActiveXObject ใหม่ ("Msxml2.XMLHTTP");
} จับ (อื่นๆของ Microsoft) {
พยายาม {
คำขอ = ActiveXObject ใหม่ ("Microsoft.XMLHTTP");
} จับ (ล้มเหลว) {
คำขอ = เท็จ;
-
-
}

ถ้า (!คำขอ)
alert("เกิดข้อผิดพลาดในการเริ่มต้น XMLHttpRequest!");
-
</สคริปต์>

หากคุณเขียนโค้ดด้วยวิธีนี้ คุณจะต้องเรียกใช้วิธีนี้ก่อนที่จะจัดการกับ Ajax ดังนั้นโค้ดอย่าง Listing 6 ก็จำเป็นเช่นกัน

รายการ 6 สร้างวิธีการโดยใช้ XMLHttpRequest

<script language = "javascript" type = "text / javascript">

คำขอ

var;

พยายาม {
คำขอ = XMLHttpRequest ใหม่ ();
} จับ (trymicrosoft) {
พยายาม {
คำขอ = ActiveXObject ใหม่ ("Msxml2.XMLHTTP");
} จับ (อื่นๆของ Microsoft) {
พยายาม {
คำขอ = ActiveXObject ใหม่ ("Microsoft.XMLHTTP");
} จับ (ล้มเหลว) {
คำขอ = เท็จ;
-
-
}

ถ้า (!คำขอ)
alert("เกิดข้อผิดพลาดในการเริ่มต้น XMLHttpRequest!");
}

ฟังก์ชัน getCustomerInfo() {
createRequest();
// ทำบางสิ่งกับตัวแปรคำขอ
-
</สคริปต์>

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

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

ส่งคำขอด้วย XMLHttpRequest

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

ยินดีต้อนรับสู่ Sandbox

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

หากต้องการตั้งค่า URL ของเซิร์ฟเวอร์

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

รายการ 7. การสร้าง URL คำขอ

<script language="javascript" type="text/javascript">
คำขอ var = false;
พยายาม {
คำขอ = XMLHttpRequest ใหม่ ();
} จับ (trymicrosoft) {
พยายาม {
คำขอ = ActiveXObject ใหม่ ("Msxml2.XMLHTTP");
} จับ (อื่นๆของ Microsoft) {
พยายาม {
คำขอ = ActiveXObject ใหม่ ("Microsoft.XMLHTTP");
} จับ (ล้มเหลว) {
คำขอ = เท็จ;
-
-
}

ถ้า (!คำขอ)
alert("เกิดข้อผิดพลาดในการเริ่มต้น XMLHttpRequest!");

function getCustomerInfo() {
โทรศัพท์ var = document.getElementById("โทรศัพท์").value;
var url = "/cgi-local/lookupCustomer.php?phone=" + หลบหนี (โทรศัพท์);
-
</script>

ไม่มีอะไรยากที่จะเข้าใจที่นี่ ขั้นแรก รหัสจะสร้างโทรศัพท์ตัวแปรใหม่และกำหนดค่าของฟิลด์แบบฟอร์มด้วย ID "โทรศัพท์" รายการ 8 แสดง XHTML สำหรับแบบฟอร์มนี้ ซึ่งคุณสามารถดูฟิลด์โทรศัพท์และแอตทริบิวต์รหัสได้

รายการ 8. พิซซ่าหน้าหักคอ

<body>
<p><img src="breakneck-logo_4c.gif" alt="พิซซ่าหักคอ" /></p>
<การกระทำของแบบฟอร์ม = "โพสต์">
<p>ป้อนหมายเลขโทรศัพท์ของคุณ:
<ประเภทอินพุต = "ข้อความ" ขนาด = "14" ชื่อ = "โทรศัพท์" id = "โทรศัพท์"
onChange="getCustomerInfo();" />
</p>
<p>คำสั่งซื้อของคุณจะถูกจัดส่ง</p>
<div id="ที่อยู่"></div>
<p>พิมพ์คำสั่งซื้อของคุณที่นี่:</p>
<p><textarea name="สั่งซื้อ" แถว="6" cols="50" id="order"></textarea></p>
<p><input type="submit" value="สั่งพิซซ่า" id="submit" /></p>
</แบบฟอร์ม>
</body>

โปรดทราบว่าเมื่อผู้ใช้ป้อนหมายเลขโทรศัพท์หรือเปลี่ยนหมายเลขโทรศัพท์ เมธอด 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. รหัสสำหรับวิธีการโทรกลับ

<script language="javascript" type="text/javascript">
คำขอ var = false;
พยายาม {
คำขอ = XMLHttpRequest ใหม่ ();
} จับ (trymicrosoft) {
พยายาม {
คำขอ = ActiveXObject ใหม่ ("Msxml2.XMLHTTP");
} จับ (อื่นๆของ Microsoft) {
พยายาม {
คำขอ = ActiveXObject ใหม่ ("Microsoft.XMLHTTP");
} จับ (ล้มเหลว) {
คำขอ = เท็จ;
-
-
}

ถ้า (!คำขอ)
alert("เกิดข้อผิดพลาดในการเริ่มต้น XMLHttpRequest!");

ฟังก์ชัน getCustomerInfo() {
โทรศัพท์ var = document.getElementById("โทรศัพท์").value;
var url = "/cgi-local/lookupCustomer.php?phone=" + หลบหนี (โทรศัพท์);
request.open("GET", url, true);
request.onreadystatechange = อัพเดตเพจ;
คำขอส่ง (null);
}

ฟังก์ชั่น updatePage() {
alert("เซิร์ฟเวอร์เสร็จสิ้น!");
-
</script>

มันแค่ออกคำเตือนง่ายๆ เพื่อแจ้งให้คุณทราบเมื่อเซิร์ฟเวอร์ทำงานเสร็จเรียบร้อยแล้ว ลองใช้โค้ดนี้บนหน้าเว็บของคุณเองแล้วเปิดในเบราว์เซอร์ (ดูรายการ 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 <br /> แทน กระบวนการเปลี่ยนทำโดยใช้ฟังก์ชั่นแทนที่ () และนิพจน์ทั่วไป ในที่สุดข้อความที่แก้ไขจะใช้เป็น 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) และวิธีการใช้คำขอโพสต์และส่งข้อมูลในรูปแบบที่แตกต่างกัน โปรดเริ่มเขียนโค้ดและเราจะหารือกันอีกครั้งในหนึ่งเดือน