Latest web development tutorials

AJAX - ส่งคำขอไปยังเซิร์ฟเวอร์

XMLHttpRequest วัตถุแลกเปลี่ยนข้อมูลกับเซิร์ฟเวอร์

ส่งคำขอไปยังเซิร์ฟเวอร์

ส่งคำขอไปยังเซิร์ฟเวอร์ที่เราใช้เปิดวัตถุ XMLHttpRequest ของ () และส่ง () วิธีการ:

xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

ทาง ลักษณะ
เปิด(วิธี, URL async)

ประเภทระบุคำขอ URL และไม่ว่าการประมวลผลไม่ตรงกันของการร้องขอ

  • วิธีการ:ประเภทของการร้องขอ; GET หรือโพสต์
  • URL:ตำแหน่งของไฟล์บนเซิร์ฟเวอร์
  • async: จริง (ไม่ตรงกัน)หรือเท็จ (ซิงโคร)
ส่ง(สตริง)

ส่งคำขอไปยังเซิร์ฟเวอร์

  • สตริง:เพียงสำหรับการร้องขอ POST

GET หรือโพสต์?

เมื่อเทียบกับการโพสต์ได้รับง่ายขึ้นและเร็วขึ้นและในกรณีส่วนใหญ่สามารถนำมาใช้

อย่างไรก็ตามในกรณีดังต่อไปนี้โปรดใช้คำขอ POST:

  • ไม่สามารถใช้ไฟล์แคช (แฟ้มหรือปรับปรุงฐานข้อมูลบนเซิร์ฟเวอร์)
  • ส่งข้อมูลจำนวนมาก (POST ไม่ จำกัด จำนวนของข้อมูล) ไปยังเซิร์ฟเวอร์
  • เมื่อส่งเข้าของผู้ใช้มีอักขระที่ไม่รู้จักโพสต์จะมีเสถียรภาพมากขึ้นและมีความน่าเชื่อถือมากกว่า GET

ได้รับการร้องขอ

ร้องขอ GET ง่าย:

ตัวอย่าง

xmlhttp.open("GET","demo_get.html",true);
xmlhttp.send();

ลอง»

ในตัวอย่างข้างต้นคุณอาจได้รับผลที่เก็บไว้

เพื่อหลีกเลี่ยงนี้เพิ่มเป็นรหัสเฉพาะ URL:

ตัวอย่าง

xmlhttp.open("GET","demo_get.html?t=" + Math.random(),true);
xmlhttp.send();

ลอง»

หากคุณต้องการที่จะส่งข้อมูลผ่านวิธีการที่จะได้รับเพิ่มข้อมูลไปยัง URL:

ตัวอย่าง

xmlhttp.open("GET","demo_get2.html?fname=Henry&lname=Ford",true);
xmlhttp.send();

ลอง»

คำขอ POST

คำขอ POST ง่าย:

ตัวอย่าง

xmlhttp.open("POST","demo_post.html",true);
xmlhttp.send();

ลอง»

หากคุณจำเป็นต้องว่าข้อมูลเป็นรูปแบบ HTML POST ใช้ setRequestHeader () เพื่อเพิ่มส่วนหัว HTTP จากนั้นระบุว่าคุณต้องการที่จะส่งข้อมูลในการส่ง () method:

ตัวอย่าง

xmlhttp.open("POST","ajax_test.html",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");

ลอง»

方法 描述
setRequestHeader(header,value)

向请求添加 HTTP 头。

  • header: 规定头的名称
  • value: 规定头的值

URL - ไฟล์บนเซิร์ฟเวอร์

อาร์กิวเมนต์URLเปิด () วิธีการเป็นที่อยู่ของเซิร์ฟเวอร์แฟ้ม:

xmlhttp.open("GET","ajax_test.html",true);

ไฟล์สามารถชนิดของไฟล์ใด ๆ เช่น .txt และ .xml หรือเซิร์ฟเวอร์ไฟล์สคริปต์เช่นงูเห่าและ .php (ก่อนที่จะกลับมาตอบสนองการปฏิบัติงานบนเซิร์ฟเวอร์)

Asynchronous - จริงหรือเท็จ?

AJAX หมายความ Asynchronous JavaScript และ XML (Asynchronous JavaScript และ XML)

หากคุณต้องการใช้วัตถุ XMLHttpRequest AJAX แล้วพารามิเตอร์ async ซึ่งเปิด () วิธีการจะต้องตั้งค่าจริง:

xmlhttp.open("GET","ajax_test.html",true);

สำหรับนักพัฒนาเว็บส่งคำขอตรงกันเป็นขั้นตอนมากไปข้างหน้า ในเซิร์ฟเวอร์เพื่อดำเนินการจำนวนมากใช้เวลานานมาก ก่อนที่จะเกิดขึ้น AJAX ซึ่งอาจก่อให้เกิดการประยุกต์ใช้ในการแขวนหรือหยุด

ผ่าน AJAX, JavaScript โดยไม่ต้องรอการตอบกลับของเซิร์ฟเวอร์ แต่:

  • สคริปต์อื่น ๆ ดำเนินการในขณะที่รอการตอบสนองจากเซิร์ฟเวอร์
  • เมื่อการตอบสนองที่มีความพร้อมที่จะตอบสนองในการประมวลผล

Async = true

เมื่อใช้ async = true โปรดบทบัญญัติในการตอบสนองต่อเหตุการณ์ที่เกิดขึ้นในการเตรียมความพร้อมที่จะดำเนินการ onreadystatechange ฟังก์ชั่น:

ตัวอย่าง

xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

ลอง»

คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับเนื้อหา onreadystatechange ในบทต่อมา

Async = false

หากต้องการใช้ async = false ตั้งค่าเปิด () วิธีการในพารามิเตอร์ที่สามในการเท็จ 

xmlhttp.open("GET","test1.txt",false);

เราไม่แนะนำให้ใช้ async = false แต่สำหรับคำขอเล็ก ๆ ยังเป็นไปได้

โปรดจำไว้ว่า JavaScript จะรอจนกว่าตอบสนองของเซิร์ฟเวอร์ที่มีความพร้อมที่จะดำเนินการ ถ้าเซิร์ฟเวอร์ไม่ว่างหรือช้าหรือหยุดโปรแกรมแฮงค์

หมายเหตุ: เมื่อคุณใช้ async = false โปรดอย่าเขียนฟังก์ชัน onreadystatechange - ใส่รหัสลงส่ง () กลับไปที่คำสั่ง:

ตัวอย่าง

xmlhttp.open("GET","ajax_info.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

ลอง»