อาแจ็กซ์ (การเขียนโปรแกรม)

จากวิกิพีเดีย สารานุกรมเสรี
ข้ามไปที่การนำทาง ข้ามไปที่การค้นหา

JavaScript แบบอะซิงโครนัสและ XML
ปรากฏตัวครั้งแรกมีนาคม 2542
นามสกุลไฟล์.js
รูปแบบไฟล์JavaScript
ได้รับอิทธิพลจาก
JavaScriptและXML

Ajax (เช่นAJAX / ˈ eɪ æ k s / ; ย่อมาจาก " Asynchronous JavaScript and XML ") [1] [2]เป็นชุดของ เทคนิค การพัฒนาเว็บที่ใช้เทคโนโลยีเว็บต่างๆ ในฝั่งไคลเอ็นต์เพื่อสร้างเว็บแอปพลิเคชัน แบบอะซิงโครนัส . ด้วย Ajax เว็บแอปพลิเคชันสามารถส่งและดึงข้อมูลจากเซิร์ฟเวอร์ ได้แบบอะซิงโครนัส (ในพื้นหลัง) โดยไม่รบกวนการแสดงผลและการทำงานของหน้าที่มีอยู่ ด้วยการแยกเลเยอร์การแลกเปลี่ยนข้อมูลจากเลเยอร์การนำเสนอ Ajax อนุญาตให้หน้าเว็บและโดยส่วนขยาย เว็บแอปพลิเคชัน เปลี่ยนเนื้อหาแบบไดนามิกโดยไม่จำเป็นต้องโหลดซ้ำทั้งหน้า [3]ในทางปฏิบัติ การใช้งานสมัยใหม่มักใช้JSONแทน XML

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

ประวัติ

ในช่วงต้นถึงกลางปี ​​1990 เว็บไซต์ส่วนใหญ่ใช้หน้า HTML ที่สมบูรณ์ การดำเนินการของผู้ใช้แต่ละครั้งจำเป็นต้องมีหน้าใหม่ที่สมบูรณ์เพื่อโหลดจากเซิร์ฟเวอร์ กระบวนการนี้ไม่มีประสิทธิภาพ ซึ่งสะท้อนให้เห็นจากประสบการณ์ของผู้ใช้: เนื้อหาของหน้าทั้งหมดหายไป จากนั้นหน้าใหม่ก็ปรากฏขึ้น ทุกครั้งที่เบราว์เซอร์โหลดหน้าใหม่เนื่องจากมีการเปลี่ยนแปลงบางส่วน เนื้อหาทั้งหมดจะต้องถูกส่งใหม่ แม้ว่าจะมีการเปลี่ยนแปลงเพียงข้อมูลบางส่วนเท่านั้น สิ่งนี้ทำให้โหลดเพิ่มเติมบนเซิร์ฟเวอร์และทำให้แบนด์วิดธ์เป็นปัจจัยจำกัดประสิทธิภาพ

ในปี 1996 Internet Explorerเปิดตัวแท็กiframe ; เช่นเดียวกับ องค์ประกอบ อ็อบเจ็กต์มันสามารถโหลดหรือดึงเนื้อหาแบบอะซิงโครนัส ในปี 1998 ทีมงาน Microsoft Outlook Web Accessได้พัฒนาแนวคิดเบื้องหลังอ็อบเจกต์สคริปต์XMLHttpRequest [4] ปรากฏเป็น XMLHTTP ใน ไลบรารีMSXMLรุ่นที่สอง[4] [5]ซึ่งมาพร้อมกับInternet Explorer 5.0ในเดือนมีนาคม 2542 [6]

การทำงานของตัวควบคุม Windows XMLHTTP ActiveXใน IE 5 ถูกนำมาใช้ในภายหลังโดยMozilla Firefox , Safari , Opera , Google Chromeและเบราว์เซอร์อื่นๆ เป็นวัตถุ XMLHttpRequest JavaScript [7] Microsoft นำโมเดล XMLHttpRequest ดั้งเดิมมาใช้ในInternet Explorer 7 เวอร์ชัน ActiveX ยังคงรองรับใน Internet Explorer แต่ไม่รองรับในMicrosoft Edge ยูทิลิตี้ของคำขอ HTTPพื้นหลังเหล่านี้และเทคโนโลยีเว็บแบบอะซิงโครนัสยังคงคลุมเครืออยู่พอสมควรจนกระทั่งเริ่มปรากฏในแอปพลิเคชันออนไลน์ขนาดใหญ่ เช่น Outlook Web Access (2000) [8]และโพสต์ แปลก (2002).

