ล่าสุดการพัฒนาเว็บบทเรียน
 

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

❮ก่อนหน้า ถัดไปบท❯

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

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

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

xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
วิธี ลักษณะ
open(method, url, async) ระบุชนิดของการร้องขอ

method : ประเภทของคำขอ: GET หรือ POST
url : เซิร์ฟเวอร์ (File) สถานที่ตั้ง
async : true (ไม่ตรงกัน) หรือ false (ซิงโคร)
send() ส่งคำขอไปยังเซิร์ฟเวอร์ (ใช้สำหรับ GET )
send(string) ส่งคำขอไปยังเซิร์ฟเวอร์ (ใช้สำหรับการ POST )

GET หรือ POST ?

GET จะง่ายและเร็วกว่าการ POST และสามารถนำมาใช้ในกรณีส่วนใหญ่

แต่มักจะใช้ POST คำขอเมื่อ:

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

GET การร้องขอ

ง่าย GET คำขอ:

ตัวอย่าง

xhttp.open("GET", "demo_get.asp", true);
xhttp.send();
ลองตัวเอง»

ในตัวอย่างข้างต้นคุณอาจจะได้รับผลที่เก็บไว้ชั่วคราว เพื่อหลีกเลี่ยงนี้เพิ่มเป็นเอกลักษณ์ ID to the URL: ID to the URL:

ตัวอย่าง

xhttp.open("GET", "demo_get.asp?t=" + Math.random(), true);
xhttp.send();
ลองตัวเอง»

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

ตัวอย่าง

xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford", true);
xhttp.send();
ลองตัวเอง»

POST คำขอ

ง่าย POST คำขอ:

ตัวอย่าง

xhttp.open("POST", "demo_post.asp", true);
xhttp.send();
ลองตัวเอง»

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

ตัวอย่าง

xhttp.open("POST", "ajax_test.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");
ลองตัวเอง»

วิธี ลักษณะ
setRequestHeader(header, value) เพิ่มส่วนหัว HTTP คำขอ

header : ระบุชื่อส่วนหัว
value : ระบุค่าส่วนหัว

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

url พารามิเตอร์ของ open() วิธีการคือที่อยู่ไปยังแฟ้มบนเซิร์ฟเวอร์:

xhttp.open("GET", "ajax_test.asp", true);

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

Asynchronous - True หรือ False ?

AJAX ย่อมาจาก Asynchronous JavaScript และ XML และสำหรับวัตถุ XMLHttpRequest ที่จะประพฤติตัวเป็น AJAX ที่ async พารามิเตอร์ของ open() วิธีการจะต้องมีการตั้งค่าเป็นจริง:

xhttp.open("GET", "ajax_test.asp", true);

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

ด้วย AJAX, JavaScript ที่ไม่ต้องรอการตอบสนองเซิร์ฟเวอร์ แต่แทนที่จะสามารถ:

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

Async=true

เมื่อใช้ class = "notranslate" async = true ระบุฟังก์ชั่นในการดำเนินการเมื่อการตอบสนองที่มีความพร้อมในกรณี onreadystatechange นี้:

ตัวอย่าง

xhttp.onreadystatechange = function() {
  if (xhttp.readyState == 4 && xhttp.status == 200) {
    document.getElementById("demo").innerHTML = xhttp.responseText;
  }
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
ลองตัวเอง»

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

Async=false

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

xhttp.open("GET", "ajax_info.txt", false);

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

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

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

ตัวอย่าง

xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;
ลองตัวเอง»

❮ก่อนหน้า ถัดไปบท❯