การทำงานของ Ajax(เอแจ็กซ์) 1.เหตุการที่เกิดในฝั่ง web page (เมื่อหน้าเว็บถูกโหลดก็จะมีปุ่ม button ให้เราคลิกได้)
2.วัตถุประสงค์ของ XMLHttpRequest(เอ็กเอ็มแอลเอชทีทีพีรีเควต) ถูกสร้างโดยใช้ JavaScript
3.วัตถุประสงค์ของ XMLHttpRequest(เอ็กเอ็มแอลเอชทีทีพีรีเควต) ส่งคำขอไปยังเว็บเซิร์ฟเวอร์
4.เวิร์ฟเวอร์ก็ทำการประมวลผลตามคำร้องขอ
5.เวิร์ฟเวอร์จะทำการส่งผลการประมวลกลับมายังหน้าเว็บ
6.ผลการประมวลจะถูกอ่านโดยใช้ JavaScript(จาวาสคริปต์)
7.การกระทำที่เหมาะสม(เช่นการปรับปรุงหน้าเว็บ)จะดำเนินการโดยใช้ JavaScript(จาวาสคริปต์)
ตัวอย่างโค้ด Ajax(เอแจ็กซ์)
โค้ด: เลือกทั้งหมด
<!DOCTYPE html>
<html>
<body>
<div id="demo">
<h2>ทดสอบ XMLHttpRequest</h2>
<button type="button" onclick="loadDoc()">เปลี่ยนเนื้อหา</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", "ajax.txt", true);
xhttp.send();
}
</script>
</body>
</html>
ตัวอย่าง ไฟล์ ajax.txt
โค้ด: เลือกทั้งหมด
<html>
<h1>สวัสดี MindPHP</h1>
<h2>สวัสดี MindPHP</h2>
<h3>สวัสดี MindPHP</h3>
<h4>สวัสดี MindPHP</h4>
<h5>สวัสดี MindPHP</h5>
</html>
http://www.thaicoding.net/ajax-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/
https://www.w3schools.com/js/js_ajax_intro.asp