AJAX และวิธีการทำงาน
AJAX เป็นเทคโนโลยีที่แลกเปลี่ยนข้อมูลกับเซิร์ฟเวอร์โดยไม่ต้องรีเฟรชหน้าเว็บ Google ใช้ครั้งแรกใน Google Maps และได้รับความนิยมอย่างรวดเร็ว
Ajax ไม่สามารถข้ามโดเมนได้ หากคุณต้องการข้ามโดเมนคุณสามารถใช้ document.domain = 'a.com'; หรือใช้พร็อกซีเซิร์ฟเวอร์เพื่อพร็อกซี XMLHTTTPREQUEST ไฟล์
Ajax ขึ้นอยู่กับมาตรฐานอินเทอร์เน็ตที่มีอยู่และใช้ร่วมกัน:
วัตถุ XMLHTTPREQUEST (แลกเปลี่ยนข้อมูลแบบอะซิงโครนัสกับเซิร์ฟเวอร์)
JavaScript/DOM (การแสดงข้อมูล/การโต้ตอบ)
CSS (กำหนดรูปแบบสำหรับข้อมูล)
XML (เป็นรูปแบบสำหรับการแปลงข้อมูล)
สร้างวัตถุ XMLHTTPREQUEST
เบราว์เซอร์ที่ทันสมัยทั้งหมด (IE7+, Firefox, Chrome, Safari และ Opera) มีวัตถุ XMLHTTTPRequest ในตัว
สร้างวัตถุ AJAX:
// IE6 หรือสูงกว่า
var oajax = ใหม่ xmlhttprequest ();
// ie6
var oajax = new ActiveXObject ("microsoft.xmlhttp"))
เชื่อมต่อกับเซิร์ฟเวอร์
oajax.open (วิธีการ url, มันเป็นแบบอะซิงโครนัส)
เราทุกคนรู้ว่า AJAX คือ "Asynchronous JavaScript และ XML" (Asynchronous JavaScript และ XML) หมายถึงเทคโนโลยีการพัฒนาเว็บที่สร้างแอปพลิเคชันเว็บแบบโต้ตอบ ดังนั้น Ajax จึงเกิดมาเพื่อทำงานในโหมดอะซิงโครนัส (แบบอะซิงโครนัสเป็นจริง
ซิงโครนัสและอะซิงโครนัส
การซิงโครไนซ์หมายถึงวิธีการสื่อสารที่ผู้ส่งส่งข้อมูลและรอให้ผู้รับส่งการตอบกลับก่อนที่จะส่งแพ็คเก็ตข้อมูลถัดไป
Asynchronous หมายถึงวิธีการสื่อสารที่ผู้ส่งส่งข้อมูลโดยไม่ต้องรอให้ผู้รับส่งการตอบกลับจากนั้นส่งแพ็คเก็ตข้อมูลถัดไป
(เพื่อให้ง่าย: การซิงโครไนซ์สามารถทำได้เพียงหนึ่งสิ่งทีละตัวในขณะที่อะซิงโครนัสสามารถทำหลายสิ่งหลายอย่างในเวลาเดียวกัน)
ส่งคำขอส่ง ()
การคัดลอกรหัสมีดังนี้:
<script type = "text/javascript">
ฟังก์ชั่น getDoc () {
var xmlhttp;
if (window.xmlhttprequest) {
xmlhttp = ใหม่ xmlhttprequest ();
-
อื่น{
xmlhttp = new ActiveXObject ("Microsoft.xmlhttp"); // สำหรับ IE6
-
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readystate == 4 && xmlhttp.status == 200) {
document.getElementById ("myid"). innerhtml = xmlhttp.responsetext;
-
-
xmlhttp.open ("get", index.php, true);
xmlhttp.send ();
-
</script>
</head>
<body>
<button type = "button" onclick = "getDoc ()"> คำขอข้อมูล </ button>
</body>
รับหรือโพสต์?
เมื่อเทียบกับโพสต์ Get นั้นง่ายขึ้นและเร็วขึ้นและมีให้ในกรณีส่วนใหญ่
อย่างไรก็ตามใช้คำขอโพสต์ในกรณีต่อไปนี้:
ไม่สามารถใช้ไฟล์แคช (อัปเดตไฟล์หรือฐานข้อมูลบนเซิร์ฟเวอร์)
ส่งข้อมูลจำนวนมากไปยังเซิร์ฟเวอร์ (โพสต์ไม่มีขีด จำกัด ข้อมูล)
โพสต์มีความเสถียรและเชื่อถือได้มากกว่ารับเมื่อส่งอินพุตผู้ใช้ที่มีอักขระที่ไม่รู้จัก
รับข้อมูลคืนสินค้า
oajax.onreadyStateChange = function () {// ตัวจัดการเหตุการณ์ที่จะถูกเรียกเมื่อสถานะคำขอเปลี่ยนแปลง
การแจ้งเตือน (oajax.readystate);
-
เมื่อใดก็ตามที่ค่าของคุณสมบัติ ReadyState เปลี่ยนไปเหตุการณ์ ReadyStateChange จะถูกเรียกใช้ เหตุการณ์นี้สามารถใช้ในการตรวจจับค่าของ ReadeState หลังจากการเปลี่ยนแปลงแต่ละสถานะ โดยปกติแล้วเรามีความสนใจเฉพาะในขั้นตอนที่ค่า ReadyState คือ 4 เนื่องจากข้อมูลทั้งหมดพร้อมในเวลานี้อย่างไรก็ตามต้องระบุตัวจัดการเหตุการณ์ OnReadyStateChange ก่อนที่จะโทรเปิด () เพื่อให้แน่ใจว่าเข้ากันได้ข้ามเบราว์เซอร์ ลองมาดูตัวอย่าง:
การคัดลอกรหัสมีดังนี้:
var xhr = createxhr ();
xhr.onreadyStateChange = function () {
if (xhr.readystate == 4) {
if ((xhr.status> = 200 && xhr.status <300) || xhr.status == 304) {
การแจ้งเตือน (xhr.statustext);
} อื่น {
การแจ้งเตือน ("คำขอไม่สำเร็จ:" + xhr.status);
-
-
-
xhr.open ("รับ", "example.txt", จริง);
XHR.Send (NULL);
วัตถุ XHR
เมื่อวัตถุ XHR ส่งคำขอ HTTP ไปยังเซิร์ฟเวอร์มันจะต้องผ่านหลายรัฐจนกว่าจะมีการประมวลผลคำขอแล้วได้รับการตอบกลับ ReadyState เป็นทรัพย์สินของรัฐของคำขอ XHR ซึ่งมีค่าคุณสมบัติ 5 ประการ:
0 (ไม่ได้กำหนด) วิธีการเปิด () ยังไม่ได้รับการเรียก
1 (โหลด) วิธีการส่ง () ถูกเรียกและคำขอกำลังส่ง
2 (การโหลดเสร็จสมบูรณ์) วิธีการส่ง () เสร็จสมบูรณ์และได้รับเนื้อหาการตอบกลับทั้งหมด
3 (การวิเคราะห์) เนื้อหาการตอบสนองกำลังถูกแยกวิเคราะห์
4 (เสร็จสมบูรณ์) การแยกวิเคราะห์เนื้อหาตอบกลับเสร็จสมบูรณ์และสามารถใช้งานได้โดยลูกค้า
สถานะ
แอตทริบิวต์สถานะแสดงถึงรหัสสถานะการตอบกลับที่ส่งคืนจากเซิร์ฟเวอร์ ตัวอย่างเช่น: 200 หมายถึงความสำเร็จ 404 หมายถึงไม่พบ
ส่วนหัว 1 คำ: ข้อความ รหัสสถานะประเภทนี้หมายความว่าคำขอได้รับการยอมรับและจำเป็นต้องดำเนินการ
หัว 2 คำ: ความสำเร็จ รหัสสถานะประเภทนี้หมายความว่าได้รับคำขอได้รับการยอมรับและได้รับการยอมรับจากเซิร์ฟเวอร์เรียบร้อยแล้ว
ส่วนหัว 3 คำ: การเปลี่ยนเส้นทาง รหัสสถานะประเภทนี้หมายความว่าลูกค้าต้องการการดำเนินการเพิ่มเติมเพื่อดำเนินการตามคำขอให้เสร็จสมบูรณ์
ส่วนหัว 4 ตัวอักษร: ข้อผิดพลาดของไคลเอ็นต์ รหัสสถานะประเภทนี้หมายความว่าลูกค้าอาจมีข้อผิดพลาดซึ่งเป็นอุปสรรคต่อการประมวลผลของเซิร์ฟเวอร์
ส่วนหัว 5 คำ: ข้อผิดพลาดของเซิร์ฟเวอร์ รหัสสถานะประเภทนี้แสดงถึงข้อผิดพลาดหรือสถานะที่ผิดปกติเกิดขึ้นในระหว่างกระบวนการประมวลผลคำขอของเซิร์ฟเวอร์
นอกจากนี้ยังแนบ: คำอธิบายโดยละเอียดของรหัสสถานะ HTTP
รูปแบบ
Statustext เป็นข้อมูลข้อความที่ส่งคืนในการตอบกลับและสามารถใช้ได้เฉพาะในกรณีที่ค่า ReadyState คือ 3 หรือ 4 เมื่อ ReadyState เป็นค่าอื่นมุมมองเข้าถึงคุณสมบัติ Statustext จะทำการยกเว้น
วิธี XHR
| วิธี | อธิบาย |
|---|---|
| ยกเลิก () | ทำให้การร้องขอการดำเนินการในปัจจุบันถูกยกเลิก |
| GetAllResponseHeaders () | ส่งคืนอักขระเดียว | สตริงที่มีชื่อและค่าของส่วนหัวการตอบกลับทั้งหมด |
| getResponseHeader (ชื่อ) | ส่งคืนชื่อและค่าที่ระบุในส่วนหัวการตอบกลับ |
| เปิด (วิธีการ, url, async, ชื่อผู้ใช้, PWD) | ตั้งค่าวิธีการ HTTP (รับหรือโพสต์) ฯลฯ |
| ส่ง (เนื้อหา) | ออกคำขอด้วยเนื้อหาหัวเรื่องที่ระบุ |
| SetRequestheader (ชื่อ, ค่า) | ตั้งส่วนหัวคำขอด้วยชื่อและค่าที่ระบุ |
การคัดลอกรหัสมีดังนี้:
<script type = "text/javascript">
var oajax = oajax ();
การแจ้งเตือน (oajax.readystate); // "0" ปรากฏขึ้น "
oajax.open ("get", "index.html", true);
การแจ้งเตือน (oajax.readystate); // "1" ปรากฏขึ้น
OAJAX.SEND (NULL);
การแจ้งเตือน (oajax.readystate); // 4 ปรากฏขึ้นภายใต้ IE ในขณะที่ Firefox คือ 2
// คุณสามารถฟังกิจกรรม ReadyStateChange
oajax = xhr ();
oajax.onreadyStateChange = function () {
การแจ้งเตือน (oajax.readystate); // คำสั่งภายใต้ firefox คือ 1, 2, 3, 4 แต่ในท้ายที่สุดจะมีอีก 1
// ภายใต้ IE คือ 1, 1, 3, 4
-
oajax.open ("รับ", "index.txt", จริง);
OAJAX.SEND (NULL);
</script>