Ajax ย่อมาจาก "Asynchronous JavaScript และ XML" และหมายถึงเทคโนโลยีการพัฒนาเว็บสำหรับการสร้างแอปพลิเคชันเว็บเชิงโต้ตอบ เทคโนโลยี Ajax คือชุดของเทคโนโลยีทั้งหมดที่มีอยู่ในเบราว์เซอร์ในปัจจุบันผ่านทางสคริปต์ JavaScript Ajax ใช้เทคโนโลยีเหล่านี้ในรูปแบบใหม่ ฟื้นฟูการพัฒนาเว็บสไตล์ B/S แบบเก่า
ในบรรดาเทคโนโลยี Ajax เทคโนโลยีหลักคือ XMLHttpRequest ชื่อเดิมคือ XMLHTTP เปิดตัวครั้งแรกโดย Microsoft ในเบราว์เซอร์ IE5.0 ในปี 1999 เพื่อตอบสนองความต้องการของนักพัฒนา ต่อมาเทคโนโลยีนี้ได้ชื่อว่า XMLHttpRequest ตามข้อกำหนดข้างต้น นี่คือสิ่งที่ทำให้เทคโนโลยีอาแจ็กซ์มีเอกลักษณ์เฉพาะตัว กล่าวโดยสรุป XMLHttpRequest จัดเตรียมวิธีการสำหรับสคริปต์ JavaScript ที่ทำงานอยู่ในเบราว์เซอร์เพื่อสื่อสารกับเซิร์ฟเวอร์ภายในเพจ JavaScript ภายในเพจสามารถรับข้อมูลจากเซิร์ฟเวอร์หรือส่งข้อมูลไปยังเซิร์ฟเวอร์โดยไม่ต้องรีเฟรชเพจ การเกิดขึ้นของ XMLHttpRequest ทำให้เกิดความเป็นไปได้ใหม่ในการพัฒนาเว็บ และแม้กระทั่งเปลี่ยนมุมมองของผู้คนเกี่ยวกับองค์ประกอบของเว็บแอปพลิเคชันโดยสิ้นเชิง ช่วยให้เราสามารถพัฒนาเว็บไซต์ในรูปแบบใหม่โดยสิ้นเชิงและมอบประสบการณ์การโต้ตอบที่ดียิ่งขึ้นให้กับผู้ใช้
ไม่เหมือนกับการพัฒนาเว็บแบบดั้งเดิม Ajax จะไม่ดูเว็บแอปพลิเคชันในลักษณะเพจคงที่ จากมุมมองของ Ajax เว็บแอปพลิเคชันควรประกอบด้วยเพจจำนวนไม่มากนัก ซึ่งจริงๆ แล้วแต่ละหน้าเป็นแอปพลิเคชัน Ajax ที่เล็กกว่า แต่ละหน้ามีส่วนประกอบ Ajax บางส่วนที่พัฒนาโดยใช้ JavaScript ส่วนประกอบเหล่านี้ใช้ออบเจ็กต์ XMLHttpRequest เพื่อสื่อสารกับเซิร์ฟเวอร์ในลักษณะอะซิงโครนัส หลังจากได้รับข้อมูลที่ต้องการจากเซิร์ฟเวอร์ ส่วนประกอบเหล่านี้จะใช้ DOM API เพื่ออัปเดตเนื้อหาบางส่วนบนเพจ ดังนั้นจึงมีความแตกต่างหลักสามประการระหว่างแอปพลิเคชัน Ajax และแอปพลิเคชันเว็บแบบดั้งเดิม:
1. สื่อสารกับเซิร์ฟเวอร์ภายในเพจโดยไม่ต้องรีเฟรชทั้งเพจ
2. ใช้โหมดอะซิงโครนัสเพื่อสื่อสารกับเซิร์ฟเวอร์ โดยไม่รบกวนการทำงานของผู้ใช้ และมีความสามารถในการตอบสนองที่เร็วขึ้น
3. การสมัครมีเพียงไม่กี่หน้าเท่านั้น การโต้ตอบส่วนใหญ่จะเสร็จสิ้นภายในเพจ และไม่จำเป็นต้องสลับทั้งเพจ
จะเห็นได้ว่า Ajax ทำให้เว็บแอปพลิเคชันมีไดนามิกมากขึ้น นำมาซึ่งสติปัญญาที่สูงกว่า และมอบส่วนประกอบ Ajax UI ที่มีความสามารถด้านการแสดงออกที่หลากหลาย เว็บแอปพลิเคชันรูปแบบใหม่ดังกล่าวเรียกว่าแอปพลิเคชัน RIA (Rich Internet Application)
ด้านหน้าเป็นข้อมูลบางส่วนเกี่ยวกับการแนะนำ AJAX ที่ฉันพบบนอินเทอร์เน็ตเพื่อช่วยให้ผู้อ่านที่ไม่รู้จักเทคโนโลยี AJAX เข้าใจเทคโนโลยี AJAX โดยเร็วที่สุด ต่อไปฉันจะแนะนำเทคโนโลยีและเทคนิค AJAX บางอย่างที่ฉันเคยใช้ กระบวนการพัฒนาที่เกิดขึ้นจริง
สิ่งที่สำคัญที่สุดเมื่อใช้เทคโนโลยี AJAX คือการสร้างออบเจ็กต์ XMLHttpRequest มีข้อมูลมากมายเกี่ยวกับวิธีการสร้างออบเจ็กต์นี้บนอินเทอร์เน็ต หนึ่งในวิธีการที่ใช้บ่อยที่สุดของฉันคือ
ฟังก์ชั่น createXMLHttpRequest() {
var xmlhttp;
พยายาม {
xmlhttp = ActiveXObject ใหม่ ('Msxml2.XMLHTTP');
} จับ(จ) {
พยายาม {
xmlhttp = ActiveXObject ใหม่ ('Microsoft.XMLHTTP');
} จับ(จ) {
พยายาม {
xmlhttp = XMLHttpRequest ใหม่();
} จับ(จ) {
alert("ไม่สามารถสร้างวัตถุ XMLHttpRequest!");
-
-
-
ส่งคืน xmlhttp;
-
ด้านล่างนี้ฉันจะแสดงรายการตัวอย่างและบางสิ่งที่สามารถเรียนรู้ได้จากตัวอย่างเหล่านี้
โค้ดต่อไปนี้เป็นตัวอย่างของวิธีที่ฉันตรวจสอบว่ามีรายการอยู่แล้วในฐานข้อมูลหรือไม่เมื่อเพิ่มรายการเฉพาะ
<input type="text" style="width:100%" class="noEmptyInput" name="segment10" value="<%=segment10%>" maxlength="16" onblur="do_verify();">
ฟังก์ชั่น do_verify() {
varเซ็กเมนต์10 = document.mainFrm.segment10.value;
var inventoryItemId = document.mainFrm.inventoryItemId.value;
// การแจ้งเตือน (ส่วนที่ 10)
xmlHttp = createXMLHttpRequest();
var url = "/servlet/com.sino.ies.inv.maintenance.servlet.ItemMaintainServlet?forward=doVerify&segment10=" + Segment10 + "&inventoryItemId=" + inventoryItemId;
xmlHttp.onreadystatechange = handleReadyStateChange;
xmlHttp.open("post", url, true); // มีสองวิธีในการส่งข้อมูล: GET และ POST แต่เมื่อวิธีการนั้นเป็น POST จะต้องเขียนประโยคต่อไปนี้
xmlHttp.setRequestHeader('ประเภทเนื้อหา', 'application/x-www-form-urlencoded');
xmlHttp.send(null);
-
ฟังก์ชั่น handleReadyStateChange() {
ถ้า (xmlHttp.readyState == 4) {
ถ้า (xmlHttp.status == 200) {
ถ้า (xmlHttp.responseText == 'Y') {
document.mainFrm.isExist.value = 'Y';
document.getElementById("ธง").style.display = "บล็อก"
document.mainFrm.segment10.focus();
} อื่น {
document.mainFrm.isExist.value = 'N';
document.getElementById("ธง").style.display = "ไม่มี"
-
} อื่น {
การแจ้งเตือน (xmlHttp.status);
-
-
-
รหัสพื้นหลังคือ:
boolean Success = itemDAO.doVerifyItem(); //doVerifyItem เป็นวิธีการหลักในการตรวจสอบว่ามีรายการที่ระบุอยู่ในฐานข้อมูลหรือไม่ หากมีรายการอยู่แล้ว วิธีการนี้จะส่งคืน TRUE
PrintWriter ออก = res.getWriter();
ถ้า (สำเร็จ) {
out.print("Y");
-
ออก.ล้าง();
ออก.ปิด();
-