AJAX XMLHttpRequest

สารบัญ

    แสดงสารบัญ

วัตถุ XMLHttpRequest ใช้เพื่อขอข้อมูลจากเซิร์ฟเวอร์

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

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

xhttp.open("GET", "ajax_info.txt", true);
 xhttp.send();
open(method, url, async)

ระบุประเภทของคำขอ

วิธีการ: ประเภทของคำขอ: GET หรือ POST
url: ตำแหน่งเซิร์ฟเวอร์ (ไฟล์)
อะซิงโครนัส: จริง (อะซิงโครนัส) หรือเท็จ (ซิงโครนัส)

send()

ส่งคำขอไปยังเซิร์ฟเวอร์ (ใช้สำหรับ GET)

send(string)

ส่งคำขอไปยังเซิร์ฟเวอร์ (ใช้สำหรับ POST)

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

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

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

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

อะซิงโครนัส - จริงหรือเท็จ?

คำขอของเซิร์ฟเวอร์ควรถูกส่งแบบอะซิงโครนัส

พารามิเตอร์ async ของ open() ควรตั้งค่าวิธีการเป็นจริง:

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

โดยการส่งแบบอะซิงโครนัสไฟล์ JavaScript ไม่จำเป็นต้องรอการตอบสนองของเซิร์ฟเวอร์ แต่สามารถ:

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

  • จัดการกับคำตอบหลังจากที่คำตอบพร้อมแล้ว

ค่าเริ่มต้นสำหรับพารามิเตอร์ async คือ async=true

คุณสามารถลบพารามิเตอร์ตัวที่สามออกจากโค้ดของคุณได้อย่างปลอดภัย

ไม่แนะนำให้ใช้ XMLHttpRequest แบบซิงโครนัส (async=false) เนื่องจาก JavaScript จะทำเช่นนั้น หยุดดำเนินการจนกว่าการตอบสนองของเซิร์ฟเวอร์จะพร้อม หากเซิร์ฟเวอร์ไม่ว่างหรือช้า แอปพลิเคชันจะหยุดทำงานหรือหยุดลง

คำขอ GET หรือคำขอ POST?

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

อย่างไรก็ตาม ให้ใช้คำขอ POST เสมอเมื่อ:

  • ไฟล์แคชไม่ใช่ตัวเลือก (อัปเดตไฟล์หรือฐานข้อมูลบนเซิร์ฟเวอร์)

  • การส่งข้อมูลจำนวนมากไปยังเซิร์ฟเวอร์ (POST ไม่มีการจำกัดขนาด)

  • การส่งอินพุตของผู้ใช้ (ซึ่งอาจมีอักขระที่ไม่รู้จัก) POST จะมีประสิทธิภาพและปลอดภัยมากกว่า GET

รับคำขอ

คำขอ GET ง่ายๆ:

ตัวอย่าง

xhttp.open("GET", "demo_get.asp");
 xhttp.send();

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Request data</button>
<p id="demo"></p>

<script>
function loadDoc() {
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {
    document.getElementById("demo").innerHTML = this.responseText;
  }
  xhttp.open("GET", "demo_get.asp");
  xhttp.send();
}
</script>

</body>
</html>

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

ตัวอย่าง

xhttp.open("GET", "demo_get.asp?t=" + Math.random());
 xhttp.send();

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Request data</button>

<p id="demo"></p>

<script>
function loadDoc() {
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {
    document.getElementById("demo").innerHTML = this.responseText;
  }
  xhttp.open("GET", "demo_get.asp?t=" + Math.random());
  xhttp.send();
}
</script>

</body>
</html>

หากคุณต้องการส่งข้อมูลด้วยเมธอด GET ให้เพิ่มข้อมูลลงใน URL:

ตัวอย่าง

xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford");
 xhttp.send();

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Request data</button>

<p id="demo"></p>

<script>
function loadDoc() {
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {
    document.getElementById("demo").innerHTML = this.responseText;
  }
  xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford");
  xhttp.send();
}
</script>
 
</body>
</html>

วิธีที่เซิร์ฟเวอร์ใช้อินพุตและวิธีที่เซิร์ฟเวอร์ตอบสนองต่อคำขอ จะมีการอธิบายในบทต่อๆ ไป

คำขอโพสต์

คำขอ POST ง่ายๆ:

ตัวอย่าง

xhttp.open("POST", "demo_post.asp");
 xhttp.send();

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Request data</button>

<p id="demo"></p>
 
<script>
function loadDoc() {
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {
    document.getElementById("demo").innerHTML = this.responseText;
  }
  xhttp.open("POST", "demo_post.asp");
  xhttp.send();
}
</script>

</body>
</html>

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

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Request data</button>

<p id="demo"></p>
 
<script>
function loadDoc() {
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {
    document.getElementById("demo").innerHTML = this.responseText;
  }
  xhttp.open("POST", "demo_post2.asp");
  xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhttp.send("fname=Henry&lname=Ford");
}
</script>

</body>
</html>
setRequestHeader(header, value)

เพิ่มส่วนหัว HTTP ให้กับคำขอ

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

คำขอแบบซิงโครนัส

หากต้องการดำเนินการคำขอแบบซิงโครนัส ให้เปลี่ยนพารามิเตอร์ที่สามในเมธอด open() เป็น false:

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

บางครั้ง async=false ใช้สำหรับการทดสอบอย่างรวดเร็ว นอกจากนี้คุณยังจะได้พบกับ คำขอแบบซิงโครนัสในโค้ด JavaScript เก่า

เนื่องจากโค้ดจะรอให้เซิร์ฟเวอร์เสร็จสิ้น จึงไม่จำเป็นต้องมี onreadystatechange การทำงาน:

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>The XMLHttpRequest Object</h2>

<p id="demo">Let AJAX change this text.</p>

<button type="button" onclick="loadDoc()">Change Content</button>

<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.open("GET", "ajax_info.txt", false);
  xhttp.send();
  document.getElementById("demo").innerHTML = xhttp.responseText;
}
</script>

</body>
</html>

ไม่แนะนำให้ใช้ XMLHttpRequest แบบซิงโครนัส (async=false) เนื่องจาก JavaScript จะทำเช่นนั้น หยุดดำเนินการจนกว่าการตอบสนองของเซิร์ฟเวอร์จะพร้อม หากเซิร์ฟเวอร์ไม่ว่างหรือช้า แอปพลิเคชันจะหยุดทำงานหรือหยุดลง

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