AJAX เป็นเครื่องมือสำคัญในการพัฒนาเว็บแอปพลิเคชันที่ทันสมัย ช่วยให้คุณสามารถส่งและรับข้อมูลแบบอะซิงโครนัสไปยังเซิร์ฟเวอร์แล้วแยกวิเคราะห์ใน JavaScript Ajax เป็นตัวย่อของ JavaScript แบบอะซิงโครนัสและ XML (JavaScript แบบอะซิงโครนัสและ XML)
ชื่อของข้อกำหนดของ Ajax Core นั้นสืบทอดมาจากวัตถุ JavaScript ที่ใช้ในการสร้างและเริ่มต้นคำขอ: XMLHTTPREQUEST ข้อกำหนดนี้มีสองระดับ เบราว์เซอร์กระแสหลักทั้งหมดใช้ระดับแรกซึ่งแสดงถึงระดับพื้นฐานของการทำงาน ระดับที่สองขยายข้อกำหนดเริ่มต้นรวมเหตุการณ์เพิ่มเติมและคุณสมบัติบางอย่างเพื่อให้ง่ายต่อการทำงานร่วมกับองค์ประกอบแบบฟอร์มและรองรับข้อกำหนดที่เกี่ยวข้อง
1. AJAX เริ่มต้น
กุญแจสำคัญใน AJAX อยู่ในวัตถุ XMLHTTTPREQUEST และวิธีการเข้าใจวัตถุนี้คือการดูตัวอย่าง รหัสต่อไปนี้แสดงการใช้งานง่าย ๆ ของวัตถุ XMLHTTTPREQUEST:
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> ตัวอย่าง </title> </head> <body> <div> <button> แอปเปิ้ล </button> ปุ่ม var = document.getElementsByTagname ("ปุ่ม"); สำหรับ (var i = 0; i <buttons.length; i ++) {ปุ่ม [i] .onclick = handlebuttonpress; } // สคริปต์จะเรียกใช้ฟังก์ชันนี้เพื่อตอบสนองต่อฟังก์ชั่นการคลิกของปุ่มควบคุมฟังก์ชั่น HandleButtonPress (e) {// สร้าง XMLHTTTPREQUEST OBJECT VAR HTTPREQUEST = ใหม่ XMLHTTTPREQUEST (); // ตั้งค่าตัวจัดการกิจกรรมสำหรับกิจกรรม OnReadyStateChange httpRequest.onreadyStateChange = HandlerEsponse; // ใช้วิธีการเปิดเพื่อระบุวิธี HTTP และ URL เพื่อขอ (นั่นคือบอกวัตถุ HTTPREQUEST ว่าคุณต้องการทำอะไร) httpRequest.open ("รับ", e.target.innerhtml+". html"); // ไม่มีข้อมูลถูกส่งไปยังเซิร์ฟเวอร์ที่นี่ดังนั้นวิธีการส่งไม่มีพารามิเตอร์ httpRequest.send (); } // การประมวลผลการตอบสนอง // เมื่อสคริปต์เรียกวิธีการส่งเบราว์เซอร์จะส่งคำขอไปยังเซิร์ฟเวอร์ในพื้นหลัง เนื่องจากคำขอถูกประมวลผลในพื้นหลัง Ajax จึงพึ่งพาเหตุการณ์เพื่อแจ้งความคืบหน้าของคำขอ ฟังก์ชั่น handleresponse (e) {// เมื่อเหตุการณ์ onreadystatechange ถูกเรียกใช้เบราว์เซอร์จะส่งผ่านวัตถุเหตุการณ์ไปยังฟังก์ชั่นตัวจัดการที่ระบุและคุณสมบัติเป้าหมายจะถูกตั้งค่าเป็น xmlhtttprequest ที่เกี่ยวข้องกับเหตุการณ์นี้ถ้า (e.target document.getElementById ("เป้าหมาย"). innerhtml = e.target.responsetext; // แสดงเนื้อหาของเอกสารที่ร้องขอ}} </script> </body> </html>เอกสารเพิ่มเติมสามฉบับนั้นง่ายมาก:
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> แอปเปิ้ล </title> <style> img {float: ซ้าย; ความกว้าง: 100px; ความสูง: 100px;} </style> </head> <body> <p> <img src = "../ img/show-page/img_apples.jpg"/> สำหรับแอปเปิ้ล </p> </body> </html>เอฟเฟกต์แสดงในรูปด้านล่าง:
ในขณะที่ผู้ใช้คลิกที่แต่ละปุ่มผลไม้เบราว์เซอร์จะดำเนินการแบบอะซิงโครนัสและดึงเอกสารที่ร้องขอในขณะที่เอกสารหลักจะไม่โหลดซ้ำ นี่เป็นพฤติกรรม AJAX ทั่วไป
2. การใช้กิจกรรม Ajax
หลังจากสร้างและสำรวจตัวอย่างง่ายๆคุณสามารถเริ่มขุดลงในคุณสมบัติที่รองรับโดยวัตถุ XMLHTTPRequest และวิธีการใช้ในคำขอของคุณ จุดเริ่มต้นคือเหตุการณ์เพิ่มเติมที่กำหนดไว้ในข้อกำหนดระดับที่สอง:
เหตุการณ์เหล่านี้ส่วนใหญ่จะถูกกระตุ้น ณ เวลาที่กำหนดในระหว่างการร้องขอ เหตุการณ์ทั้งสองเป็นข้อยกเว้น ReadyStateChange และความคืบหน้าซึ่งสามารถเรียกใช้หลายครั้งเพื่อให้การอัปเดตความคืบหน้า
เมื่อมีการกำหนดกิจกรรมเหล่านี้เบราว์เซอร์จะใช้วัตถุเหตุการณ์ปกติสำหรับเหตุการณ์ ReadyStateChange และวัตถุ ProgressEvent สำหรับเหตุการณ์อื่น ๆ วัตถุ ProgressEvent กำหนดสมาชิกทั้งหมดของวัตถุเหตุการณ์และเพิ่มสมาชิกเหล่านี้ที่อธิบายไว้ในรูปต่อไปนี้:
รหัสต่อไปนี้แสดงวิธีการใช้กิจกรรมเหล่านี้:
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> ตัวอย่าง </title> <style> ตาราง {margin: 10px; การล่มสลายของชายแดน: ยุบ; Float: ซ้าย;} div {margin: 10px;} td, th {padding: 4px;} </style> </head> <body> <body> <divel type = "application/javascript"> var buttons = document.getElementsByTagname ("ปุ่ม"); สำหรับ (var i = 0; i <buttons.length; i ++) {ปุ่ม [i] .onclick = handlebuttonpress; } var httprequest; ฟังก์ชั่น HandleButtonPress (e) {ClearEventDetails (); httprequest = ใหม่ xmlhttprequest (); httprequest.onreadystatechange = handleresponse; httprequest.onerror = handleror; httprequest.onload = handleload ;; httprequest.onloadend = handleloadend; httprequest.onloadstart = handleloadStart ;; httprequest.onprogress = handleprogress; httprequest.open ("รับ", e.target.innerhtml+". html"); httprequest.send (); } ฟังก์ชั่น handlerEsponse (e) {displayEventDetails ("ReadyState ("+httpRequest.readyState+")") ถ้า (e.target.readyState == xmlhttprequest.done && e.target.status == 200) }} ฟังก์ชั่น HandleRror (e) {displayEventDetails ("ข้อผิดพลาด", e);} ฟังก์ชั่น handleload (e) {displayEventDetails ("โหลด", e);} ฟังก์ชั่น handleloadend (e) {displayEventDetails ("loadend", e); handleLoadStart (e) {displayEventDetails ("loadStart", e);} ฟังก์ชั่น handleProgress (e) {displayEventDetails ("ความคืบหน้า", e);} ฟังก์ชั่น ClearEventDetails () {document.getElementById ("เหตุการณ์") "<tr> <th> เหตุการณ์ </th> <th> lengthcomputable </th> <th> โหลด </th> <th> ทั้งหมด </th>"; } function displayEventDetails (eventName, e) {ถ้า (e) {document.getElementById ("เหตุการณ์"). innerhtml+= "<tr> <td>"+eventname+"</td> <td>+E.LengthComputable+" </td> e.total+"</td> </tr>"; } else {document.getElementById ("events"). innerhtml+= "<tr> <td>"+eventName+"</td> <td> na </td> <td> na </td> <td> na </td> <td> na </td> </td> }} </script> </body> </html>นี่คือรูปแบบของตัวอย่างก่อนหน้านี้การลงทะเบียนตัวจัดการสำหรับเหตุการณ์บางอย่างและสร้างบันทึกสำหรับแต่ละเหตุการณ์ที่ประมวลผลในองค์ประกอบตาราง จากภาพต่อไปนี้คุณสามารถดูว่าเบราว์เซอร์ Firefox กระตุ้นเหตุการณ์เหล่านี้อย่างไร
3. จัดการข้อผิดพลาด
ข้อผิดพลาดสองประเภทจะต้องให้ความสนใจเมื่อใช้ AJAX ความแตกต่างระหว่างพวกเขาเกิดจากมุมมองที่แตกต่างกัน
ข้อผิดพลาดประเภทแรกคือปัญหาที่เห็นได้จากมุมมองของวัตถุ XMLHTTPRequest: ปัจจัยบางอย่างป้องกันไม่ให้คำขอถูกส่งไปยังเซิร์ฟเวอร์ ตัวอย่างเช่น DNS ไม่สามารถแก้ไขชื่อโฮสต์คำขอการเชื่อมต่อถูกปฏิเสธหรือ URL ไม่ถูกต้อง
ปัญหาประเภทที่สองคือปัญหาที่เห็นได้จากมุมมองของแอปพลิเคชันไม่ใช่วัตถุ XMLHTTPREQUEST เกิดขึ้นเมื่อคำขอถูกส่งไปยังเซิร์ฟเวอร์สำเร็จซึ่งได้รับการร้องขอกระบวนการและสร้างการตอบกลับ แต่การตอบกลับไม่ได้ชี้ไปที่สิ่งที่คุณคาดหวัง ตัวอย่างเช่นหาก URL ที่ร้องขอไม่มีอยู่ปัญหาประเภทนี้จะเกิดขึ้น
มีสามวิธีในการจัดการกับข้อผิดพลาดเหล่านี้ดังที่แสดงในรหัสต่อไปนี้:
3.1 การจัดการข้อผิดพลาดการตั้งค่า
ปัญหาประเภทแรกที่ต้องจัดการคือการส่งผ่านข้อมูลที่ไม่ถูกต้องไปยังวัตถุ xmlhttpresquest เช่น URL ที่ไม่ถูกต้อง พวกเขามีแนวโน้มที่จะเกิดขึ้นอย่างมากเมื่อสร้าง URL ตามอินพุตของผู้ใช้ เพื่อจำลองปัญหาประเภทนี้เอกสารข้างต้นมีปุ่มที่เพิ่ม URL ที่ไม่ดีแท็ก (URL ผิด) การกดปุ่มนี้จะเรียกวิธีการเปิดในแบบฟอร์มต่อไปนี้:
httprequest.open ("get", "http: //")
นี่เป็นข้อผิดพลาดที่ป้องกันไม่ให้คำขอถูกดำเนินการและข้อผิดพลาดจะถูกโยนลงเมื่อเหตุการณ์เช่นนี้เกิดขึ้นในวัตถุ XMLHTTPRequest ซึ่งหมายความว่าจำเป็นต้องลอง ... คำสั่งจับต้องล้อมรอบรหัสที่ตั้งค่าคำขอเช่นนี้:
ลอง {... httprequest.open ("รับ", "http: //") ... httprequest.send (); } catch (ข้อผิดพลาด) {displayerRormsg ("try/catch", error.message)}ประโยคที่จับได้เปิดโอกาสให้คุณกู้คืนจากข้อผิดพลาด คุณสามารถเลือกที่จะแจ้งให้ผู้ใช้มีค่าหรือกลับไปที่ URL เริ่มต้นหรือเพียงแค่ยกเลิกคำขอ ในตัวอย่างนี้ฟังก์ชั่น DisplayerRormsg ถูกเรียกให้แสดงข้อความแสดงข้อผิดพลาด
3.2 ข้อผิดพลาดในการดำเนินการตามคำขอ
ข้อผิดพลาดประเภทที่สองเกิดขึ้นเมื่อมีการสร้างคำขอ แต่มีข้อผิดพลาดอื่น ๆ ในการจำลองปัญหาประเภทนี้มีการเพิ่มปุ่มที่มีชื่อว่าโฮสต์ที่ไม่ดี (โฮสต์ข้อผิดพลาด) ในตัวอย่าง เมื่อกดปุ่มนี้วิธีการเปิดจะถูกเรียกให้เข้าถึง URL ที่ไม่สามารถใช้งานได้:
httprequest.open ("รับ", http: //www.ycdoitt.com/nopage.html)มีสองปัญหาเกี่ยวกับ URL นี้ ปัญหาแรกคือ DNS ชื่อโฮสต์ไม่สามารถแก้ไขได้ดังนั้นเบราว์เซอร์จึงไม่สามารถสร้างการเชื่อมต่อเซิร์ฟเวอร์ได้ ปัญหานี้รู้ว่าวัตถุ XMLHTTTPREQUEST จะเห็นได้ชัดเมื่อมันเริ่มสร้างคำขอดังนั้นจึงส่งสัญญาณข้อผิดพลาดในสองวิธี หากคุณลงทะเบียนผู้ฟังสำหรับเหตุการณ์ข้อผิดพลาดเบราว์เซอร์จะส่งวัตถุเหตุการณ์ไปยังผู้ฟังของคุณ นี่คือฟังก์ชั่นที่ใช้ในตัวอย่าง:
ฟังก์ชั่น HandleRror (E) {DisplayERRORMSG ("เหตุการณ์ข้อผิดพลาด", httpRequest.status + httprequest.statustext); -เมื่อเกิดข้อผิดพลาดดังกล่าวระดับของข้อมูลที่สามารถรับได้จากวัตถุ xmlhttprequest ขึ้นอยู่กับเบราว์เซอร์ น่าเสียดายที่ในกรณีส่วนใหญ่สถานะที่มีค่า 0 และค่า Statustext ที่ว่างเปล่าจะได้รับ
ปัญหาที่สองคือ URL และคำขอที่สร้างขึ้นมีแหล่งที่แตกต่างกันซึ่งไม่ได้รับอนุญาตโดยค่าเริ่มต้น โดยปกติคุณสามารถส่งคำขอ AJAX ไปยัง URL ต้นกำเนิดเดียวกันที่โหลดสคริปต์เท่านั้น เมื่อเบราว์เซอร์รายงานปัญหานี้อาจมีข้อผิดพลาดหรือเหตุการณ์ข้อผิดพลาดอาจถูกเรียกใช้ เบราว์เซอร์ที่แตกต่างกันจัดการกับมันแตกต่างกัน เบราว์เซอร์ที่แตกต่างกันยังตรวจสอบแหล่งที่มาในเวลาที่แตกต่างกันซึ่งหมายความว่าเบราว์เซอร์อาจไม่เห็นการเน้นปัญหาเดียวกันเสมอไป การแบ่งปันทรัพยากรข้ามแหล่งกำเนิดสามารถใช้เพื่อข้ามข้อ จำกัด ที่คล้ายคลึงกัน
3.3 การจัดการข้อผิดพลาดของแอปพลิเคชัน
ข้อผิดพลาดประเภทสุดท้ายเกิดขึ้นเมื่อคำขอเสร็จสมบูรณ์ (จากมุมมองของวัตถุ XMLHTTPRequest) แต่ไม่คืนข้อมูลที่คุณต้องการ ในการสร้างปัญหาดังกล่าวเพิ่มปุ่มด้วยแท็กแตงกวาในตัวอย่างด้านบน การกดปุ่มนี้จะสร้าง URL คำขอคล้ายกับปุ่มแอปเปิ้ลเชอร์รี่และปุ่มกล้วย แต่เอกสาร cucumber.html ไม่มีอยู่บนเซิร์ฟเวอร์
ไม่มีข้อผิดพลาดในกระบวนการนี้เอง (เนื่องจากคำขอเสร็จสมบูรณ์) และจำเป็นต้องกำหนดสิ่งที่เกิดขึ้นตามแอตทริบิวต์สถานะ เมื่อร้องขอเอกสารที่มีอยู่รหัสสถานะ 404 จะได้รับซึ่งหมายความว่าเซิร์ฟเวอร์ไม่สามารถค้นหาเอกสารที่ร้องขอได้ คุณสามารถดูว่าตัวอย่างจัดการรหัสสถานะอื่นนอกเหนือจาก 200 (หมายถึงตกลง):
if (httprequest.status == 200) {target.innerhtml = httprequest.responsetext; } else {document.getElementById ("Statusmsg"). innerhtml = "สถานะ:" + httprequest.status + "" + httprequest.statustext; -ในตัวอย่างนี้ค่าของสถานะและ statustext จะปรากฏขึ้นง่ายๆ ในแอพพลิเคชั่นจริงการกู้คืนจะต้องดำเนินการอย่างมีประโยชน์และมีความหมาย (เช่นการแสดงเนื้อหาอื่นหรือผู้ใช้เตือนว่ามีปัญหาขึ้นอยู่กับว่าอันไหนเหมาะสำหรับแอปพลิเคชัน)
4. รับและตั้งส่วนหัว
การใช้วัตถุ XMLHTTPREQUEST คุณสามารถตั้งค่าส่วนหัวคำขอที่ส่งไปยังเซิร์ฟเวอร์และส่วนหัวในการตอบกลับเซิร์ฟเวอร์
4.1 เขียนทับวิธี HTTP สำหรับคำขอ
โดยปกติแล้วไม่จำเป็นต้องเพิ่มหรือแก้ไขส่วนหัวในคำขอ AJAX เบราว์เซอร์รู้ว่าจะส่งอะไรและเซิร์ฟเวอร์รู้วิธีตอบกลับ อย่างไรก็ตามมีข้อยกเว้นหลายประการ อันแรกคือส่วนหัว X-HTTP-Method-Override
มาตรฐาน HTTP มักจะใช้ในการร้องขอและส่งเอกสาร HTML บนอินเทอร์เน็ตและกำหนดวิธีการมากมาย คนส่วนใหญ่รู้เกี่ยวกับรับและโพสต์เพราะพวกเขาใช้กันอย่างแพร่หลายมากที่สุด อย่างไรก็ตามมีวิธีการอื่น ๆ (รวมถึง Put and Delete) ที่ใช้เพื่อให้ความหมายกับ URL ที่ร้องขอไปยังเซิร์ฟเวอร์และการใช้งานนี้กำลังเพิ่มขึ้น ตัวอย่างเช่นหากคุณต้องการดูบันทึกผู้ใช้คุณสามารถสร้างคำขอดังกล่าว:
httprequest.open ("get", "http: // myserver/records/freeman/adam");เฉพาะวิธี HTTP และ URL ที่ร้องขอจะแสดงที่นี่ สำหรับคำขอนี้ในการทำงานอย่างราบรื่นด้านเซิร์ฟเวอร์จะต้องสามารถเข้าใจคำขอโดยแอปพลิเคชันและแปลงเป็นชิ้นส่วนที่เหมาะสมที่จะส่งกลับไปยังเซิร์ฟเวอร์ หากคุณต้องการลบข้อมูลคุณสามารถเขียนได้เช่นนี้:
httprequest.open (" ลบ ", "http: // myserver/records/freeman/adam");กุญแจสำคัญที่นี่คือการแสดงสิ่งที่คุณต้องการให้เซิร์ฟเวอร์ทำผ่าน HTTP แทนที่จะเข้ารหัสลงใน URL ในบางวิธี
ปัญหาเกี่ยวกับการใช้วิธีการ HTTP ด้วยวิธีนี้คือเทคโนโลยีเว็บหลักจำนวนมากสนับสนุนได้รับและโพสต์เท่านั้นและไฟร์วอลล์จำนวนมากอนุญาตให้รับและโพสต์คำขอผ่าน มีวิธีการสำนวนเพื่อหลีกเลี่ยงข้อ จำกัด นี้ซึ่งก็คือการใช้ส่วนหัว X-HTTP-Method-Override เพื่อระบุวิธี HTTP ที่คุณต้องการใช้ แต่แบบฟอร์มถูกวางตลาดและส่งคำขอโพสต์ การสาธิตรหัสมีดังนี้:
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> ตัวอย่าง </title> </head> <body> <div> <button> แอปเปิ้ล </button> document.getElementByTagname ("ปุ่ม"); สำหรับ (var i = 0; i <buttons.length; i ++) {ปุ่ม [i] .onclick = handlebuttonpress; } var httprequest; ฟังก์ชั่น HandleButtonPress (e) {httprequest = ใหม่ xmlhttpRequest (); httprequest.onreadystatechange = handleresponse; httprequest.open ("รับ", e.target.innerhtml+". html"); httprequest.setRequestheader ("X-HTTP-Method-Override", "DELETE"); httprequest.send (); } function handleroror (e) {displayerRormsg ("เหตุการณ์ข้อผิดพลาด", httprequest.status+httprequest.statustext); } function handlerEsponse () {if (httprequest.readyState == 4 && httprequest.status == 200) {document.getElementById ("เป้าหมาย") innerhtml = httprequest.responsetext; }} </script> </body> </html>ในตัวอย่างนี้วิธี SetRequestheader บนวัตถุ XMLHTTPREQUEST ถูกใช้เพื่อระบุว่าต้องการดำเนินการตามคำขอในรูปแบบของวิธีการลบ HTTP โปรดทราบว่าฉันตั้งค่าส่วนหัวนี้หลังจากเรียกใช้วิธีการเปิดเท่านั้น หากคุณพยายามใช้เมธอด setRequestHeader ก่อนที่จะเปิดใช้วิธี Open วัตถุ XMLHTTPREQUEST จะเกิดข้อผิดพลาด
PS: การเขียนทับ HTTP ต้องใช้เฟรมเวิร์กเว็บแอปพลิเคชันฝั่งเซิร์ฟเวอร์เพื่อทำความเข้าใจการประชุมของ X-HTTP-Method-Override และแอปพลิเคชันฝั่งเซิร์ฟเวอร์ของคุณจะต้องตั้งค่าให้ค้นหาและเข้าใจวิธี HTTP ที่น้อยกว่า
4.2 ปิดการใช้งานการแคชเนื้อหา
ส่วนหัวที่มีประโยชน์ที่สองที่สามารถเพิ่มลงในคำขอ AJAX คือ Cache-Control ซึ่งมีประโยชน์อย่างยิ่งเมื่อเขียนและทำการดีบักสคริปต์ เนื้อหาแคชเบราว์เซอร์บางตัวที่ได้รับจากคำขอ AJAX และจะไม่ขออีกครั้งในระหว่างการท่องเว็บ สำหรับตัวอย่างก่อนหน้านี้หมายความว่าการเปลี่ยนแปลงบนแอปเปิ้ล. html, cherries.html และ bananas.html จะไม่ถูกสะท้อนทันทีในเบราว์เซอร์ รหัสต่อไปนี้แสดงวิธีการตั้งค่าส่วนหัวเพื่อหลีกเลี่ยงสิ่งนี้:
httprequest = ใหม่ xmlhttprequest (); httprequest.onreadystatechange = handleresponse; httprequest.open ("รับ", e.target.innerhtml+". html"); httprequest.setRequestheader ("แคชควบคุม", "ไม่มีแคช"); httprequest.send ();วิธีการตั้งค่าส่วนหัวนั้นเหมือนกับในตัวอย่างก่อนหน้า แต่คราวนี้ส่วนหัวคือการควบคุมแคชและค่าที่ต้องการนั้นไม่มีแคช หลังจากวางคำสั่งนี้หากเนื้อหาที่ร้องขอผ่านการเปลี่ยนแปลง AJAX จะสะท้อนให้เห็นในครั้งต่อไปที่มีการร้องขอเอกสาร
4.3 อ่านส่วนหัวการตอบกลับ
ส่วนหัว HTTP ที่ส่งโดยเซิร์ฟเวอร์เมื่อตอบสนองต่อคำขอ AJAX สามารถอ่านได้ผ่านวิธี GetResponseHeader และ GetAllResponseHeaders ในกรณีส่วนใหญ่คุณไม่จำเป็นต้องใส่ใจเกี่ยวกับสิ่งที่อยู่ในส่วนหัวเพราะเป็นส่วนหนึ่งของธุรกรรมแบบโต้ตอบระหว่างเบราว์เซอร์และเซิร์ฟเวอร์ รหัสต่อไปนี้แสดงวิธีใช้คุณสมบัตินี้:
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <meta content = "width = ความกว้างของอุปกรณ์, ผู้ใช้-scalable = na name =" viewport " /> href = "../ img/ycdoit.ico" type = "image/x-icon" rel = "ไอคอนทางลัด"/> <style> #allheaders, #cheader {เส้นขอบ: ปานกลางดำ; <button> Bananas </button> </div> <div id = "Cheader"> </div> <div id = "Allheaders"> </div> <div id = "target"> กดปุ่ม </div> <script> var buttons = document.getElementByTagname ("ปุ่ม"); สำหรับ (var i = 0; i <buttons.length; i ++) {ปุ่ม [i] .onclick = handlebuttonpress; } var httprequest; ฟังก์ชั่น HandleButtonPress (e) {httprequest = ใหม่ xmlhttpRequest (); httprequest.onreadystatechange = handleresponse; httprequest.open ("รับ", e.target.innerhtml+". html"); httprequest.setRequestheader ("แคชควบคุม", "ไม่มีแคช"); httprequest.send (); } function handlerEsponse () {if (httprequest.readyState == 2) {document.getElementById ("Allheaders"). innerhtml = httprequest.getallResponseHeaders (); document.getElementById ("Cheader"). innerhtml = httprequest.getResponseHeader ("ประเภทเนื้อหา"); } อื่นถ้า (httprequest.readystate == 4 && httprequest.status == 200) {document.getElementById ("เป้าหมาย"). innerhtml = httprequest.responsetext; }} </script> </body> </html>การเรนเดอร์มีดังนี้:
จากรูปนี้เราจะเห็นได้ว่าซอฟต์แวร์เว็บเซิร์ฟเวอร์ที่เซิร์ฟเวอร์การพัฒนากำลังทำงานอยู่คือ Intellij Idea 15.0.4 และครั้งสุดท้ายที่เอกสารแอปเปิ้ล. html ได้รับการแก้ไขคือ 27 มิถุนายน (แต่ภาพหน้าจอคือ 5 กรกฎาคม)