มาสาธิตด้วยตัวอย่างการยืนยันการเข้าสู่ระบบทั่วไปกัน
โดยทั่วไปแล้ว การใช้ออบเจ็กต์ XMLHttpRequest สำหรับการตรวจสอบการเข้าสู่ระบบจำเป็นต้องมีขั้นตอนต่อไปนี้:
1. ใช้วิธี DOM เพื่อรับค่าในกล่องอินพุต
คัดลอกรหัสรหัสดังต่อไปนี้:
ชื่อผู้ใช้ var = document.getElementById("ชื่อผู้ใช้").value;
2. สร้างออบเจ็กต์ XMLHttpRequest ขั้นตอนนี้ซับซ้อนกว่า เหตุผลหลักคือการพิจารณาปัญหาความเข้ากันได้ของเบราว์เซอร์
คัดลอกรหัสรหัสดังต่อไปนี้:
ถ้า (window.XMLHttpRequest) {
//สำหรับ FireFox, Mozillar, Opera, Safari, IE7, IE8
xmlhttp = XMLHttpRequest ใหม่ ();
//แก้ไขข้อบกพร่องในเบราว์เซอร์ mozillar บางเวอร์ชัน
ถ้า (xmlhttp.overrideMimeType) {
xmlhttp.overrideMimeType("ข้อความ/xml");
-
} อื่นถ้า (window.ActiveXObject) {
//สำหรับ IE6, IE5.5, IE5
//ชื่อควบคุมสองชื่อที่สามารถใช้ในการสร้างวัตถุ XMLHTTPRequest ซึ่งจัดเก็บไว้ในอาร์เรย์ js
// เวอร์ชันอันดับหนึ่งคือใหม่กว่า
var activexName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
สำหรับ (var i = 0; i < activexName.length; i++) {
พยายาม{
//นำชื่อควบคุมออกมาและสร้างมันขึ้นมา หากสร้างสำเร็จ ให้ยุติการวนซ้ำ
//หากการสร้างล้มเหลว จะมีข้อยกเว้นเกิดขึ้น จากนั้นลูปจะสามารถพยายามสร้างต่อไปได้
xmlhttp = ActiveXObject ใหม่ (activexName [i]);
หยุดพัก;
} จับ(จ){
-
-
-
3. ลงทะเบียนฟังก์ชันการโทรกลับของออบเจ็กต์ XMLHttpRequest เมื่อลงทะเบียนฟังก์ชันการโทรกลับ คุณต้องมีชื่อฟังก์ชันและไม่ต้องใส่วงเล็บ
คัดลอกรหัสรหัสดังต่อไปนี้:
//เมื่อลงทะเบียนฟังก์ชัน callback จำเป็นต้องมีชื่อฟังก์ชัน ไม่ต้องใส่วงเล็บ
//เราจำเป็นต้องลงทะเบียนชื่อฟังก์ชัน ถ้าเราเพิ่มวงเล็บ ค่าที่ส่งคืนของฟังก์ชันจะถูกลงทะเบียน นี่เป็นสิ่งที่ผิด
xmlhttp.onreadystatechange = โทรกลับ;
4. ตั้งค่า (GET) ข้อมูลการเชื่อมต่อ
คัดลอกรหัสรหัสดังต่อไปนี้:
// พารามิเตอร์แรกระบุวิธีการร้องขอ http ซึ่งรองรับวิธีการร้องขอ http ทั้งหมด ส่วนใหญ่ใช้การรับและโพสต์
//พารามิเตอร์ตัวที่สองแสดงถึงที่อยู่ URL ของคำขอ และพารามิเตอร์ที่ร้องขอโดยวิธีการ get ก็อยู่ใน URL เช่นกัน
//พารามิเตอร์ตัวที่สามระบุว่าจะใช้การโต้ตอบแบบอะซิงโครนัสหรือแบบซิงโครนัส ส่วน True ระบุว่าเป็นแบบอะซิงโครนัส
xmlhttp.open("GET", "AJAXServer?name="+ ชื่อผู้ใช้,true);
5.ส่งคำขอ
คัดลอกรหัสรหัสดังต่อไปนี้:
xmlhttp.send(null);
6. วิธี (POST) คุณต้องตั้งค่าส่วนหัวคำขอ http ด้วยตัวเอง และเนื่องจากจำเป็นต้องเข้ารหัส คุณจึงไม่สามารถส่งข้อมูลในพารามิเตอร์ตัวที่สองของ XHR.open ได้โดยตรง คุณควรใช้วิธี send() แทน เพื่อส่งข้อมูล
คัดลอกรหัสรหัสดังต่อไปนี้:
//รหัสสำหรับคำขอ POST
//xmlhttp.open("POST", "AJAXServer", จริง);
//วิธี POST กำหนดให้คุณต้องตั้งค่าส่วนหัวคำขอ http ด้วยตนเอง
xmlhttp.setRequestHeader("ประเภทเนื้อหา", "application/x-www-form-urlencoded");
//ส่งข้อมูลในโหมด POST
xmlhttp.send("name=" + ชื่อผู้ใช้);
ฟังก์ชั่นโทรกลับ:
คัดลอกรหัสรหัสดังต่อไปนี้:
//ฟังก์ชันโทรกลับ
ฟังก์ชั่นโทรกลับ () {
//alert(xmlhttp.readyState);
//5. รับข้อมูลการตอบกลับ
//ตรวจสอบว่าสถานะของวัตถุเป็นแบบโต้ตอบเสร็จสิ้นหรือไม่
ถ้า (xmlhttp.readyState == 4) {
//ตรวจสอบว่าการโต้ตอบ http สำเร็จหรือไม่
ถ้า (xmlhttp.status == 200) {
//รับข้อมูลที่ส่งคืนโดยเซิร์ฟเวอร์เครื่องเขิน
// รับข้อมูลข้อความธรรมดาที่ส่งออกโดยส่วนของเซิร์ฟเวอร์
var responseText = xmlhttp.responseText;
//แสดงข้อมูลบนเพจ
//ค้นหาโหนดองค์ประกอบที่สอดคล้องกับแท็ก div ผ่าน dom
var divNode = document.getElementById("ผลลัพธ์");
//ตั้งค่าเนื้อหา html ในโหนดองค์ประกอบ
divNode.innerHTML = ข้อความตอบกลับ;
} อื่น {
alert("เกิดข้อผิดพลาด!!!");
-
-
-