Google ได้ปรับใช้ Ajax ข้ามเบราว์เซอร์ที่เป็นไปตามมาตรฐานในวงกว้าง กับ Gmail (2004) และGoogle Maps (2005) [9]ในเดือนตุลาคม พ.ศ. 2547 Kayak.comเปิดตัวเบต้าสาธารณะเป็นหนึ่งในอีคอมเมิร์ซขนาดใหญ่กลุ่มแรกที่ใช้สิ่งที่นักพัฒนาของพวกเขาในเวลานั้นเรียกว่า "สิ่ง xml http" [10]สิ่งนี้เพิ่มความสนใจใน Ajax ในหมู่นักพัฒนาโปรแกรมเว็บ

คำว่าAJAXถูกใช้ต่อสาธารณะเมื่อวันที่ 18 กุมภาพันธ์ พ.ศ. 2548 โดยJesse James Garrettในบทความชื่อAjax: A New Approach to Web Applicationsโดยอิงตามเทคนิคที่ใช้ใน Google เพจ [1]

เมื่อวันที่ 5 เมษายน พ.ศ. 2549 World Wide Web Consortium (W3C) ได้เผยแพร่ข้อกำหนดฉบับร่างฉบับแรกสำหรับอ็อบเจ็กต์ XMLHttpRequest เพื่อพยายามสร้างมาตรฐานเว็บ อย่างเป็น ทางการ [11] ร่างล่าสุดของอ็อบเจ็กต์ XMLHttpRequest เผยแพร่เมื่อวันที่ 6 ตุลาคม พ.ศ. 2559 [12]และข้อกำหนด XMLHttpRequest ได้กลายเป็น มาตรฐาน การครองชีพ [13]

เทคโนโลยี

โมเดลทั่วไปสำหรับWeb Applicationเทียบกับแอปพลิเคชันที่ใช้ Ajax

คำว่าAjaxมาเพื่อเป็นตัวแทนของกลุ่มเทคโนโลยีเว็บกว้างๆ ที่สามารถนำมาใช้เพื่อใช้งานเว็บแอปพลิเคชันที่สื่อสารกับเซิร์ฟเวอร์ในเบื้องหลัง โดยไม่รบกวนสถานะปัจจุบันของเพจ ในบทความที่สร้างคำว่า Ajax [1] [3] Jesse James Garrett อธิบายว่าเทคโนโลยีต่อไปนี้ถูกรวมเข้าไว้ด้วยกัน:

  • HTML (หรือXHTML ) และCSSสำหรับการนำเสนอ
  • Document Object Model (DOM) สำหรับ การแสดงผลแบบไดนามิกและการโต้ตอบกับ data
  • JSONหรือXMLสำหรับการแลกเปลี่ยนข้อมูล และXSLTสำหรับการจัดการ XML
  • อ อบเจ็กต์ XMLHttpRequestสำหรับการสื่อสารแบบอะซิงโครนัส
  • JavaScriptเพื่อนำเทคโนโลยีเหล่านี้มารวมกัน

อย่างไรก็ตาม ตั้งแต่นั้นมา มีการพัฒนาเทคโนโลยีจำนวนมากที่ใช้ในแอปพลิเคชัน Ajax และในคำจำกัดความของคำว่า Ajax เอง XML ไม่จำเป็นสำหรับการแลกเปลี่ยนข้อมูลอีกต่อไป ดังนั้น XSLT จึงไม่มีความจำเป็นสำหรับการจัดการข้อมูลอีกต่อไป JavaScript Object Notation (JSON) มักใช้เป็นรูปแบบทางเลือกสำหรับการแลกเปลี่ยนข้อมูล[14]แม้ว่ารูปแบบอื่นๆ เช่น HTML ที่จัดรูปแบบไว้ล่วงหน้าหรือข้อความธรรมดาก็สามารถใช้ได้ [15]ไลบรารี JavaScript ยอดนิยมที่หลากหลาย รวมถึง JQuery รวมถึง abstractions เพื่อช่วยในการดำเนินการตามคำขอ Ajax

ตัวอย่าง

ตัวอย่างจาวาสคริปต์

ตัวอย่างคำขอ Ajax อย่างง่ายโดยใช้ วิธี GETซึ่งเขียนด้วย JavaScript

รับ-ajax-data.js:

// นี่คือสคริปต์ฝั่งไคลเอ็นต์

// เริ่มต้นคำขอ HTTP 
ให้ xhr  =  XMLHttpRequest ใหม่ (); // กำหนดคำขอxhr เปิด( 'GET' , 'send-ajax-data.php' );

 

