การส่งคำขอไปแม่ข่าย

อ๊อบเจค XMLHttpRequest ใช้ส่งแลกเปลี่ยนข้อมูลกับแม่ข่าย

ส่งคำขอไปแม่ข่าย

การส่งคำขอไปแม่ข่าย ใช้เมธอด open() และ send() ของอ๊อบเจค XMLHttpRequest

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

GET หรือ POST?

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

อย่างไรก็ตาม ใช้ POST เสมอเมื่อ

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

GET Requests

คำขอ GET อย่างง่าย

ตัวอย่าง
xmlhttp.open("GET","demo_get.asp",true);
xmlhttp.send();

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

ตัวอย่าง
xmlhttp.open("GET","demo_get.asp?t=" + Math.random(),true);
xmlhttp.send();

ถ้าต้องการส่งสารสนเทศด้วยเมธอด GET ให้เพิ่มสารสนเทศไปที่ URL

ตัวอย่าง
xmlhttp.open("GET","demo_get2.asp?fname=Henry&lname=Ford",true);
xmlhttp.send();

POST Requests

คำขอ POST อย่างง่าย

ตัวอย่าง
xmlhttp.open("POST","demo_post.asp",true);
xmlhttp.send();

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

ตัวอย่าง

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

url – ไฟล์บนแม่ข่าย

พารามิเตอร์ url ของเมธอด open() คือ ที่อยู่ของไฟล์บนเครื่องแม่ข่าย

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

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

Asynchronous - True or False?

AJAX ย่อมาจาก Asynchronous JavaScript and XML สำหรับการทำให้อ๊อบเจค XMLHttpRequest ปฏิบัติตาม AJAX ให้กำหนดค่า พารามิเตอร์ async ของเมธอด open() ต้องมีการตั้งค่าเป็น true

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

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

ด้วย AJAX คำสั่ง JavaScript ไม่ต้องรอการตอบสนองจากแม่ข่าย แต่ทำสิ่งนี้แทน

• ประมวลผลสคริปต์อื่น ขณะที่คอยแม่ข่ายตอบสนอง
• ทำงานกับการตอบสนองต่อ เมื่อการตอบสนองพร้อม

Async=true

เมื่อใช้ async=true เป็นการระบุฟังก์ชันให้ประมวลผลเมื่อการตอบสนองพร้อมใน onreadystatechange event:

ตัวอย่าง

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 ให้เปลี่ยนพารามิเตอร์ที่สามในเมธอด open() เป็น false

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

ไม่แนะนำให้ใช้ async=false แต่ถ้าเป็นคำขอขนาดเล็กสามารถทำได้

ให้จำไว้ว่า JavaScript จะไม่หยุดประมวลผล จนกว่าตอบสนองจากแม่ข่ายพร้อม ถ้าแม่ข่ายไม่ว่างหรือช้า โปรแกรมประยุกจะถูกแขวนหรือหยุด

หมายเหตุ เมื่อใช้ async=false ห้ามเขียนฟังก์ชัน onreadystatechange แต่ให้วางคำสั่งหลังประโยคคำสั่ง send()

ตัวอย่าง

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