AJAX เป็นตัวย่อของ JavaScript และ XML แบบอะซิงโครนัสและเป็นกลไกในการปรับปรุงส่วนหนึ่งของหน้า มันให้พลังแก่คุณในการอัปเดตส่วนหนึ่งของหน้าหลังจากคุณได้รับข้อมูลจากเซิร์ฟเวอร์ดังนั้นจึงหลีกเลี่ยงการรีเฟรชทั้งหน้า นอกจากนี้การตระหนักถึงการอัปเดตหน้าเว็บในวิธีนี้ไม่เพียง แต่สามารถสร้างประสบการณ์ผู้ใช้ที่ราบรื่นได้อย่างมีประสิทธิภาพ แต่ยังลดการโหลดบนเซิร์ฟเวอร์
นี่คือการวิเคราะห์คำขอ AJAX พื้นฐาน:
var xhr = ใหม่ xmlhttprequest (); xhr.open ('get', 'send-ajax-data.php'); xhr.send (null);ที่นี่เราสร้างอินสแตนซ์ของคลาสที่สามารถส่งคำขอ HTTP ไปยังเซิร์ฟเวอร์ จากนั้นวิธีการเปิดของมันจะถูกเรียกโดยที่พารามิเตอร์แรกคือวิธีการร้องขอ HTTP และพารามิเตอร์ที่สองคือ URL ของหน้าคำขอ ในที่สุดเราเรียกวิธีการส่งด้วยพารามิเตอร์ null หากคุณใช้วิธีการตามคำขอโพสต์ (เราใช้มาที่นี่) พารามิเตอร์วิธีการส่งควรมีข้อมูลใด ๆ ที่คุณต้องการส่ง
นี่คือวิธีที่เราจัดการกับการตอบสนองของเซิร์ฟเวอร์:
xhr.onreadyStateChange = function () {var done = 4; // ReadyState 4 หมายความว่าคำขอถูกส่งไปยังเซิร์ฟเวอร์ var ok = 200; // สถานะ 200 หมายความว่าเซิร์ฟเวอร์จะส่งคืนสำเร็จถ้า (xhr.readystate === เสร็จแล้ว) {ถ้า (xhr.status === ตกลง) {console.log (xhr.responsetext); // นี่คือข้อความที่ส่งคืน} else {console.log ("ข้อผิดพลาด:"+ xhr.status); // เกิดข้อผิดพลาดในคำขอนี้}}}OnReadyStateChange เป็นแบบอะซิงโครนัสนั่นหมายความว่ามันจะถูกเรียกได้ตลอดเวลา ฟังก์ชั่นประเภทนี้เรียกว่าฟังก์ชั่นการโทรกลับ - เมื่อการประมวลผลเสร็จสมบูรณ์แล้วก็เรียกว่า ในกรณีนี้การประมวลผลนี้เกิดขึ้นบนเซิร์ฟเวอร์
ตัวอย่าง
วิธีการ Ajax ที่สะดวกสบายก็คือเหตุผลที่หลายคนพึ่งพา jQuery แต่ในความเป็นจริง Ajax API ของ JavaScript พื้นเมืองนั้นทรงพลังเช่นกันและการใช้งานขั้นพื้นฐานนั้นไม่แตกต่างกันมากในแต่ละเบราว์เซอร์ ดังนั้นคุณสามารถห่อหุ้มวัตถุ AJAX ได้อย่างสมบูรณ์ ต่อไปนี้เป็นวัตถุ AJAX ที่ห่อหุ้ม:
// AJAX Method // Lazy Load สร้างฟังก์ชั่นวัตถุ XHR createxhr () {if ('' xmlhttprequest 'ในหน้าต่าง) {createxhr = function () {ส่งคืน xmlhttpRequest () ใหม่ (); - } else if ('activexObject' ในหน้าต่าง) {createxhr = function () {ส่งคืนใหม่ activexObject ("msxml2.xmlhttp"); - } else {createxhr = function () {โยนข้อผิดพลาดใหม่ ("Ajax ไม่ได้รับการสนับสนุนโดยเบราว์เซอร์นี้"); - } return createxhr (); } // ajax ดำเนินการคำขอฟังก์ชัน (ajaxdata) {var xhr = createxhr (); ajaxdata.before && ajaxdata.before (); // จัดการคำขอแบบอะซิงโครนัสผ่านเหตุการณ์ xhr.onreadyStateChange = function () {ถ้า (xhr.readystate == 4) {ถ้า (xhr.status == 200) {ถ้า (ajaxdata.datatype == 'json') json1 = evaln ('(' + jsonstr + ')'), json2 = (ฟังก์ชั่นใหม่ ('return' + jsonstr)) (); ajaxdata.callback (JSON2); // ajaxdata.callback (json.parse (xhr.responsetext)); // วิธีการดั้งเดิมไม่รองรับใน IE6/7} else ajaxdata.callback (xhr.responsetext); } else {ajaxdata.error && ajaxdata.error (xhr.responsetext); - // ตั้งค่าพารามิเตอร์คำขอ xhr.open (ajaxdata.type, ajaxdata.url); if (ajaxdata.nocache == true) xhr.setRequestheader ('if-modified-since', '0'); if (ajaxdata.data) {xhr.setRequestheader ('content-type', 'application/x-www-form-urlencoded'); xhr.send (ajaxdata.data); } อื่น {? - XHR.SetRequestheader ('X-Requested-With', 'XMLHTTTPREQUEST'); XHR.Send (NULL); } return xhr;} post function (ajaxdata) {ajaxdata.type = 'post'; var _result = คำขอ (ajaxdata); return _result;} ฟังก์ชั่นรับ (ajaxdata) {ajaxdata.type = 'get'; ajaxdata.data = null; var _result = คำขอ (ajaxdata); return _result;}นี่คือตัวอย่างของการใช้งาน:
index.html
<! doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <title> การใช้งาน JavaScript ดั้งเดิม ajax </title> <link rel = "stylesheet" type = "text/css" media = "ทั้งหมด" href = " Font-Family: 'Lucida Grande', 'Microsoft Yahei'} #Content .BTN_CTR {แสดง: บล็อก; ความกว้าง: 120px; ความสูง: 30px; มาร์จิ้น: 0 อัตโนมัติ 20px; ความเป็นมา: #53A7BB; สี: #FFF; Font-Weight: ตัวหนา; ขนาดตัวอักษร: 14px; ระดับความสูง: 30px; การตกแต่งข้อความ: ไม่มี; แนวชายแดน: 4px; } #test {width: 280px; ความสูง: 130px; มาร์จิ้น: 0 อัตโนมัติ; ช่องว่าง: 15px; ความเป็นมา: #FFF; แนวชายแดน: 4px; TEXT-ALIGN: ซ้าย; } </style> </head> <body> <div id = "header"> <div id = "ส่วนหัวส่วนหัว"> <div id = "header-inside"> <p> <a href = "http://kayosite.com/css3 href = "http://kayosite.com" target = "_ blank"> บล็อกของฉัน </a> </p> <p> การสาธิตโดย kayo ©ลิขสิทธิ์ 2011-2013 </p> </div> <h1> แอนิเมชั่น css3 </h1> onclick = "get ({url: './ajax.html', การโทรกลับ: ฟังก์ชั่น (ออก) {document.getElementById ('ทดสอบ'). innerhtml = out;}})"> ajax รับเนื้อหา </a> ที่นี่ </script> </body> </html> ajax.html<! doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <title> ajax </title> </head> <body> <p> ได้รับข้อความนี้สำเร็จแล้ว </p> </body> </html>
สำหรับเอฟเฟกต์เฉพาะคุณสามารถเรียกดูการสาธิตเต็มรูปแบบ