// ติดตามการเปลี่ยนแปลงสถานะของคำขอ 
. onreadystatechange  =  ฟังก์ชัน ()  { 
	const  DONE  =  4 ;  // readyState 4 หมายถึงคำขอเสร็จสิ้น 
	const  ตกลง =  200 ;  // สถานะ 200 คือผลตอบแทนที่ประสบความสำเร็จ 
	if  ( xhr . readyState  ===  DONE )  { 
		if  ( xhr . status  ===  OK )  { 
			คอนโซล_ บันทึก( xhr . ข้อความตอบกลับ); // 'นี่คือผลลัพธ์' 
		}  อื่น ๆ { 
			คอนโซล. บันทึก( 'ข้อผิดพลาด: '  +  xhr . สถานะ);  // เกิดข้อผิดพลาดระหว่างการร้องขอ 
		} 
	} 
};

// ส่งคำขอเพื่อ send-ajax- 
data.php xhr ส่ง( null );

send-ajax-data.php:

<?php 
// นี่คือสคริปต์ฝั่งเซิร์ฟเวอร์

// กำหนดประเภทเนื้อหา 
ส่วนหัว( 'ประเภทเนื้อหา: ข้อความ/ธรรมดา' );

// ส่งข้อมูลกลับ 
echo  "นี่คือผลลัพธ์" ; 
?>

ดึงตัวอย่าง

การดึงข้อมูลเป็น JavaScript API ดั้งเดิมแบบใหม่ [16]ตามเอกสารสำหรับนักพัฒนาซอฟต์แวร์ของ Google "การดึงข้อมูลช่วยให้ส่งคำขอเว็บและจัดการการตอบกลับได้ง่ายกว่า XMLHttpRequest รุ่นเก่า"

ดึงข้อมูล( 'send-ajax-data.php ' ) 
    จากนั้น( data => console . log ( data ) ) จับ( error => console . log ( 'Error:' + error ));  
         

ตัวอย่าง async ของ ES7 / รอ

 ฟังก์ชัน async doAjax1 ()  { 
    ลอง { 
        const  res  =  รอ ดึงข้อมูล( 'send-ajax-data.php' ); 
        ข้อมูลconst  = รอres _ ข้อความ(); คอนโซล_ บันทึก( ข้อมูล); } จับ( ผิดพลาด) { คอนโซล. บันทึก( 'ข้อผิดพลาด:' + ข้อผิดพลาด); } }   
        
       
          
    


doAjax1 ();

การดึงข้อมูลอาศัยJavaScript สัญญา

ข้อมูลfetchจำเพาะแตกต่างจากAjaxในวิธีที่สำคัญดังต่อไปนี้:

  • Promise ที่ส่งคืนจากfetch() จะไม่ปฏิเสธสถานะข้อผิดพลาด HTTPแม้ว่าการตอบสนองจะเป็น HTTP 404 หรือ 500 แทน ทันทีที่เซิร์ฟเวอร์ตอบสนองด้วยส่วนหัว Promise จะแก้ไขตามปกติ (โดยokตั้งค่าคุณสมบัติของการตอบกลับเป็น false หาก การตอบสนองไม่อยู่ในช่วง 200–299) และจะปฏิเสธเฉพาะเมื่อเครือข่ายขัดข้องหรือหากมีสิ่งใดที่ทำให้คำขอไม่สำเร็จ
  • fetch() จะไม่ส่งคุกกี้ข้ามที่มาเว้นแต่คุณจะตั้งค่า ตัว เลือก init ข้อมูลประจำ ตัว (ตั้งแต่เดือนเมษายน 2018 ข้อมูลจำเพาะได้เปลี่ยนนโยบายข้อมูลรับรองเริ่มต้นเป็นsame-origin. Firefox เปลี่ยนตั้งแต่ 61.0b13)

ดูเพิ่มเติม

