ล่าสุดการพัฒนาเว็บบทเรียน
 

AJAXบทนำ

❮ก่อนหน้า ถัดไปบท❯

AJAX เป็นความฝันของนักพัฒนาเพราะคุณสามารถ:

  • อัพเดทหน้าเว็บโดยไม่ต้องโหลดหน้าเว็บ
  • ขอข้อมูลจากเซิร์ฟเวอร์ - หลังจากที่มีการโหลดหน้า
  • ได้รับข้อมูลจากเซิร์ฟเวอร์ - หลังจากที่มีการโหลดหน้า
  • ส่งข้อมูลไปยังเซิร์ฟเวอร์ - ในพื้นหลัง

ลองตัวเองตัวอย่างในทุกบท

ในทุกบทคุณสามารถแก้ไขตัวอย่างออนไลน์และคลิกที่ปุ่มเพื่อดูผลลัพธ์

AJAX ตัวอย่าง

Let AJAX change this text

ลองตัวเอง»

AJAX ตัวอย่างอธิบาย

HTML หน้า

<!DOCTYPE html>
<html>
<body>

<div id="demo">
  <h2>Let AJAX change this text</h2>
  <button type="button" onclick="loadDoc()">Change Content</button>
</div>

</body>
</html>

หน้า HTML มี <div> ส่วนและ <button>

<div> ส่วนที่ใช้ในการแสดงข้อมูลจากเซิร์ฟเวอร์

<button> เรียกฟังก์ชั่น (ถ้ามีการคลิก)

ฟังก์ชั่นการร้องขอข้อมูลจากเว็บเซิร์ฟเวอร์และแสดง:

ฟังก์ชั่น loadDoc()

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_info.txt", true);
  xhttp.send();
}

สิ่งที่คุณควรรู้แล้ว

ก่อนที่คุณจะดำเนินการต่อไปคุณควรมีความเข้าใจพื้นฐานต่อไปนี้:

  • HTML
  • JavaScript

หากคุณต้องการที่จะศึกษาวิชาเหล่านี้แรกพบบทเรียนเกี่ยวกับเรา หน้าแรก

คืออะไร AJAX ?

AJAX = Asynchronous JavaScript และ XML

AJAX เป็นชื่อที่ทำให้เข้าใจผิด การใช้งาน AJAX อาจใช้ XML เพื่อส่งข้อมูล แต่มันก็เป็นเรื่องธรรมดาที่เท่าเทียมกันในการส่งข้อมูลเป็นข้อความธรรมดาหรือข้อความ JSON

AJAX เป็นเทคนิคสำหรับการสร้างแบบไดนามิกได้อย่างรวดเร็วและหน้าเว็บ

AJAX ช่วยให้หน้าเว็บได้รับการปรับปรุงแบบไม่พร้อมกันโดยการแลกเปลี่ยนข้อมูลจำนวนน้อยกับเซิร์ฟเวอร์อยู่เบื้องหลัง ซึ่งหมายความว่ามันเป็นไปได้ในการปรับปรุงในส่วนของหน้าเว็บโดยไม่ต้องโหลดทั้งหน้า

หน้าเว็บคลาสสิก (ซึ่งไม่ได้ใช้ AJAX) ต้องโหลดทั้งหน้าถ้าเนื้อหาควรเปลี่ยน

ตัวอย่างของการใช้งานใช้ AJAX: Google Maps, Gmail, YouTube และ Facebook

วิธี AJAX ธิการ

AJAX

AJAX เป็นไปตามมาตรฐานอินเทอร์เน็ต

AJAX เป็นไปตามมาตรฐานอินเทอร์เน็ตและใช้การรวมกันของ:

  • XMLHttpRequest วัตถุ (เพื่อดึงข้อมูลจากเว็บเซิร์ฟเวอร์)
  • JavaScript/DOM (เพื่อแสดง / ใช้ข้อมูล)

XMLHttpRequest เป็นชื่อที่ทำให้เข้าใจผิด คุณไม่จำเป็นต้องเข้าใจ XML เพื่อใช้ AJAX

Google Suggest

AJAX ถูกทำให้เป็นที่นิยมในปี 2005 โดย Google ด้วย Google Suggest

Google Suggest ใช้ AJAX เพื่อสร้างอินเตอร์เฟซเว็บแบบไดนามิกมาก: เมื่อคุณเริ่มพิมพ์ในช่องค้นหาของ Google เป็น JavaScript ส่งจดหมายออกไปยังเซิร์ฟเวอร์และเซิร์ฟเวอร์กลับรายการของข้อเสนอแนะ

เริ่มต้นใช้ Ajax วันนี้

AJAX เป็นไปตามมาตรฐานที่มีอยู่ มาตรฐานเหล่านี้ได้ถูกนำมาใช้โดยนักพัฒนาเป็นเวลาหลายปี อ่านบทต่อไปของเราเพื่อดูว่ามันทำงาน!


❮ก่อนหน้า ถัดไปบท❯