เทคโนโลยีที่สำคัญ (เครื่องมือ) ที่ใช้ในการออกแบบ AJAX คือวัตถุ XMLHTTPRequest ออบเจ็กต์ XMLHttpRequest เป็นรากฐานทางเทคนิคสำหรับแอปพลิเคชัน AJAX และ Web 2.0 ทั้งหมดในปัจจุบัน แม้ว่าผู้จำหน่ายซอฟต์แวร์และชุมชนโอเพ่นซอร์สกำลังจัดเตรียมเฟรมเวิร์ก AJAX ต่างๆ เพื่อทำให้การใช้ออบเจ็กต์ XMLHttpRequest ง่ายขึ้น อย่างไรก็ตาม ยังคงจำเป็นสำหรับเราที่จะเข้าใจคุณสมบัติและวิธีการของออบเจ็กต์นี้
1. ออบเจ็กต์ XMLHTTPRequest คืออะไร
คำจำกัดความที่พบบ่อยที่สุดคือ: XmlHttp คือชุดของ API ที่สามารถส่งหรือรับ XML และข้อมูลอื่นๆ ผ่านโปรโตคอล http ใน JavaScript, VbScript, Jscript และภาษาสคริปต์อื่นๆ การใช้งาน XmlHttp ที่ใหญ่ที่สุดคือสามารถอัปเดตเนื้อหาบางส่วนในหน้าเว็บได้โดยไม่ต้องรีเฟรชทั้งหน้า (ฟังก์ชันนี้เป็นหนึ่งในคุณสมบัติที่สำคัญของ AJAX)
คำอธิบายจาก MSDN: XmlHttp มีโปรโตคอลสำหรับไคลเอ็นต์ในการสื่อสารกับเซิร์ฟเวอร์ http ไคลเอนต์สามารถส่งคำขอไปยังเซิร์ฟเวอร์ http ผ่านวัตถุ XmlHttp (MSXML2.XMLHTTP.3.0) และใช้ Microsoft XML Document Object Model Microsoft? XML Document Object Model (DOM) เพื่อประมวลผลการตอบสนอง
ขอพูดนอกประเด็น จริงๆ แล้วสิ่งนี้เกิดขึ้นเร็วมาก อย่างไรก็ตาม ในอดีตการรองรับเบราว์เซอร์ยังไม่เพียงพอ เปลี่ยนแปลงไปมาก Mozilla และ Safari นำมาใช้เป็นมาตรฐานโดยพฤตินัยและเบราว์เซอร์กระแสหลักเริ่มรองรับวัตถุ XMLHTTPRequest แต่สิ่งที่ต้องเน้นย้ำที่นี่คือ XMLHTTPRequest ยังไม่ใช่มาตรฐาน W3C ดังนั้นประสิทธิภาพของเบราว์เซอร์ที่แตกต่างกันจึงแตกต่างกันเล็กน้อย
2. สร้างวัตถุ XMLHTTPRequest
เมื่อพูดถึงความแตกต่าง มาดูวิธีการประกาศ (ใช้) ก่อนใช้วัตถุ XMLHTTPRequest เพื่อส่งคำขอและประมวลผลการตอบกลับ เราต้องใช้ javascript เพื่อสร้างวัตถุ XMLHTTPRequest (IE ใช้ XMLHTTPRequest เป็นวัตถุ ActiveX และเบราว์เซอร์อื่นๆ [เช่น Firefox/Safari/Opear] ใช้เป็นวัตถุจาวาสคริปต์ดั้งเดิม) ลองมาดูวิธีการใช้ JavaScript เพื่อสร้างมัน:
ต่อไปนี้เป็นคำพูด:
<script language="javascript" type="text/javascript">
-
var xmlhttp;
//สร้างวัตถุ XMLHTTPRequest
ฟังก์ชัน createXMLHTTPRequest(){
if(window.ActiveXObject){/ // ตรวจสอบว่ารองรับการควบคุม ActiveX หรือไม่
xmlhttp = new ActiveObject("Microsoft.XMLHTTP"); // สร้างวัตถุ XMLHTTPRequest โดยการสร้างอินสแตนซ์ใหม่ของ ActiveXObject
-
อื่นถ้า (window.XMLHTTPRequest) {// พิจารณาว่าจะใช้ XMLHTTPRequest เป็นวัตถุจาวาสคริปต์ในเครื่องหรือไม่
xmlhttp = new XMLHTTPRequest(); // สร้างอินสแตนซ์ของ XMLHTTPRequest (วัตถุจาวาสคริปต์ในเครื่อง)
-
-
-
</script>3. คุณสมบัติและวิธีการ เนื่องจากมีหลายอย่างมากเกินไป ฉันจะใช้หน้านี้เพื่อแสดงรายการวิธีการและคุณสมบัติ ฉันจะให้ตัวอย่างโดยละเอียดในภายหลัง (เพราะฉันกำลังเรียนรู้เป็นหลัก)
<html>
<หัว>
<title>คำอธิบายของการสาธิตวัตถุ XMLHTTPRequest</title>
<script language="javascript" type="text/javascript">
-
var xmlhttp;
//สร้างวัตถุ XMLHTTPRequest
ฟังก์ชัน createXMLHTTPRequext(){
ถ้า (window.ActiveXObject) {
xmlhttp = ActiveXObject ใหม่ ('Microsoft.XMLHTTP');
-
อื่นถ้า (window.XMLHTTPRequest){
xmlhttp = XMLHTTPRequest ใหม่ ();
-
-
ฟังก์ชั่น PostOrder (xmldoc)
-
createXMLHTTPRequext();
// วิธีการ: เปิด
//สร้างคำขอ http ใหม่และระบุวิธีการร้องขอ, URL และข้อมูลการยืนยัน
// ไวยากรณ์: oXMLHttpRequest.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword);
//พารามิเตอร์
// bstrMethod
//วิธีการ http เช่น: POST, GET, PUT และ PROPFIND ไม่คำนึงถึงขนาดตัวพิมพ์
// bstrUrl
//ที่อยู่ URL ที่ร้องขออาจเป็นที่อยู่ที่แน่นอนหรือที่อยู่ที่เกี่ยวข้องก็ได้
// varAsync[ทางเลือก]
// ประเภทบูลีน ระบุว่าคำขอนี้เป็นแบบอะซิงโครนัสหรือไม่ หากเป็นจริง ฟังก์ชันการโทรกลับที่ระบุโดยแอตทริบิวต์ onreadystatechange จะถูกเรียกเมื่อสถานะเปลี่ยนแปลง
// bstrUser[ทางเลือก]
// หากเซิร์ฟเวอร์ต้องการการตรวจสอบ ให้ระบุชื่อผู้ใช้ที่นี่ หากไม่ได้ระบุ หน้าต่างการตรวจสอบจะปรากฏขึ้นเมื่อเซิร์ฟเวอร์ต้องการการตรวจสอบ
// bstrPassword[ทางเลือก]
// ส่วนรหัสผ่านของข้อมูลการยืนยัน หากชื่อผู้ใช้ว่างเปล่า ค่านี้จะถูกละเว้น
// หมายเหตุ: หลังจากเรียกใช้เมธอดนี้แล้ว คุณสามารถเรียกใช้เมธอด send เพื่อส่งข้อมูลไปยังเซิร์ฟเวอร์ได้
xmlhttp.Open("get", " http://localhost/example.htm ", false);
// var book = xmlhttp.responseXML.selectSingleNode("//book[@id='bk101']");
// การแจ้งเตือน (book.xml);
// คุณสมบัติ: onreadystatechange
//onreadystatechange: ระบุตัวจัดการเหตุการณ์เมื่อคุณสมบัติ readyState เปลี่ยนแปลง
// ไวยากรณ์: oXMLHttpRequest.onreadystatechange = funcMyHandler;
// ตัวอย่างต่อไปนี้สาธิตการเรียกใช้ฟังก์ชัน HandleStateChange เมื่อคุณสมบัติ readyState ของวัตถุ XMLHTTPRequest เปลี่ยนแปลง
// เมื่อได้รับข้อมูล (readystate == 4) ปุ่มบนหน้านี้จะถูกเปิดใช้งาน
// หมายเหตุ: คุณสมบัตินี้เป็นแบบเขียนเท่านั้นและเป็นส่วนขยายของ W3C Document Object Model
xmlhttp.onreadystatechange= HandleStateChange;
// วิธีการ: ส่ง
//ส่งคำขอไปยังเซิร์ฟเวอร์ http และรับการตอบกลับ
// ไวยากรณ์: oXMLHttpRequest.send(varBody);
// พารามิเตอร์: varBody (ข้อมูลที่จะส่งผ่านการร้องขอนี้)
// หมายเหตุ: โหมดซิงโครนัสหรืออะซิงโครนัสของเมธอดนี้ขึ้นอยู่กับพารามิเตอร์ bAsync ในเมธอด open หาก bAsync == False เมธอดนี้จะรอให้คำขอเสร็จสมบูรณ์หรือหมดเวลาก่อนที่จะส่งคืน หาก bAsync == True เมธอดนี้ จะกลับมาทันที
// วิธีการนี้ใช้พารามิเตอร์ทางเลือกหนึ่งตัว ซึ่งเป็น requestBody ที่จะใช้ ประเภทอินพุต VARIANT ที่ยอมรับได้คือ BSTR, SAFEARRAY ของ UI1 (ไบต์ที่ไม่ได้ลงนาม), IDispatch ไปยังวัตถุ XML Document Object Model (DOM) และ IStream * คุณสามารถทำได้ ใช้เฉพาะการเข้ารหัสแบบกลุ่ม (สำหรับการส่ง) เมื่อส่งประเภทอินพุต IStream * ส่วนประกอบจะตั้งค่าส่วนหัว Content-Length โดยอัตโนมัติสำหรับประเภทอินพุตทั้งหมดยกเว้น IStream *
// หากข้อมูลที่ส่งเป็น BSTR การตอบสนองจะถูกเข้ารหัสเป็น utf-8 และต้องตั้งค่าส่วนหัวประเภทเอกสารที่มีชุดอักขระในตำแหน่งที่เหมาะสม
// หากประเภทอินพุตเป็น SAFEARRAY ของ UI1 การตอบสนองจะถูกส่งไปโดยไม่มีการเข้ารหัสเพิ่มเติม ผู้เรียกจะต้องตั้งค่าส่วนหัวประเภทเนื้อหาด้วยประเภทเนื้อหาที่เหมาะสม
// หากข้อมูลที่ส่งเป็นวัตถุ XML DOM การตอบสนองจะถูกเข้ารหัสเป็นการเข้ารหัสที่ประกาศในเอกสาร xml หากไม่มีการประกาศการเข้ารหัสในเอกสาร xml ระบบจะใช้ UTF-8 เริ่มต้น
// หากประเภทอินพุตเป็น IStream * การตอบสนองจะถูกส่งโดยไม่มีการเข้ารหัสเพิ่มเติม ผู้เรียกจะต้องตั้งค่าส่วนหัวประเภทเนื้อหาด้วยประเภทเนื้อหาที่เหมาะสม
xmlhttp.Send(xmldoc);
// วิธีการ: getAllResponseHeaders
// รับส่วนหัว http ทั้งหมดของการตอบกลับ
// ไวยากรณ์: strValue = oXMLHttpRequest.getAllResponseHeaders();
// หมายเหตุ: ชื่อและค่าของส่วนหัว http แต่ละรายการจะคั่นด้วยเครื่องหมายทวิภาคและลงท้ายด้วย rn วิธีนี้สามารถเรียกได้หลังจากวิธีการส่งเสร็จสิ้นแล้วเท่านั้น
การแจ้งเตือน (xmlhttp.getAllResponseHeaders());
// วิธีการ: getResponseHeader
// รับส่วนหัว http ที่ระบุจากข้อมูลการตอบกลับ
// ไวยากรณ์: strValue = oXMLHttpRequest.getResponseHeader(bstrHeader);
// หมายเหตุ: วิธีการนี้สามารถเรียกได้เฉพาะเมื่อวิธีการส่งสำเร็จเท่านั้น หากประเภทเอกสารที่เซิร์ฟเวอร์ส่งคืนคือ "text/xml" แสดงว่าประโยคนี้
// xmlhttp.getResponseHeader("Content-Type"); จะส่งคืนสตริง "text/xml" คุณสามารถใช้เมธอด getAllResponseHeaders เพื่อรับข้อมูลส่วนหัว http ที่สมบูรณ์
alert(xmlhttp.getResponseHeader("Content-Type"); // ส่งออกคอลัมน์ Content-Type ในส่วนหัว http: เวอร์ชันและชื่อของเว็บเซิร์ฟเวอร์ปัจจุบัน
document.frmTest.myButton.disabled = จริง;
// วิธีการ: ยกเลิก
//ยกเลิกคำขอปัจจุบัน
// ไวยากรณ์: oXMLHttpRequest.abort();
// หมายเหตุ: หลังจากเรียกใช้เมธอดนี้แล้ว คำขอปัจจุบันจะส่งคืนสถานะ UNITIALIZED
//xmlhttp.abort();
// วิธีการ: setRequestHeader
// ระบุส่วนหัว http ของคำขอแยกกัน
// ไวยากรณ์: oXMLHttpRequest.setRequestHeader(bstrHeader, bstrValue);
// พารามิเตอร์: bstrHeader (สตริง, ชื่อส่วนหัว)
// bstrValue(สตริง, ค่า)
// หมายเหตุ: หากมีส่วนหัว http ที่มีชื่อนี้อยู่แล้ว ส่วนหัวนั้นจะถูกเขียนทับ วิธีการนี้จะต้องถูกเรียกหลังจากวิธีการเปิด
// xmlhttp.setRequestHeader(bstrHeader, bstrValue);
-
ฟังก์ชั่น HandleStateChange()
-
//แอตทริบิวต์: readyState
// ส่งคืนสถานะปัจจุบันของคำขอ XMLHTTP
// ไวยากรณ์: lValue = oXMLHttpRequest.readyState;
// หมายเหตุ: ตัวแปร คุณลักษณะนี้เป็นแบบอ่านอย่างเดียว และสถานะแสดงด้วยจำนวนเต็มความยาว 4 คำจำกัดความมีดังนี้:
// 0 (กำหนดค่าเริ่มต้น) สร้างวัตถุแล้ว แต่ยังไม่ได้เตรียมใช้งาน (ยังไม่ได้เรียกใช้วิธีการเปิด)
// 1 (การเริ่มต้น) สร้างวัตถุแล้วและยังไม่ได้เรียกใช้วิธีการส่ง
// 2 (ส่งข้อมูล) มีการเรียกวิธีการส่งแล้ว แต่ไม่ทราบสถานะปัจจุบันและส่วนหัว http
// 3 (กำลังส่งข้อมูล) ได้รับข้อมูลบางส่วนแล้ว เนื่องจากการตอบกลับและส่วนหัว http ไม่สมบูรณ์ จึงเกิดข้อผิดพลาดเมื่อรับข้อมูลบางส่วนผ่าน responseBody และ responseText
// 4 (เสร็จสมบูรณ์) การรับข้อมูลเสร็จสมบูรณ์ ในขณะนี้ ข้อมูลการตอบสนองที่สมบูรณ์สามารถรับได้ผ่านทาง responseBody และ responseText
ถ้า (xmlhttp.readyState == 4){
document.frmTest.myButton.disabled = เท็จ;
// คุณสมบัติ: responseBody
// ส่งคืนข้อมูลการตอบกลับของเซิร์ฟเวอร์ในรูปแบบที่กำหนด
// ไวยากรณ์: strValue = oXMLHttpRequest.responseBody;
// หมายเหตุ: ตัวแปร คุณสมบัตินี้เป็นแบบอ่านอย่างเดียวและแสดงถึงข้อมูลไบนารีที่ไม่ได้เข้ารหัสซึ่งส่งคืนโดยตรงจากเซิร์ฟเวอร์ในรูปแบบอาร์เรย์ที่ไม่ได้ลงนาม
การแจ้งเตือน (xmlhttp.responseBody);
//คุณสมบัติ: responseStream
//ส่งคืนข้อมูลตอบกลับในรูปแบบของวัตถุ Ado Stream
// ไวยากรณ์: strValue = oXMLHttpRequest.responseStream;
// หมายเหตุ: ตัวแปร คุณสมบัตินี้เป็นแบบอ่านอย่างเดียวและส่งคืนข้อมูลการตอบสนองในรูปแบบของวัตถุ Ado Stream
การแจ้งเตือน (xmlhttp.responseStream);
//คุณสมบัติ: ข้อความตอบกลับ
// ส่งคืนข้อมูลตอบกลับเป็นสตริง
// ไวยากรณ์: strValue = oXMLHttpRequest.responseText;
// หมายเหตุ: ตัวแปร คุณสมบัตินี้เป็นแบบอ่านอย่างเดียวและส่งกลับข้อมูลการตอบสนองเป็นสตริง XMLHTTP พยายามถอดรหัสข้อมูลการตอบสนองเป็นสตริง Unicode
// XMLHTTP ตั้งค่าการเข้ารหัสข้อมูลตอบกลับเป็น UTF-8 ตามค่าเริ่มต้น หากข้อมูลที่ส่งคืนโดยเซิร์ฟเวอร์มี BOM (เครื่องหมายลำดับไบต์) XMLHTTP ก็สามารถทำได้
// เพื่อถอดรหัสข้อมูล UCS-2 (endian ใหญ่หรือเล็ก) หรือ UCS-4 ใด ๆ โปรดทราบว่าหากเซิร์ฟเวอร์ส่งคืนเอกสาร xml คุณลักษณะนี้
// คุณสมบัติไม่รองรับการประกาศการเข้ารหัสในเอกสาร xml คุณต้องใช้ responseXML เพื่อจัดการ
การแจ้งเตือน (xmlhttp.responseText);
//คุณสมบัติ: responseXML
//จัดรูปแบบข้อมูลการตอบสนองเป็นวัตถุเอกสาร Xml และส่งคืน
// ไวยากรณ์: var objDispatch = oXMLHttpRequest.responseXML;
// หมายเหตุ: ตัวแปร คุณสมบัตินี้เป็นแบบอ่านอย่างเดียว จัดรูปแบบข้อมูลการตอบสนองเป็นวัตถุเอกสาร Xml แล้วส่งคืน หากข้อมูลตอบกลับไม่ใช่เอกสาร XML ที่ถูกต้อง
// คุณสมบัตินี้เองไม่ส่งคืน XMLDOMParseError และสามารถรับข้อมูลข้อผิดพลาดผ่านวัตถุ DOMDocument ที่ประมวลผลแล้ว
alert("ผลลัพธ์ = " + xmlhttp.responseXML.xml);
//แอตทริบิวต์: สถานะ
// ส่งคืนรหัสสถานะ http ของคำขอปัจจุบัน
// ไวยากรณ์: lValue = oXMLHttpRequest.status;
// ค่าส่งคืน: รหัสสถานะ http มาตรฐานแบบยาว กำหนดไว้ดังนี้:
//หมายเลข:คำอธิบาย
// 100:ไปต่อ
// 101:การสลับโปรโตคอล
// 200:โอเค
// 201:สร้างแล้ว
// 202:ยอมรับแล้ว
// 203:ข้อมูลที่ไม่ได้รับอนุญาต
// 204:ไม่มีเนื้อหา
// 205:รีเซ็ตเนื้อหา
// 206: เนื้อหาบางส่วน
// 300:หลายตัวเลือก
// 301:ย้ายอย่างถาวร
// 302:พบแล้ว
// 303: ดูอื่นๆ
// 304: ไม่ได้รับการแก้ไข
// 305:ใช้พรอกซี
// 307: เปลี่ยนเส้นทางชั่วคราว
// 400: คำขอไม่ถูกต้อง
// 401: ไม่ได้รับอนุญาต
// 402:ต้องชำระเงิน
// 403:ต้องห้าม
// 404: ไม่พบ
// 405:วิธีการไม่ได้รับอนุญาต
// 406: ไม่เป็นที่ยอมรับ
// 407: ต้องมีการรับรองความถูกต้องของพร็อกซี
// 408: คำขอหมดเวลา
// 409:ความขัดแย้ง
// 410: ไปแล้ว
// 411: ต้องระบุความยาว
// 412: เงื่อนไขเบื้องต้นล้มเหลว
// 413: คำขอเอนทิตีมีขนาดใหญ่เกินไป
// 414:Request-URI ยาวเกินไป
// 415: ประเภทสื่อที่ไม่รองรับ
// 416: ช่วงที่ร้องขอไม่เหมาะสม
// 417:ความคาดหวังล้มเหลว
// 500: ข้อผิดพลาดเซิร์ฟเวอร์ภายใน
// 501: ไม่ได้นำไปใช้งาน
// 502: เกตเวย์ไม่ถูกต้อง
// 503: บริการไม่พร้อมใช้งาน
// 504: เกตเวย์หมดเวลา
// 505:ไม่รองรับเวอร์ชัน HTTP
// หมายเหตุ: จำนวนเต็มยาว คุณสมบัตินี้เป็นแบบอ่านอย่างเดียวและส่งกลับรหัสสถานะ http ของคำขอปัจจุบันเท่านั้น รับคุณสมบัตินี้ได้หลังจากส่งและรับข้อมูลแล้วเท่านั้น
การแจ้งเตือน (xmlhttp.status);
//แอตทริบิวต์: statusText
// ส่งคืนสถานะแถวการตอบกลับของคำขอปัจจุบัน
// ไวยากรณ์: strValue = oXMLHttpRequest.statusText;
// หมายเหตุ: สตริง คุณสมบัตินี้เป็นแบบอ่านอย่างเดียว โดยส่งคืนสถานะแถวการตอบกลับของคำขอปัจจุบันใน BSTR คุณสมบัตินี้สามารถรับได้หลังจากส่งและรับข้อมูลแล้วเท่านั้น
การแจ้งเตือน (xmlhttp.statusText);
-
-
-
</สคริปต์>
</หัว>
<ร่างกาย>
<ชื่อแบบฟอร์ม = "frmTest">
<input name="myButton" type="button" value="Click Me" onclick="PostOrder('http://localhost/example.htm');">
</แบบฟอร์ม>
</ร่างกาย>
</html>