Ajax(เอแจ็กซ์) ย่อมาจาก
Asynchronous JavaScript(อะซิงโครนัส จาวาสคริปต์) and XML(เอ็กเอ็มแอล) ซึ่ง ajax นั้นจะทำให้ web application มีประสิทธิภาพมากขึ้นเพราะ ajax(เอแจ็กซ์) นั้นจะส่ง request ไปยัง server(เซิร์ฟเวอร์) เพื่อให้ server(เซิร์ฟเวอร์) ตอบกลับข้อมูลที่เราต้องการซึ่งจะทำให้เราแก้ปัญหาการโหลดข้อมูลช้าเพราะ Server Side Script(เซิร์ฟเวอร์ไซสคริปต์) ที่เราต้องการข้อมูลจาก server(เซิร์ฟเวอร์) นั้นจะต้องโหลดใหม่หมดเช่น php(พีเอชพี) เป็นต้น แต่ ajax(แจ็กซ์) จะทำให้เราโหลดหน้าเพจเฉพาะส่วนที่ต้องการข้อมูลใหม่เท่านั้นทำให้ web(เว็บ) หรือ web application มีประสิทธิภาพมากขึ้นและ ajax ยังสามารถที่จะดึงข้อมูลที่เป็น
xml(เอ็กเอ็มแอล)ได้อีกด้วยซึ่งในการเขียน
ajax(เอแจ็กซ์) นั้นจะเขียนโดยใช้ javascript(จาวาสคริปต์) ในการควบคุมการทำงานทั้งหมด
การทำงานของ Ajax(เอแจ็กซ์)
- js.jpg (58.38 KiB) Viewed 2280 times
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>
ต้องสร้างไฟล์ .txt ด้วยเพื่อใส่ข้อความที่ต้องการให้เปลี่ยน
ตัวอย่าง ไฟล์ ajax.txt
โค้ด: เลือกทั้งหมด
<html>
<h1>สวัสดี MindPHP</h1>
<h2>สวัสดี MindPHP</h2>
<h3>สวัสดี MindPHP</h3>
<h4>สวัสดี MindPHP</h4>
<h5>สวัสดี MindPHP</h5>
</html>
ผลลัพที่ได้ตอนรันหน้าเว็บดังภาพ
- dfgyo.JPG (12.89 KiB) Viewed 2280 times
ผลลัพที่ได้ตอนคลิกปุ่มดังภาพ
- sfyht.JPG (18.4 KiB) Viewed 2280 times
อ้างอิง :
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
[b][url=https://www.mindphp.com/forums/viewforum.php?f=78]Ajax(เอแจ็กซ์)[/url][/b] ย่อมาจาก [b]Asynchronous JavaScript(อะซิงโครนัส จาวาสคริปต์) and [url=https://www.mindphp.com/forums/viewforum.php?f=77]XML(เอ็กเอ็มแอล)[/url][/b] ซึ่ง ajax นั้นจะทำให้ web application มีประสิทธิภาพมากขึ้นเพราะ ajax(เอแจ็กซ์) นั้นจะส่ง request ไปยัง server(เซิร์ฟเวอร์) เพื่อให้ server(เซิร์ฟเวอร์) ตอบกลับข้อมูลที่เราต้องการซึ่งจะทำให้เราแก้ปัญหาการโหลดข้อมูลช้าเพราะ Server Side Script(เซิร์ฟเวอร์ไซสคริปต์) ที่เราต้องการข้อมูลจาก server(เซิร์ฟเวอร์) นั้นจะต้องโหลดใหม่หมดเช่น php(พีเอชพี) เป็นต้น แต่ ajax(แจ็กซ์) จะทำให้เราโหลดหน้าเพจเฉพาะส่วนที่ต้องการข้อมูลใหม่เท่านั้นทำให้ web(เว็บ) หรือ web application มีประสิทธิภาพมากขึ้นและ ajax ยังสามารถที่จะดึงข้อมูลที่เป็น [url=https://www.mindphp.com/forums/viewforum.php?f=77]xml(เอ็กเอ็มแอล)[/url]ได้อีกด้วยซึ่งในการเขียน[url=https://www.mindphp.com/forums/viewforum.php?f=78]ajax(เอแจ็กซ์)[/url] นั้นจะเขียนโดยใช้ javascript(จาวาสคริปต์) ในการควบคุมการทำงานทั้งหมด
[b][color=#BF0080]การทำงานของ Ajax(เอแจ็กซ์)[/color][/b]
[attachment=2]js.jpg[/attachment]
1.เหตุการที่เกิดในฝั่ง web page (เมื่อหน้าเว็บถูกโหลดก็จะมีปุ่ม button ให้เราคลิกได้)
2.วัตถุประสงค์ของ XMLHttpRequest(เอ็กเอ็มแอลเอชทีทีพีรีเควต) ถูกสร้างโดยใช้ JavaScript
3.วัตถุประสงค์ของ XMLHttpRequest(เอ็กเอ็มแอลเอชทีทีพีรีเควต) ส่งคำขอไปยังเว็บเซิร์ฟเวอร์
4.เวิร์ฟเวอร์ก็ทำการประมวลผลตามคำร้องขอ
5.เวิร์ฟเวอร์จะทำการส่งผลการประมวลกลับมายังหน้าเว็บ
6.ผลการประมวลจะถูกอ่านโดยใช้ JavaScript(จาวาสคริปต์)
7.การกระทำที่เหมาะสม(เช่นการปรับปรุงหน้าเว็บ)จะดำเนินการโดยใช้ JavaScript(จาวาสคริปต์)
[b][color=#BF0080]ตัวอย่างโค้ด Ajax(เอแจ็กซ์)[/color][/b]
[code]<!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>[/code]
[b]ต้องสร้างไฟล์ .txt ด้วยเพื่อใส่ข้อความที่ต้องการให้เปลี่ยน[/b]
ตัวอย่าง ไฟล์ ajax.txt
[code]<html>
<h1>สวัสดี MindPHP</h1>
<h2>สวัสดี MindPHP</h2>
<h3>สวัสดี MindPHP</h3>
<h4>สวัสดี MindPHP</h4>
<h5>สวัสดี MindPHP</h5>
</html>[/code]
[b]ผลลัพที่ได้ตอนรันหน้าเว็บดังภาพ[/b]
[attachment=1]dfgyo.JPG[/attachment]
[b]ผลลัพที่ได้ตอนคลิกปุ่มดังภาพ[/b]
[attachment=0]sfyht.JPG[/attachment]
อ้างอิง :
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