AJAX ทำงานอย่างไร?

Question 1

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

ฉันสามารถรับพฤติกรรมนี้ได้โดยใช้ไอโซเฟรม ในรายละเอียดเพิ่มเติมฉันใส่ลิงค์ (สมมติว่าเป็นภาพขนาดเล็ก) ใน isoframe ขนาดเล็ก เมื่อผู้ใช้คลิกลิงก์นี้เบราว์เซอร์จะโหลดเฉพาะเพจใน isoframe อีกครั้ง

อย่างไรก็ตามฉันคิดว่ามันไม่ใช่วิธีที่สวยหรูในการไปถึงเป้าหมาย คิดว่าต้องใช้ AJAX มันทำงานอย่างไร? การใช้ XHTML สามารถแก้ปัญหาที่พิจารณาได้อย่างสวยงามหรือไม่? หรือฉันต้องใช้ JavaScripts?

ฉันไม่ต้องการอะไรมาก ฉันแค่ต้องการมีลิงค์เล็ก ๆ ซึ่ง (หลังจากคลิก) ส่งข้อมูลบางอย่างไปยังเซิร์ฟเวอร์ สมมติว่าฉันมี "รูปดารา" อยู่ใกล้ข้อความ หากผู้ใช้คลิกที่ดาว (เขา / เธอชอบข้อความ) ดาวจะเปลี่ยนสีและฐานข้อมูลการอัปเดตเซิร์ฟเวอร์ของฉัน (เพื่อจำไว้ว่าผู้ใช้ชอบข้อความนั้น)

Question 2

หากคุณยังใหม่กับ AJAX (ซึ่งย่อมาจาก Asynchronous Javascript และ XML) รายการAJAXบนวิกิพีเดียเป็นจุดเริ่มต้นที่ดี:

เช่นเดียวกับ DHTML และ LAMP AJAX ไม่ใช่เทคโนโลยีในตัวเอง แต่เป็นกลุ่มของเทคโนโลยี AJAX ใช้การรวมกันของ:

HTML และ CSS สำหรับทำเครื่องหมายและจัดรูปแบบข้อมูล

DOM ที่เข้าถึงด้วย JavaScript เพื่อแสดงและโต้ตอบกับข้อมูลที่นำเสนอแบบไดนามิก

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

รูปแบบสำหรับข้อมูลที่ส่งไปยังเบราว์เซอร์ รูปแบบทั่วไป ได้แก่ XML, HTML ที่จัดรูปแบบไว้ล่วงหน้า, ข้อความธรรมดาและ JavaScript Object Notation (JSON) ข้อมูลนี้สามารถสร้างแบบไดนามิกโดยใช้สคริปต์ฝั่งเซิร์ฟเวอร์บางรูปแบบ

อย่างที่คุณเห็นจากมุมมองทางเทคโนโลยีที่บริสุทธิ์ไม่มีอะไรใหม่จริงๆที่นี่ ชิ้นส่วน AJAX ส่วนใหญ่มีอยู่แล้วในปี 1994 (1999 สำหรับXMLHttpRequestวัตถุ) ความแปลกใหม่ที่แท้จริงคือการใช้ชิ้นส่วนเหล่านี้ร่วมกันเหมือนกับที่ Google ทำกับ GMail (2004) และ Google Maps (2005) อันที่จริงทั้งสองไซต์มีส่วนอย่างมากในการส่งเสริม AJAX

ภาพที่มีมูลค่าหนึ่งพันคำด้านล่างแผนผังที่แสดงการสื่อสารระหว่างไคลเอนต์และเซิร์ฟเวอร์ระยะไกลรวมถึงความแตกต่างระหว่างแอปพลิเคชันแบบคลาสสิกและแอปพลิเคชันที่ขับเคลื่อนด้วย AJAX:

ข้อความแสดงแทน

สำหรับส่วนสีส้มคุณสามารถทำทุกอย่างด้วยมือ (ด้วยXMLHttpRequestวัตถุ) หรือคุณสามารถใช้ไลบรารี JavaScript ที่มีชื่อเสียงเช่นjQuery , Prototype , YUIฯลฯ เพื่อ "AJAXify" ในฝั่งไคลเอ็นต์ของแอปพลิเคชันของคุณ ไลบรารีดังกล่าวมีจุดมุ่งหมายเพื่อซ่อนความซับซ้อนของการพัฒนา JavaScript (เช่นความเข้ากันได้ของข้ามเบราว์เซอร์) แต่อาจจะมากเกินไปสำหรับคุณลักษณะง่ายๆ

ในฝั่งเซิร์ฟเวอร์เฟรมเวิร์กบางส่วนสามารถช่วยได้เช่นกัน (เช่นDWRหรือRAJAXหากคุณใช้ Java) แต่สิ่งที่คุณต้องทำก็คือการเปิดเผยบริการที่ส่งคืนเฉพาะข้อมูลที่จำเป็นเพื่ออัปเดตหน้าบางส่วน (เริ่มต้นเป็น XML / XHTML - X ใน AJAX - แต่JSONมักเป็นที่ต้องการในปัจจุบัน)

Question 3

สาระสำคัญของ AJAX คือ:

หน้าเว็บของคุณสามารถเรียกดูเว็บและปรับปรุงเนื้อหาของตัวเองในขณะที่ผู้ใช้จะทำสิ่งอื่น ๆ

นั่นคือจาวาสคริปต์ของคุณสามารถส่งคำขอ GET และ POST แบบอะซิงโครนัสได้ (โดยปกติจะส่งผ่านXMLHttpRequestอ็อบเจ็กต์) จากนั้นใช้ผลลัพธ์ของคำร้องขอเหล่านั้นเพื่อแก้ไขเพจ (ผ่านการจัดการDocument Object Model )

