สิ่งที่ฉันจะพูดถึงเป็นเรื่องพื้นฐานมาก ดังนั้นผู้เชี่ยวชาญไม่ควรอ่าน หากคุณอ่าน โปรดให้ความเห็นแก่ฉันด้วย สามเณรหรือผู้ที่ไม่ค่อยมีความรู้ระดับต่ำก็สามารถอ่านได้เพื่อช่วยให้เกิดความเข้าใจและความจำ
วัตถุ XMLHttpRequest เป็นแกนหลักของฟังก์ชัน AJAX ในการพัฒนาโปรแกรม AJAX คุณต้องเริ่มต้นด้วยการทำความเข้าใจวัตถุ XMLHttpRequest
เพื่อให้เข้าใจถึงออบเจ็กต์ XMLHttpRequest ให้เริ่มด้วยการสร้างออบเจ็กต์ XMLHttpRequest การสร้างออบเจ็กต์ XMLHttpRequest ในเบราว์เซอร์ต่างๆ จะใช้วิธีการที่แตกต่างกัน
ขั้นแรกให้ดูที่วิธีการของ IE ในการสร้างออบเจ็กต์ XMLHttpRequest (วิธีที่ 1):
var xmlhttp = new ActiveXObject("Msxml2.XMLHTTP" ); //ใช้ IE เวอร์ชันใหม่กว่าเพื่อสร้างวัตถุที่เข้ากันได้กับ IE (Msxml2.XMLHTTP)
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //ใช้ IE เวอร์ชันเก่าเพื่อสร้างวัตถุที่เข้ากันได้กับ IE (Microsoft.XMLHTTP)
Mozilla, Opera, Safari และเบราว์เซอร์ที่ไม่ใช่ IE ส่วนใหญ่ใช้วิธีการต่อไปนี้ (วิธีที่ 2) เพื่อสร้างวัตถุ XMLHttpRequest:
var xmlhttp = new XMLHttpRequest();
Internet Explorer ใช้วัตถุที่เรียกว่า XMLHttp แทนวัตถุ XMLHttpRequest ซึ่ง Mozilla, Opera, Safari และเบราว์เซอร์ที่ไม่ใช่ของ Microsoft ส่วนใหญ่ใช้ (ต่อไปนี้จะเรียกรวมกันว่าวัตถุ XMLHttpRequest) IE7 ก็เริ่มใช้วัตถุ XMLHttpRequest
หากเบราว์เซอร์ที่แตกต่างกันใช้วิธีการที่ไม่ถูกต้องเมื่อสร้างวัตถุ XMLHttpRequest เบราว์เซอร์จะรายงานข้อผิดพลาดและไม่สามารถใช้วัตถุได้ ดังนั้นเราจึงต้องการวิธีการสร้างวัตถุ XMLHttpRequest ที่เข้ากันได้กับเบราว์เซอร์ที่แตกต่างกัน:
สร้างวิธีการวัตถุ XMLHttpRequest ที่เข้ากันได้กับเบราว์เซอร์หลายตัว
var xmlhttp = false; //สร้างคำขอตัวแปรใหม่และกำหนดค่าเป็นเท็จ ใช้ false เป็นเงื่อนไขการตัดสิน ซึ่งหมายความว่ายังไม่ได้สร้างออบเจ็กต์ XMLHttpRequest
ฟังก์ชัน CreateXMLHttp(){
พยายาม{
xmlhttp = new XMLHttpRequest(); //ลองสร้างวัตถุ XMLHttpRequest ยกเว้น IE รองรับวิธีนี้
-
จับ (จ){
พยายาม{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); //ใช้ IE เวอร์ชันใหม่กว่าเพื่อสร้างวัตถุที่เข้ากันได้กับ IE (Msxml2.XMLHTTP)
-
จับ (จ){
พยายาม{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //ใช้ IE เวอร์ชันเก่าเพื่อสร้างวัตถุที่เข้ากันได้กับ IE (Microsoft.XMLHTTP)
-
จับ (ล้มเหลว){
xmlhttp = false; //หากล้มเหลว ตรวจสอบให้แน่ใจว่าค่าของคำขอยังคงเป็นเท็จ
-
-
-
ส่งคืน xmlhttp;
-
มันง่ายมากที่จะตัดสินว่าการสร้างสำเร็จหรือไม่
ถ้า (!xmlhttp){
//ล้มเหลวในการสร้างวัตถุ XMLHttpRequest!
-
อื่น{
//สร้างสำเร็จแล้ว!
-
หลังจากสร้างอ็อบเจ็กต์ XMLHttpRequest แล้ว เรามาดูวิธีการ คุณสมบัติ และตัวจัดการเหตุการณ์ onreadystatechange ที่สำคัญที่สุดของอ็อบเจ็กต์นี้กัน
วิธีการ:
open() คำอธิบาย: เริ่มต้นพารามิเตอร์คำขอ HTTP เช่น URL และวิธีการ HTTP แต่อย่าส่งคำขอ
ยกเลิก () คำอธิบาย: ยกเลิกการตอบกลับปัจจุบัน ปิดการเชื่อมต่อ และสิ้นสุดกิจกรรมเครือข่ายที่ค้างอยู่
getAllResponseHeaders() คำอธิบาย: ส่งคืนส่วนหัวการตอบกลับ HTTP เป็นสตริงที่ไม่ได้แยกวิเคราะห์
getResponseHeader() คำอธิบาย: ส่งกลับค่าของส่วนหัวการตอบกลับ HTTP ที่ระบุ
send() คำอธิบาย: ส่งคำขอ HTTP โดยใช้พารามิเตอร์ที่ส่งผ่านไปยังเมธอด open() และเนื้อหาคำขอเพิ่มเติมที่ส่งผ่านไปยังเมธอด
setRequestHeader() คำอธิบาย: ตั้งค่าหรือเพิ่มคำขอ HTTP ไปยังคำขอที่เปิดอยู่แต่ไม่ได้ส่ง
คุณลักษณะ:
readyState คำอธิบาย: สถานะของคำขอ HTTP
responseText Description: เนื้อหาการตอบสนอง (ไม่รวมส่วนหัว) ที่เซิร์ฟเวอร์ได้รับจนถึงตอนนี้ หรือสตริงว่างหากไม่ได้รับข้อมูล
responseXML Description: การตอบสนองต่อการร้องขอ แยกวิเคราะห์เป็น XML และส่งคืนเป็นอ็อบเจ็กต์ Document
สถานะ คำอธิบาย: รหัสสถานะ HTTP ที่ส่งคืนโดยเซิร์ฟเวอร์
คำอธิบาย statusText: คุณลักษณะนี้ระบุรหัสสถานะ HTTP ของคำขอโดยใช้ชื่อแทนตัวเลข
onreadystatechange เป็นฟังก์ชันตัวจัดการเหตุการณ์ที่ถูกเรียกทุกครั้งที่คุณสมบัติ readyState เปลี่ยนแปลง
มาทำความเข้าใจกับออบเจ็กต์ XMLHttpRequest จากกระบวนการส่งคำขอและประมวลผลผลลัพธ์คำขอ
โดยปกติแล้ว ออบเจ็กต์ XMLHttpRequest จะถูกสร้างขึ้นก่อนที่จะส่งคำขอ ไม่จำเป็นต้องเขียนโค้ดเพิ่มเติมหากมีอยู่แล้ว
สร้างวัตถุ XMLHttpRequest
var xmlhttp = CreateXMLHttp();
หลังจากสร้างออบเจ็กต์ XMLHttpRequest แล้ว เราต้องการส่งคำขอไปที่เว็บไซต์ใด เรามาเลือก RSS บนหน้าแรกของบล็อกพาร์คกันดีกว่า แล้วฉันจะตั้งค่าที่อยู่เว็บไซต์ที่ต้องการขอได้อย่างไร ใช้วิธี open()
เปิด (วิธีการ, url, async, ชื่อผู้ใช้, รหัสผ่าน)
วิธีนี้มี 5 พารามิเตอร์ คุณสามารถดูความหมายเฉพาะได้ที่นี่: http://www.w3school.com.cn/xmldom/dom_http.asp
นี่คือสิ่งที่เราใช้
xmlHttp.open("get"," http://www.cnblogs.com",true );
พารามิเตอร์ get หมายถึงการใช้วิธี get โดยธรรมชาติแล้วอันที่สองคือที่อยู่เป้าหมาย หน้าแรกของบล็อกพาร์ค สามารถดูคำอธิบายพารามิเตอร์เฉพาะได้ที่ http://www.w3school.com.cn
โอเค ตั้งเป้าหมายแล้วจะส่งยังไง ใช้เมธอด send()
send(body) เมธอด send() มีเพียงพารามิเตอร์เดียวเท่านั้น ซึ่งแสดงถึงอ็อบเจ็กต์ DOM นี้จำเป็นต้องอธิบายอีกมาก คราวหน้าวันนี้เราแค่ต้องเขียนเท่านั้น
xmlhttp.send(null);
แค่นั้นแหละ. โอเค ถูกส่งไปแล้ว จะจัดการกับผลลัพธ์ที่ส่งคืนได้อย่างไร ในตอนนี้ สิ่งที่สำคัญที่สุดของออบเจ็กต์ XMLHttpRequest จะถูกใช้งาน ซึ่งก็คือตัวจัดการเหตุการณ์ onreadystatechange หมายความว่าอย่างไร เราต้องอธิบาย readyState ของวัตถุ XMLHttpRequest มี 5 สถานะของ readyState ซึ่งแสดงด้วยตัวเลข 0 ถึง 4 ตามลำดับ
สถานะ ชื่อ คำอธิบาย
0 สถานะการเริ่มต้นที่ไม่ได้เตรียมใช้งาน วัตถุ XMLHttpRequest ถูกสร้างขึ้น (ก่อนที่จะเรียก open()) หรือรีเซ็ตโดยวิธีการ abort()
1 เปิด มีการเรียกเมธอด open() แต่ไม่ได้เรียกเมธอด send() ยังไม่ได้ส่งคำขอ
2 มีการเรียกใช้เมธอด Sent Send() และคำขอ HTTP ถูกส่งไปยังเว็บเซิร์ฟเวอร์ ไม่ได้รับการตอบกลับ
3 การรับ ได้รับส่วนหัวการตอบกลับทั้งหมดแล้ว เริ่มได้รับเนื้อหาการตอบสนองแต่ยังไม่เสร็จสมบูรณ์
4 ได้รับการตอบกลับ HTTP ที่โหลดแล้วอย่างสมบูรณ์
อย่างไรก็ตาม ควรสังเกตว่าสถานะที่เบราว์เซอร์ต่างๆ สามารถจัดการได้ในตัวจัดการเหตุการณ์ onreadystatechange นั้นไม่สอดคล้องกัน IE และ FireFox สามารถจัดการสถานะ 1 ถึง 4 ได้ ในขณะที่ Safari สามารถจัดการสถานะ 2 ถึง 4 และ Opera สามารถจัดการสถานะ 3 และ 4 ได้ . โดยพื้นฐานแล้วสถานะของ 0 นั้นไม่มีประโยชน์ เนื่องจากเมธอด open() จะถูกเรียกทันทีหลังจากสร้างอ็อบเจ็กต์ XMLHttpRequest และสถานะจะกลายเป็น 1 ในเวลานี้ เว้นแต่ว่าคุณต้องการตรวจสอบว่าอ็อบเจ็กต์ถูกยกเลิกโดยการยกเลิกหรือไม่ () แต่สถานการณ์นี้ยังมีน้อยมาก ในกรณีส่วนใหญ่ ก็เพียงพอที่จะพิจารณาว่าสถานะเป็น 4 (ยอมรับและเสร็จสมบูรณ์) หรือไม่
โอเค ฉันเข้าใจว่า readyState มี 5 สถานะ ดังนั้นผลการประมวลผลที่ส่งคืนคือการดูว่าสถานะเปลี่ยนไปเป็นสถานะที่แตกต่างกันหรือไม่ และเราสามารถดำเนินการประมวลผลที่แตกต่างกันได้อย่างไร จะบอกอ็อบเจ็กต์ XMLHttpRequest ว่าใครควรจัดการการเปลี่ยนแปลงเมื่อสถานะเปลี่ยนแปลง มีสองวิธีในการเขียน วิธีหนึ่งคือการใช้วิธีที่ไม่ระบุชื่อ และอีกวิธีคือระบุวิธี จริงๆ แล้ว มันเป็นเพียงวิธีการเขียนที่แตกต่างกันซึ่งให้ผลเหมือนกัน ลองดูที่โค้ด:
xmlhttp.onReadyStateChange = function (){
//โค้ดสำหรับจัดการการเปลี่ยนแปลงสถานะ
-
//หรือ
xmlhttp.onReadyStateChange = getResult;
ฟังก์ชัน getResult(){
///โค้ดสำหรับจัดการการเปลี่ยนแปลงสถานะ
-
//อย่างไรก็ตาม ชื่อของหมายเลขอ้างอิงนั้นค่อนข้างยาว คุณสามารถจำได้เช่นนี้ ใน ReadyState Change หมายความว่าคำขอถูกส่งไปเมื่อสถานะการอ่านเปลี่ยนไป และวิธีการประมวลผลก็ถูกระบุด้วย มีสองคุณลักษณะ: responseText และ responseXML สำหรับการใช้งาน responseXML เป็นวัตถุที่ส่งคืนและจำเป็นต้องแยกวิเคราะห์ในภายหลัง ที่นี่ ให้ใช้ responseText ก่อนเพื่อดูว่ามีอะไรส่งคืน
alert(xmlhttp.responseText); //ดูว่าโค้ด HTML ของหน้าแรกถูกส่งคืนหรือไม่ คุณคือผู้ที่ประสบความสำเร็จ
กระบวนการทั้งหมดคือ: สร้างวัตถุ XMLHttpRequest -> ระบุที่อยู่การส่งและวิธีการส่ง -> ส่งคำขอ -> ระบุวิธีการประมวลผลและประมวลผลผลลัพธ์การส่งคืน แต่ควรสังเกตว่าความเข้าใจปกติของเราคือสิ่งนี้ แต่ต้องระบุวิธีการประมวลผลที่ระบุของตัวจัดการเหตุการณ์ onreadystatechange ก่อนที่จะส่ง มิฉะนั้นจะไม่สามารถประมวลผลเหตุการณ์การเปลี่ยนแปลงสถานะได้
ดังนั้นเราควรจำไว้ตามกระบวนการต่อไปนี้: สร้างวัตถุ XMLHttpRequest -> ระบุที่อยู่การส่งและวิธีการส่ง -> ระบุวิธีการประมวลผลการเปลี่ยนแปลงสถานะ -> ส่งคำขอ หลังจากส่งคำขอแล้ว วิธีการประมวลผลที่ระบุจะเป็นไปโดยอัตโนมัติ เรียกว่าเมื่อสถานะเปลี่ยนไป
เอาล่ะ เรามาดูโค้ดที่เสร็จสมบูรณ์กันดีกว่า
รหัสที่เสร็จสมบูรณ์
var xmlhttp = false; //สร้างคำขอตัวแปรใหม่และกำหนดค่าเป็นเท็จ ใช้ false เป็นเงื่อนไขการตัดสิน ซึ่งหมายความว่ายังไม่ได้สร้างออบเจ็กต์ XMLHttpRequest
ฟังก์ชัน CreateXMLHttp(){
พยายาม{
xmlhttp = new XMLHttpRequest(); //ลองสร้างวัตถุ XMLHttpRequest ยกเว้น IE รองรับวิธีนี้
-
จับ (จ){
พยายาม{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); //ใช้ IE เวอร์ชันใหม่กว่าเพื่อสร้างวัตถุที่เข้ากันได้กับ IE (Msxml2.XMLHTTP)
-
จับ (จ){
พยายาม{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //ใช้ IE เวอร์ชันเก่าเพื่อสร้างวัตถุที่เข้ากันได้กับ IE (Microsoft.XMLHTTP)
-
จับ (ล้มเหลว){
xmlhttp = false; //หากล้มเหลว ตรวจสอบให้แน่ใจว่าค่าของคำขอยังคงเป็นเท็จ
-
-
-
ส่งคืน xmlhttp;
-
xmlhttp = CreateXMLHttp();
xmlhttp.open("get", http://www.cnblogs.com",true );
xmlhttp.onReadyStateChange = getResult;
xmlhttp.send(null);
ฟังก์ชัน getResult(){
ถ้า(xmlhttp.readyState == 4){
การแจ้งเตือน (xmlhttp.responseText);
-
-
ดูเหมือนทุกอย่างจะเรียบร้อยดี แต่คุณเคยคิดบ้างไหมว่าจะเกิดอะไรขึ้นหากโค้ด HTML ผิดพลาดในระหว่างการส่งข้อมูลผ่านเครือข่าย หรือที่อยู่ที่เราระบุไม่ถูกต้อง ในขณะนี้ คุณต้องใช้แอตทริบิวต์สถานะ ซึ่งเป็นรหัสสถานะ HTTP ที่ส่งคืนโดยเซิร์ฟเวอร์ เมื่อ xmlhttp.status เท่ากับ 200 หมายความว่ากระบวนการส่งข้อมูลเสร็จสมบูรณ์และปราศจากข้อผิดพลาด สำหรับความหมายเฉพาะของรหัสสถานะ HTTP คุณสามารถไปที่เว็บไซต์องค์กร W3C เพื่อดูที่อยู่ http://www.w3.org/Protocols/rfc2616/rfc2616-sec6.html#sec6.1.1
ฉันคิดว่ามันโอเคจริงๆ ที่จะเขียนเมธอด getResult() ดังต่อไปนี้
ฟังก์ชัน getResult(){
ถ้า (xmlhttp.readyState == 4 && xmlhttp.status == 200){
การแจ้งเตือน (xmlhttp.responseText);
-
-
โอเค สิ่งที่เดิมทีค่อนข้างเรียบง่ายดูเหมือนจะใช้คำมากหลังจากที่ฉันเขียนเกี่ยวกับเรื่องนี้มามากแล้ว อย่างไรก็ตาม ฉันคิดว่าการเข้าใจเนื้อหาพื้นฐานของการเขียนโปรแกรมเป็นสิ่งสำคัญมาก ทุกวันนี้ ไลบรารี JS จำนวนมากถูกนำมาใช้เพื่อพัฒนาโปรแกรม AJAX และไม่จำเป็นต้องเขียนโค้ดพื้นฐานดังกล่าวโดยตรง ตัวอย่างเช่น หากเราใช้ jQuery อันโด่งดัง แต่ถ้าเรามีความรู้พื้นฐานเป็นอย่างดี แล้ว libraries เหล่านี้จะรายงานข้อผิดพลาด หรือหากมีปัญหา เราจะสามารถรู้ได้ว่าข้อผิดพลาดอยู่ที่ไหนรวดเร็วมาก และทำการเปลี่ยนแปลงได้รวดเร็วยิ่งขึ้น ทำให้โปรแกรมทำงานได้ตามปกติ