ไม่ต้องสงสัยเลยว่า AJAX เป็นหนึ่งในเทคโนโลยีการพัฒนาเว็บไซต์ที่ร้อนแรงที่สุดในปี 2548 แน่นอนว่าเครดิตนี้ไม่สามารถแยกออกจาก Google ได้ ฉันเป็นเพียงนักพัฒนาธรรมดาๆ และฉันไม่ได้ใช้ AJAX มากนัก ฉันจะแบ่งปันประสบการณ์ในการใช้งานมัน (บทความนี้สันนิษฐานว่าผู้ใช้มีความสามารถในการพัฒนาเว็บขั้นพื้นฐานอยู่แล้ว เช่น JavaScript, HTML และ CSS)
[บทนำสู่ AJAX]
Ajax เป็นวิธีการพัฒนาเว็บแอปพลิเคชันที่ใช้สคริปต์ฝั่งไคลเอ็นต์เพื่อแลกเปลี่ยนข้อมูลกับเว็บเซิร์ฟเวอร์ หน้าเว็บสามารถอัปเดตแบบไดนามิกได้โดยไม่รบกวนกระบวนการโต้ตอบและแก้ไขใหม่อีกครั้ง การใช้ Ajax ผู้ใช้สามารถสร้างอินเทอร์เฟซผู้ใช้เว็บโดยตรง พร้อมใช้งานสูง สมบูรณ์ยิ่งขึ้น และไดนามิกมากขึ้น ซึ่งใกล้เคียงกับแอปพลิเคชันเดสก์ท็อปดั้งเดิม
Asynchronous JavaScript และ XML (AJAX) ไม่ใช่เทคโนโลยีใหม่ แต่ใช้เทคโนโลยีที่มีอยู่หลายอย่าง รวมถึง Cascading Style Sheets (CSS), JavaScript, XHTML, XML และ Extensible Style Language Transformations (XSLT) เพื่อพัฒนาซอฟต์แวร์แอปพลิเคชันเว็บรูปลักษณ์และการดำเนินการที่คล้ายกับ ซอฟต์แวร์เดสก์ท็อป
[หลักการดำเนินการ AJAX]
การโต้ตอบ Ajax เริ่มต้นด้วยอ็อบเจ็กต์ JavaScript ที่เรียกว่า XMLHttpRequest ตามชื่อที่แนะนำ อนุญาตให้สคริปต์ฝั่งไคลเอ็นต์ดำเนินการร้องขอ HTTP และจะแยกวิเคราะห์การตอบสนองของเซิร์ฟเวอร์ในรูปแบบ XML ขั้นตอนแรกในการประมวลผล Ajax คือการสร้างอินสแตนซ์ XMLHttpRequest ใช้วิธีการ HTTP (GET หรือ POST) เพื่อจัดการคำขอและตั้งค่า URL เป้าหมายเป็นวัตถุ XMLHttpRequest
เมื่อคุณส่งคำขอ HTTP คุณไม่ต้องการให้เบราว์เซอร์หยุดทำงานและรอการตอบกลับจากเซิร์ฟเวอร์ แต่คุณต้องการตอบสนองต่อการโต้ตอบอินเทอร์เฟซของผู้ใช้ต่อไปผ่านทางเพจและประมวลผลการตอบสนองของเซิร์ฟเวอร์เมื่อมาถึงจริง เพื่อให้บรรลุผลนี้ คุณสามารถลงทะเบียนฟังก์ชันการเรียกกลับด้วย XMLHttpRequest และส่งคำขอ XMLHttpRequest แบบอะซิงโครนัส การควบคุมจะถูกส่งกลับไปยังเบราว์เซอร์ทันที และเมื่อการตอบสนองของเซิร์ฟเวอร์มาถึง ฟังก์ชันการโทรกลับจะถูกเรียกใช้
[การประยุกต์ใช้งานจริงของ AJAX]
1. การเริ่มต้น Ajax
Ajax จริง ๆ แล้วเรียกอ็อบเจ็กต์ XMLHttpRequest ดังนั้นก่อนอื่นเราจะต้องเรียกอ็อบเจ็กต์นี้ เราสร้างฟังก์ชันเพื่อเริ่มต้น Ajax:
/**
* เริ่มต้นวัตถุ xmlhttp
-
ฟังก์ชั่นInitAjax()
-
var ajax=false;
พยายาม {
ajax = ใหม่ ActiveXObject("Msxml2.XMLHTTP");
} จับ (e) {
พยายาม {
อาแจ็กซ์ = ใหม่ ActiveXObject("Microsoft.XMLHTTP");
} จับ (E) {
อาแจ็กซ์ = เท็จ;
-
-
ถ้า (!ajax