ajax(เอแจ็กซ์) คืออะไร

Jquery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , Jquery ม Ajax

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
Parichat
PHP VIP Members
PHP VIP Members
โพสต์: 2443
ลงทะเบียนเมื่อ: 08/01/2018 10:03 am

ajax(เอแจ็กซ์) คืออะไร

โพสต์โดย Parichat » 09/01/2018 12:12 am

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
js.jpg (58.38 KiB) เปิดดู 775 ครั้ง

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
dfgyo.JPG (12.89 KiB) เปิดดู 775 ครั้ง


ผลลัพที่ได้ตอนคลิกปุ่มดังภาพ
sfyht.JPG
sfyht.JPG (18.4 KiB) เปิดดู 775 ครั้ง


อ้างอิง :
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
Live Simply, Laugh Often, Love Deeply.....

  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 1 และ บุคคลทั่วไป 0 ท่าน