อ้างอิง

  1. อรรถเป็น c เจสซี่ เจมส์ การ์เร็ตต์ (18 กุมภาพันธ์ พ.ศ. 2548) "Ajax: แนวทางใหม่สำหรับเว็บแอปพลิเคชัน " AdaptivePath.com เก็บถาวรจากต้นฉบับเมื่อ 10 กันยายน 2558 . สืบค้นเมื่อ19 มิถุนายน 2551 .
  2. ^ "Ajax - คู่มือนักพัฒนาเว็บ" . เอกสาร เว็บMDN เก็บถาวรจากต้นฉบับเมื่อ 28 กุมภาพันธ์ 2018 . สืบค้นเมื่อ27 กุมภาพันธ์ 2018 .
  3. a b Ullman, Chris (มีนาคม 2550). เริ่ม อาแจ็กซ์ . ผิด ISBN 978-0-170-10675-4. เก็บถาวรจากต้นฉบับเมื่อ 5 กรกฎาคม 2551 . สืบค้นเมื่อ24 มิถุนายน 2551 .
  4. ^ a b "บทความเกี่ยวกับประวัติของ XMLHTTP โดยนักพัฒนาดั้งเดิม" . อเล็กช๊อปแมนน์.com 31 มกราคม 2550 เก็บถาวรจากต้นฉบับเมื่อ 23 มิถุนายน 2550 . สืบค้นเมื่อ14 กรกฎาคม 2552 .
  5. ^ "ข้อกำหนดของอินเทอร์เฟซ IXMLHTTPRequest จาก Microsoft Developer Network " Msdn.microsoft.com. เก็บถาวรจากต้นฉบับเมื่อ 26 พฤษภาคม 2559 . สืบค้นเมื่อ14 กรกฎาคม 2552 .
  6. ^ Dutta, Sunava (23 มกราคม 2549). "วัตถุ XMLHTTPRequest ดั้งเดิม " IEBlog _ ไมโครซอฟต์. เก็บถาวรจากต้นฉบับเมื่อ 6 มีนาคม 2553 . สืบค้นเมื่อ30 พฤศจิกายน 2549 .
  7. ^ "Dynamic HTML และ XML: วัตถุ XMLHttpRequest " Apple Inc. เก็บถาวรจากต้นฉบับเมื่อวันที่ 9 พฤษภาคม2551 สืบค้นเมื่อ25 มิถุนายน 2551 .
  8. ^ ฮอปมันน์, อเล็กซ์. "เรื่องราวของ XMLHTTP " บล็อก ของAlex Hopmann เก็บถาวรจากต้นฉบับเมื่อ 30 มีนาคม 2553 . สืบค้นเมื่อ17 พฤษภาคม 2010 .
  9. ^ "ประวัติโดยย่อของอาแจ็กซ์" . อารอน สวาร์ตซ์. 22 ธันวาคม 2548 เก็บถาวรจากต้นฉบับเมื่อ 3 มิถุนายน 2553 . สืบค้นเมื่อ4 สิงหาคม 2552 .
  10. ^ English, Paul (12 เมษายน 2549). "อินเทอร์เฟซผู้ใช้เรือคายัค" . Kayak.com Technoblog อย่างเป็นทางการ เก็บถาวรจากต้นฉบับเมื่อ 23 พฤษภาคม 2557 . สืบค้นเมื่อ22 พฤษภาคม 2557 .
  11. ฟาน เคสเตอเรน, แอนน์; แจ็กสัน ดีน (5 เมษายน 2549) "วัตถุ XMLHttpRequest " W3.org . สมาคมเวิลด์ไวด์เว็บ เก็บถาวรจากต้นฉบับเมื่อ 16 พฤษภาคม 2551 . สืบค้นเมื่อ25 มิถุนายน 2551 .
  12. ^ เคสเตอเรน แอนน์; โอเบิร์ก, จูเลียน; เพลง จองกี; สตีน, Hallvord RM "XMLHttpRequest ระดับ 1 " W3.org . W3C. เก็บถาวรจากต้นฉบับเมื่อ 13 กรกฎาคม 2017 . สืบค้นเมื่อ19 กุมภาพันธ์ 2019 .
  13. ^ "XMLHttpRequest มาตรฐาน" . xhr.spec.whatwg.org _ สืบค้นเมื่อ21 เมษายน 2020 .
  14. ^ "สัญ กรณ์วัตถุ JavaScript" อาปาเช่.org เก็บถาวรจากต้นฉบับเมื่อ 16 มิถุนายน 2551 . สืบค้นเมื่อ4 กรกฎาคม 2551 .
  15. ^ "เร่งความเร็วแอปที่ใช้ Ajax ของคุณด้วย JSON " DevX.com เก็บถาวรจากต้นฉบับเมื่อ 4 กรกฎาคม 2551 . สืบค้นเมื่อ4 กรกฎาคม 2551 .
  16. ^ "ดึงข้อมูล API - เว็บ API" . เอ็ มดีเอ็น . เก็บถาวรจากต้นฉบับเมื่อ 29 พฤษภาคม 2019 . สืบค้นเมื่อ30 พฤษภาคม 2019 .

ลิงค์ภายนอก