AJAX: วิธีการขอข้อมูลโดยไม่ต้องรีเฟรชทั้งหน้า
แกนกลางทางเทคนิคของ AJAX คือวัตถุ XMLHTTPREQUEST;
กระบวนการร้องขอ AJAX: สร้างวัตถุ XMLHTTPREQUEST เชื่อมต่อกับเซิร์ฟเวอร์ส่งคำขอและรับข้อมูลการตอบกลับ
/*** รับ Ajax Object*/ฟังก์ชั่น getajaxhttp () {var xmlhttp; ลอง {// Chrome, Firefox, Opera 8.0+, Safari Xmlhttp = ใหม่ xmlhttprequest (); } catch (e) {// internet explorer ลอง {// ie5, 6 xmlhttp = new ActiveXObject ("msxml2.xmlhttp"); } catch (e) {ลอง {// ie7 หรือสูงกว่า xmlhttp = new ActiveXObject ("microsoft.xmlhttp"); } catch (e) {alert ("เบราว์เซอร์ของคุณไม่รองรับ ajax!"); กลับเท็จ; }}} ส่งคืน xmlhttp;}/** * ส่งคำขอ ajax * url-url * methodTtype (post/get) * con (true (asynchronous) | false (synchronous)) * พารามิเตอร์ (พารามิเตอร์) อื่น ๆ คือวัตถุที่จะประมวลผล) * OBJ ต้องไปที่วัตถุที่จะประมวลผลในวิธีการเรียกกลับ */ฟังก์ชัน ajaxrequest (url, methodType, con, พารามิเตอร์, functionName, obj) {var xmlhttp = getajaxhttp (); xmlhttp.onreadyStateChange = function () {// readyState ค่าคำอธิบาย // 0, การเริ่มต้น, วัตถุ XHR ถูกสร้างขึ้นเปิดไม่ได้ดำเนินการยังไม่ถูกดำเนินการ // 1, การโหลด, วิธีการเปิดถูกเรียกใช้ แต่คำขอยังไม่ได้รับ / / / / URL Found // 500: เซิร์ฟเวอร์สร้างข้อผิดพลาดภายในถ้า (xmlhttp.readystate == 4 && xhr.status == 200) {// การตอบกลับ http ได้รับอย่างเต็มที่ก่อนเรียกใช้ฟังก์ชัน (xmlhttp, obj); - xmlhttp.open (MethodTtype, URL, Con); xmlhttp.send (พารามิเตอร์);} // นี่คือฟังก์ชั่นพารามิเตอร์ createxml () {var xml = "<ผู้ใช้> <ผู้ใช้> asdfasdfasdf <// userId> </user>"; // "//" json = {id: 0, ชื่อผู้ใช้: "คนดี"}; return json;} function c () {Alert ("");}//ทดสอบ
ajaxrequest ("http://www.baidu.com", "โพสต์", จริง, createxml (), c, เอกสาร);ลองดูตัวอย่างอื่น
ajax ({url: "./testxhr.aspx", // ประเภทที่อยู่คำขอ: "โพสต์", // ข้อมูลวิธีการร้องขอ: {ชื่อ: "super", อายุ: 20}, // คำขอพารามิเตอร์: "json", ความสำเร็จ: ฟังก์ชั่น (การตอบสนอง, xml) ฟังก์ชั่น ajax (ตัวเลือก) {ตัวเลือก = ตัวเลือก || - Options.type = (opotions.type || "รับ"). touppercase (); ตัวเลือก DATATYPE = OPTIONS.DATATYPE || "JSON"; var params = formatParams (opotions.data); // สร้าง - non -ie6 - ขั้นตอนที่ 1 ถ้า (window.xmlhttprequest) {var xhr = ใหม่ xmlhttprequest (); } else {// ie6 และด้านล่างเบราว์เซอร์ var xhr = new ActiveXObject ('microsoft.xmlhttp'); } // รับ - ขั้นตอนที่ 3 xhr.onreadyStateChange = function () {ถ้า (xhr.readyState == 4) {สถานะ var = xhr.status; if (status> = 200 && สถานะ <300) {opotions.success && opotions.success (xhr.responsetext, xhr.responsexml); } else {options.fail && options.fail (สถานะ); }}} // Connect and Send - ขั้นตอนที่ 2 ถ้า (ตัวเลือก type == "get") {xhr.open ("รับ", ตัวเลือก url + "?" + params, true); XHR.Send (NULL); } อื่นถ้า (ตัวเลือก type == "โพสต์") {xhr.open ("โพสต์", ตัวเลือก, url, true); // ตั้งค่าประเภทเนื้อหาเมื่อส่งแบบฟอร์ม XHR.SetRequestheader ("เนื้อหาประเภท", "แอปพลิเคชัน/x-www-form-urlencoded"); xhr.send (params); }} // รูปแบบพารามิเตอร์ฟังก์ชั่น formatParams (ข้อมูล) {var arr = []; สำหรับ (ชื่อ var ในข้อมูล) {arr.push (encodeuricomponent (ชื่อ) + "=" + encodeuricomponent (data [name])); } arr.push (("v =" + math.random ()). แทนที่ (".", ")); return arr.join (" & ");}มาดูหลักการกันเถอะ
1. สร้าง
1.1. IE7 และด้านบนรองรับวัตถุ XHR ดั้งเดิมดังนั้นคุณสามารถใช้โดยตรง: var oajax = ใหม่ xmlhttprequest ();
1.2. ใน IE6 และเวอร์ชันก่อนหน้าวัตถุ XHR จะถูกนำไปใช้ผ่านวัตถุ ActiveX ในไลบรารี MSXML หนังสือบางเล่มได้ปรับปรุงวัตถุดังกล่าวสามรุ่นใน IE คือ MSXML2.xmlhttp, MSXML2.xmlhttp.3.0 และ Msxml2.xmlhttp.6.0; ฉันรู้สึกว่ามันลำบากเกินไปดังนั้นฉันสามารถใช้คำสั่งต่อไปนี้โดยตรงเพื่อสร้าง: var oajax = new ActiveXObject ('microsoft.xmlhttp');
2. เชื่อมต่อและส่ง
2.1. พารามิเตอร์สามตัวของฟังก์ชั่น Open (): วิธีการขอที่อยู่คำขอและว่าจะร้องขอแบบอะซิงโครนัส (มีคำขอซิงโครนัสน้อยมากและยังไม่ได้ใช้);
2.2. วิธีการขอ GET คือการส่งข้อมูลไปยังเซิร์ฟเวอร์ผ่านพารามิเตอร์ URL ในขณะที่โพสต์ส่งข้อมูลไปยังเซิร์ฟเวอร์เป็นพารามิเตอร์การส่ง
2.3. ในคำขอโพสต์ก่อนที่จะส่งข้อมูลประเภทเนื้อหาของแบบฟอร์มที่ส่งจะต้องตั้งค่า;
2.4. พารามิเตอร์ที่ส่งไปยังเซิร์ฟเวอร์จะต้องเข้ารหัสโดยวิธีการ ENCODEURICOMPONENT () ในความเป็นจริงในรูปแบบของรายการพารามิเตอร์ "key = value" จำเป็นต้องเข้ารหัสทั้งคีย์และค่าเนื่องจากพวกเขาจะมีอักขระพิเศษ ทุกครั้งที่คุณร้องขอสตริงของ "v = xx" จะถูกสะกดลงในรายการพารามิเตอร์ นี่คือการปฏิเสธแคชและทุกครั้งที่คุณขอโดยตรงไปยังเซิร์ฟเวอร์
ENCODEURI (): ใช้สำหรับการเข้ารหัส URI ทั้งหมดและจะไม่เข้ารหัสอักขระพิเศษที่เป็นของ URI เช่น colons, forward slashes, เครื่องหมายคำถามและสัญญาณปอนด์; ฟังก์ชั่นถอดรหัสที่สอดคล้องกัน decodeuri ();
ENCODEURICOMPONENT (): ใช้เพื่อเข้ารหัสส่วนหนึ่งของ URI และเข้ารหัสอักขระที่ไม่ได้มาตรฐานใด ๆ ที่พบ ฟังก์ชั่นการถอดรหัสที่สอดคล้องกันของฟังก์ชัน decodeuricomponent ();
3. รับ
3.1. หลังจากได้รับการตอบกลับข้อมูลการตอบกลับจะถูกกรอกด้วยวัตถุ XHR โดยอัตโนมัติ คุณลักษณะที่เกี่ยวข้องมีดังนี้
ResponseText: เนื้อหาของร่างกายที่ส่งคืนโดยการตอบสนองของประเภทสตริง;
Responsexml: หากประเภทเนื้อหาของการตอบสนองคือ "text/xml" หรือ "application/xml" ข้อมูล XML ที่เกี่ยวข้องจะถูกเก็บไว้ในคุณสมบัตินี้ซึ่งเป็นประเภทเอกสารที่สอดคล้องกับ XML;
สถานะ: รหัสสถานะการตอบสนอง HTTP;
Statustext: คำอธิบายสถานะ HTTP;
3.2. คุณสมบัติ ReadyState ของวัตถุ XHR แสดงถึงขั้นตอนการใช้งานปัจจุบันของกระบวนการร้องขอ/ตอบสนอง มูลค่าของคุณสมบัตินี้มีดังนี้
0-uninitialized วิธีการเปิด () ยังไม่ได้รับการเรียก;
วิธีการ 1-start, Open () เรียกว่าวิธีการส่ง () ไม่ได้เรียกว่า;
2-send, วิธีการส่ง () ถูกเรียกและไม่ได้รับการตอบกลับ;
ได้รับข้อมูลการตอบกลับ 3 ส่วนเป็นส่วนหนึ่งของข้อมูลการตอบกลับ
ได้รับข้อมูลการตอบกลับทั้งหมด 4 รายการแล้ว
ตราบใดที่ค่าของการเปลี่ยนแปลงของ ReadeState เหตุการณ์ ReadyStateChange จะถูกเรียก (ในความเป็นจริงสำหรับความราบรื่นแบบตรรกะคุณสามารถใส่ ReadyStateChange หลังจากส่งเพราะเซิร์ฟเวอร์ได้รับการร้องขอในระหว่างการส่งและการสื่อสารเครือข่ายจะดำเนินการซึ่งต้องใช้เวลามากขึ้น
3.3. ในเหตุการณ์ ReadyStateChange ก่อนอื่นตรวจสอบว่าได้รับการตอบกลับหรือไม่จากนั้นพิจารณาว่าเซิร์ฟเวอร์จัดการคำขอได้สำเร็จหรือไม่ XHR.STATUS เป็นรหัสสถานะ รหัสสถานะเริ่มต้นด้วย 2 และทั้งหมดประสบความสำเร็จ 304 หมายถึงการได้รับจากแคช รหัสข้างต้นจะเพิ่มหมายเลขสุ่มทุกครั้งที่มีการร้องขอคำขอดังนั้นค่าจากแคชไม่จำเป็นต้องตัดสิน
4. คำขอ AJAX ไม่สามารถข้ามโดเมนได้!