Question 4

โดยทั่วไป AJAX เกี่ยวข้องกับการส่งคำขอ HTTP จากไคลเอนต์ไปยังเซิร์ฟเวอร์และประมวลผลการตอบสนองของเซิร์ฟเวอร์โดยไม่ต้องโหลดซ้ำทั้งหน้า (อะซิงโครนัส).

โดยทั่วไป Javascript จะทำการส่งและรับข้อมูลตอบกลับจากเซิร์ฟเวอร์ (โดยทั่วไป XML มักจะเป็นรูปแบบที่ละเอียดน้อยเช่น JSON)

จากนั้น Javascript อาจอัปเดตเพจ DOM แบบไดนามิกเพื่ออัปเดตมุมมองของผู้ใช้

ดังนั้น 'Asychronous Javascript และ XML'

มีตัวเลือกอื่น ๆ ในการอัปเดตมุมมองของผู้ใช้โดยไม่ต้องโหลดหน้าเว็บซ้ำเช่น Flash และ Applets แต่สิ่งเหล่านี้ไม่ได้เป็นวิธีแก้ปัญหาที่ดีสำหรับกรณีของคุณ ดูเหมือนว่า Javascript เป็นวิธีที่จะไป มีการสนับสนุนไลบรารีที่ดีมากมายเช่นjQueryที่ใช้บนไซต์นี้ดังนั้นคุณจึงไม่จำเป็นต้องเขียน Javascript ด้วยตัวเองมากนัก

Question 5

Ajax เป็นมากกว่าการโหลดซ้ำเพียงบางส่วนของหน้า Ajax ย่อมาจาก Asynchronous Javascript และ Xml

ส่วนเดียวของ Ajax ที่คุณต้องการคือวัตถุXMLHttpRequestจากจาวาสคริปต์ คุณต้องใช้มันเพื่อโหลดและรีโหลดส่วนเล็ก ๆ ของ html ของคุณเป็น div หรือแท็กอื่น ๆ

อ่านตัวอย่างนั้นแล้วคุณจะเป็นมือโปรเร็วอย่างที่คิด!

<html>
<body>

<script type="text/javascript">
function ajaxFunction()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  {
  // code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
else
  {
  alert("Your browser does not support XMLHTTP!");
  }
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4)
  {
  document.myForm.time.value=xmlhttp.responseText;
  }
}
xmlhttp.open("GET","time.asp",true);
xmlhttp.send(null);
}
</script>

<form name="myForm">
Name: <input type="text" name="username" onkeyup="ajaxFunction();" />
Time: <input type="text" name="time" />
</form>

</body>
</html>

Question 6

AJAX ย่อมาจาก Asynchronous Javascript และ XML AJAX รองรับการอัปเดตเพจบางส่วนโดยไม่ต้องโพสต์ทั้งเพจกลับไปที่เซิร์ฟเวอร์

มีตัวเลือกมากมายสำหรับ AJAX สองสิ่งที่น่าสังเกตที่สุด (เนื้อหา) คือ ASP.NET AJAX ของ Microsoft (เดิมชื่อ Atlas) และ jQuery

ASP.NET AJAX นั้นค่อนข้างง่ายในการตั้งค่าหากคุณคุ้นเคยกับ ASP.NET อยู่แล้ว jQuery เป็นสิ่งที่ดีหากคุณรู้จัก javascript อยู่แล้วและช่วยให้สามารถควบคุมการสืบค้นและการอัปเดตเพจของคุณได้อย่างละเอียด

HTH

Question 7

หากคุณสนใจ IBM มีชุดพาร์ท 10 (อาจมากกว่านั้น) ใน Ajax: Mastering Ajax ตอนที่ 1

แม้ว่าตอนนี้จะอายุไม่กี่ขวบ แต่ก็เป็นบทนำที่ดี (แม้ว่าคุณจะเพิ่งอ่านตอนแรกก็ตาม!)

ฉันคิดว่าซีรีส์ทั้งหมดควรอยู่ในรายการที่นี่แม้ว่าไซต์จะค่อนข้างช้าสำหรับฉันในขณะนี้ ...

สรุป:

Ajax ซึ่งประกอบด้วยเทคโนโลยี HTML, JavaScript ™, DHTML และ DOM เป็นแนวทางที่โดดเด่นที่ช่วยให้คุณเปลี่ยนอินเทอร์เฟซเว็บที่ไม่เป็นระเบียบเป็นแอปพลิเคชัน Ajax แบบโต้ตอบ ผู้เขียนซึ่งเป็นผู้เชี่ยวชาญของ Ajax ได้แสดงให้เห็นว่าเทคโนโลยีเหล่านี้ทำงานร่วมกันอย่างไรตั้งแต่ภาพรวมไปจนถึงรูปลักษณ์โดยละเอียดเพื่อให้การพัฒนาเว็บที่มีประสิทธิภาพอย่างมากกลายเป็นเรื่องง่าย นอกจากนี้เขายังเปิดเผยแนวคิดหลักของ Ajax รวมถึงวัตถุ XMLHttpRequest

Question 8

นั่นคืออาแจ็กซ์ คุณไม่สามารถใช้ ajax โดยไม่ใช้จาวาสคริปต์ คุณควรดู jquery และตัวอย่างต้นแบบเพื่อรับแนวคิดในการใช้งาน

Question 9

สิ่งที่คุณพยายามทำคืออาแจ็กซ์ในทางเทคนิค Ajax สร้างธุรกรรมแฟรกเมนต์ xhtml เพื่ออัพเดตส่วนของเพจ Javascript ทำให้การร้องขอเหล่านี้ดูดีและเรียบร้อย