Ajax ไม่ใช่ภาษาการเขียนโปรแกรมใหม่ แต่เป็นวิธีการใหม่ที่ใช้มาตรฐานที่มีอยู่ AJAX สามารถแลกเปลี่ยนข้อมูลกับเซิร์ฟเวอร์ได้โดยไม่ต้องโหลดหน้าทั้งหมด วิธีการโต้ตอบแบบอะซิงโครนัสนี้ช่วยให้ผู้ใช้ได้รับข้อมูลใหม่โดยไม่ต้องรีเฟรชหน้าหลังจากคลิก
วัตถุ xmlhttprequest
แกนกลางของ AJAX คือวัตถุ XMLHTTPREQUEST (XHR) XHR จัดเตรียมอินเทอร์เฟซสำหรับการส่งคำขอไปยังเซิร์ฟเวอร์และแก้ไขการตอบสนองของเซิร์ฟเวอร์ ความสามารถในการรับข้อมูลใหม่จากเซิร์ฟเวอร์ในลักษณะอะซิงโครนัส
สร้างวัตถุในเบราว์เซอร์ (รองรับ IE7 และสูงกว่าเท่านั้น):
var xhr = ใหม่ xmlhttprequest ();
วิธีใช้ XHR
สิ่งแรกที่แนะนำคือวิธีการเปิด () ได้รับ 3 พารามิเตอร์:
•ประเภทของคำขอที่จะส่ง (โพสต์รับ ฯลฯ )
• URL ที่ร้องขอ
•ค่า bolean ระบุว่าคำขอถูกส่งแบบอะซิงโครนัส
การโทรเปิด () ตัวอย่าง:
xhr.open ("รับ", "index.jsp", เท็จ);
รับคำขอสำหรับ index.jsp URL สัมพันธ์กับหน้าปัจจุบันที่มีการดำเนินการรหัส การเรียกวิธีการเปิด () ไม่ได้ส่งคำขอจริง ๆ เพียงแค่เริ่มคำขอส่ง
โทรส่ง () เพื่อส่งคำขอ:
XHR.Send (NULL);
Send () ได้รับพารามิเตอร์นั่นคือข้อมูลที่จะส่งเป็นร่างกายที่ร้องขอ หากไม่จำเป็นต้องส่งข้อมูลผ่านร่างกายคำขอต้องส่งผ่าน NULL
ข้อมูลที่เกี่ยวข้องจะเต็มไปด้วยคุณสมบัติที่เกี่ยวข้องของวัตถุ XHR:
• ResponseText: ข้อความที่ส่งคืนเป็นตัวตอบกลับ
• Responsexml: ประเภทเนื้อหาเป็นคำตอบคือ "text/xml" หรือ "application/xml"
•สถานะ: สถานะ HTTP ของการตอบสนอง
• Statustext: คำอธิบายสถานะ http
หลังจากได้รับการตอบกลับก่อนอื่นให้ตรวจสอบแอตทริบิวต์สถานะและยืนยันว่าการตอบกลับได้ส่งคืนโดยทั่วไป 200 จะถูกใช้เป็นสัญลักษณ์ของความสำเร็จ รหัสสถานะ 304 ระบุว่าทรัพยากรยังไม่ได้รับการแก้ไขและรุ่นแคชในเบราว์เซอร์สามารถใช้โดยตรง
เพื่อที่จะได้รับการตอบสนองที่เหมาะสมควรตรวจพบรหัสสถานะสองรหัสในลักษณะดังต่อไปนี้:
xhr.open ("รับ", "index.jsp", false); xhr.send (null); ถ้า ((xhr.status> = 200 && xhr.status <300) || xhr.status == 304)โดยการตรวจจับคุณสมบัติ ReadyState เฟสที่ใช้งานอยู่ในปัจจุบันของกระบวนการร้องขอ/การตอบกลับสามารถกำหนดได้
• 0: ไม่ได้เริ่มต้น ไม่ได้เรียกวิธีการเปิด ()
• 1: เริ่ม วิธีการเปิด () ได้รับการเรียกและวิธีการส่ง () ไม่ได้ถูกเรียก
• 2: ส่ง. มีการเรียกวิธีการส่ง () ไม่มีการตอบกลับ
• 3: รับ ได้รับข้อมูลบางอย่างแล้ว
• 4: เสร็จสิ้น ได้รับข้อมูลทั้งหมดแล้วและสามารถนำไปใช้ในฝั่งไคลเอ็นต์
เมื่อค่าของคุณสมบัติ ReadyState เปลี่ยนแปลงเหตุการณ์ ReadyStateChange จะถูกเรียกใช้ เพื่อให้แน่ใจว่าเบราว์เซอร์เข้ากันได้ให้ระบุตัวจัดการเหตุการณ์ OnReadyStateChange ก่อนโทรเปิด ()
var xhr = ใหม่ xmlhttprequest (); xhr.onreadystatechange = function () {ถ้า (xhr.readystate == 4) {ถ้า ((xhr.status> = 200 && xhr.status <300) || xhr.status == 304) + xhr.status);}}}; xhr.open ("รับ", "index.jsp", true); xhr.send (null);คำขอแบบอะซิงโครนัสสามารถยกเลิกได้ก่อนที่จะได้รับการตอบกลับ:
xhr.abort ();
ข้อมูลส่วนหัว http
วัตถุ XHR ให้วิธีการจัดการส่วนหัวคำขอและตอบสนองต่อข้อมูลส่วนหัว
โดยค่าเริ่มต้นในขณะที่ส่งคำขอ XHR ข้อมูลส่วนหัวต่อไปนี้จะถูกส่งด้วย
•ยอมรับ: ประเภทของเนื้อหาที่เบราว์เซอร์สามารถจัดการได้
• Accept-Charset: ชุดอักขระที่เบราว์เซอร์สามารถแสดงได้
•ยอมรับการเข้ารหัส: การเข้ารหัสบีบอัดที่เบราว์เซอร์สามารถจัดการได้
•ยอมรับภาษา: ภาษาที่กำหนดโดยเบราว์เซอร์ในปัจจุบัน
•การเชื่อมต่อ: ประเภทของการเชื่อมต่อระหว่างเบราว์เซอร์และเซิร์ฟเวอร์
•คุกกี้: คุกกี้ใด ๆ ที่ตั้งอยู่ในหน้าปัจจุบัน
•โฮสต์: โดเมนที่มีการออกคำขอ
•ผู้อ้างอิง: URL ของหน้าเว็บที่ออกคำขอ
•ผู้ใช้-แวนต์: สตริงตัวแทนผู้ใช้ของเบราว์เซอร์
ใช้ SetRequestHeader () เพื่อตั้งค่าข้อมูลส่วนหัวคำขอที่กำหนดเอง คุณต้องโทรหาวิธีการเปิด () หลังจากโทรและก่อนโทรส่ง ()
SetRequestheader ():
xhr.open ("รับ", "index.jsp", true); xhr.setrequestheader ("myheader", "myvalue"); xhr.send (null);โทร GetResponseHeader () และส่งผ่านในชื่อฟิลด์เพื่อรับข้อมูลส่วนหัวการตอบกลับที่สอดคล้องกัน GetAllResponseHeader () ได้รับสตริงยาวที่มีข้อมูลส่วนหัวทั้งหมด
var myheader = xhr.getResponseHeader ("myheader"); var allheaders = xhr.getallResponseHeader ();รับคำขอ
Get ใช้เพื่อสอบถามเซิร์ฟเวอร์สำหรับข้อมูลบางอย่าง คุณสามารถผนวกพารามิเตอร์สตริงแบบสอบถามไปยังส่วนท้ายของ URL ชื่อและค่าของแต่ละพารามิเตอร์ในสตริงแบบสอบถามจะต้องเข้ารหัสโดยใช้ encodeuricomponent ():
xhr.open ("รับ", "login.jsp? name1 = value1 & name2 = value2", false); Addurlparam () ได้รับสามพารามิเตอร์: URL ของพารามิเตอร์ที่จะเพิ่มชื่อของพารามิเตอร์และค่าของพารามิเตอร์ var url = "login.jsp"; // เพิ่มพารามิเตอร์ url = addurlparam (url, "ชื่อผู้ใช้", "xxyh"); url = addurlparam (url, "รหัสผ่าน", "xxyh123"); // เริ่มต้นคำขอ xhr.openโพสต์คำขอ
คำขอโพสต์ใช้เพื่อส่งข้อมูลไปยังเซิร์ฟเวอร์ที่ควรบันทึก ร่างกายของคำขอโพสต์สามารถมีข้อมูลจำนวนมากและรูปแบบไม่ จำกัด
คำขอเริ่มต้น:
xhr.open ("โพสต์", "login.jsp", จริง); ก่อนอื่นตั้งค่าข้อมูลส่วนหัวประเภทเนื้อหาเป็นแอปพลิเคชัน/X-WWW-FORM-URLENCODED แล้วสร้างรูปแบบสตริง หากคุณต้องการทำให้ข้อมูลแบบฟอร์มเป็นอนุกรมในหน้าแล้วส่งไปยังเซิร์ฟเวอร์ผ่าน XHR คุณสามารถใช้ฟังก์ชัน serialize () เพื่อสร้างสตริงนี้: xhr.open ("รับ", "login.jsp", false); xhr.setrequestheader ("content-type" document.getElementById ("user-info"); xhr.send (serialize (แบบฟอร์ม));ข้างต้นคือความเข้าใจเชิงลึกของ Ajax ใน JavaScript แนะนำให้คุณรู้จักโดยบรรณาธิการ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!