AJAX Request and Response

1.AJAX Request

จากเนื้อหาของ AJAX XMLHttpRequest กล่าวว่า XMLHttpRequest คือวัถตุที่ใช้ในการแลกเปลี่ยนข้อมูลกับเซิร์ฟเวอร์โดยทำงานอยู่เบื้องหลัง ซึ่งในการแลกเปลี่ยนข้อมูลนั้นจะต้องส่ง request ไปด้วยโดยใชเมธอด open() และ send() ของวัตถุ XMLHttpRequest

 

ไวยากรณ์ 

// สร้างวัตถุ XMLHttpRequest
var xhttp = new XMLHttpRequest();

xhttp.open(method, url, async);
xhttp.send();

 

อธิบายพารามิเตอร์บรรทัดที่ 4 

  • method เป็นได้ทั้ง GET และ POST
  • url ระบุที่อยู่ของไฟล์ปลายทาง ตัวอย่างเช่น “test.php”
  • async สามารถเป็นได้ทั้ง true หรือ false (แนะนำให้ใช้ true เพราะถ้าหากเกิดความผิดพลาดขึ้นจะช่วยให้โค้ดส่วนอื่นสามารถทำงานได้ต่อไป)

 

ตัวอย่างการใช้ GET Request

  • 1.ทั่วไป
var xhttp = new XMLHttpRequest();

xhttp.open("GET", "test.php", true);
xhttp.send();
  • 2.แบบมีการส่งผ่านข้อมูล โดยกำหนดพารามิเตอร์ชื่อ name มีค่าเป็น pawin
var xhttp = new XMLHttpRequest();

xhttp.open("GET", "test.php?name=pawin", true);
xhttp.send();

 

ตัวอย่างการใช้ POST Request

  • 1.ทั่วไป
var xhttp = new XMLHttpRequest();

xhttp.open("POST", "test.php", true);
xhttp.send();
  • 2.การส่งข้อมูลแบบฟอร์ม HTML สามารถทำได้โดยเพิ่มเมธอด setRequestHeader() และระบุข้อมูลที่ต้องการส่ง
var xhttp = new XMLHttpRequest();

xhttp.open("POST", "test.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("name=pawin&gender=male");

 

ตารางเปรียบเทียบ GET และ POST

GET POST
ใช้งานง่าย และรวดเร็วกว่า ช้ากว่านิดหน่อย
จำกัดข้อมูลในการส่งแต่ละครั้ง

ไม่จำกัดข้อมูลในการส่งแต่ละครั้ง

ปลอดภัยน้อยกว่า POST ปลอดภัยมากกว่า GET

 

2.AJAX Response

ก่อนอื่นมารู้จักกับคุณสมบัติ onreadystatechange เป็นคุณสมบัติที่ใช้ในการดำเนินการเมื่อ readyState เปลี่ยนไปดังตัวอย่างต่อไปนี้

ตัวอย่างที่ 1 

<html>
<body>

<div id="demo">
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>

<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML =
      this.responseText;
    }
  };
  xhttp.open("GET", "test.php", true);
  xhttp.send();
}
</script>

</body>
</html>

ไฟล์ที่ 1 test_ajaxres.php

จากไฟล์ที่ 1 สามารถอธิบายได้ว่า ฟังก์ชัน loadDoc() ภายในมีกระบวนการทำงานดังนี้

  • สร้างวัตถุ XMLHttpRequest
  • ส่ง request ไปยังไฟล์ test.php
  • ส่งผลลัพธ์ไปอัพเดทที่แท็กไอดีเท่ากับ demo 

ตารางคุณสมบัติ XMLHttpRequest

Property คำอธิบาย
onreadystatechange กำหนดให้ฟังก์ชันเรียกใช้งานเมื่อค่าสถานะของ readyState เปลี่ยนไป
readyState ค่าสถานะประกอบไปด้วย
0: ยังไม่มีคำขอหรือไม่มีการทำอะไรทั้งนั้น
1: สร้างการเชื่อมต่อกับเซิร์ฟเวอร์แล้ว
2: ได้รับคำขอแล้ว
3: ประมวลผลคำขอ
4: พร้อมทำงาน
responseText ส่งคืนค่าข้อมูลในรูปแบบของ string
responseXML ส่งคืนค่าข้อมูลในรูปแบบของข้อมูล XML 
status คืนค่าหมายเลขสถานะคำขอ
200: “OK”
403: “Forbidden”
404: “Not Found”
statusText การคืนค่า (“OK” หรือ “Not Found”)

 

 

 

 

หากคุณพบคำที่สะกดผิด เว้นวรรคไม่ถูกต้อง ฯ โปรดแจ้งให้เราทราบ โดยลากคลุม (highlight) ข้อความนั้น แล้วกด Ctrl + Enter

ไม่สามารถคัดลอกเนื้อหานี้

Spelling error report

The following text will be sent to our editors: