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

เว็บเพจไดนามิกฝั่งเซิร์ฟเวอร์คือเว็บเพจที่การสร้างถูกควบคุมโดยเซิร์ฟเวอร์แอปพลิเคชันที่ประมวลผลสคริปต์ฝั่ง เซิร์ฟเวอร์ ^{[ 1 ]}ในการเขียนสคริปต์ฝั่งเซิร์ฟเวอร์พารามิเตอร์จะกำหนดวิธีการประกอบเว็บเพจ ใหม่แต่ละหน้า รวมถึงการตั้งค่าการประมวลผลฝั่งไคลเอ็นต์เพิ่มเติม

เว็บเพจแบบไดนามิกฝั่งไคลเอ็นต์จะประมวลผลเว็บเพจโดยใช้JavaScriptที่ทำงานในเบราว์เซอร์ขณะที่กำลังโหลด JavaScript สามารถโต้ตอบกับเว็บเพจผ่านทางDocument Object Model (DOM) เพื่อสอบถามสถานะของเว็บเพจและแก้ไขได้ แม้ว่าเว็บเพจจะเป็นแบบไดนามิกฝั่งไคลเอ็นต์ แต่ก็ยังสามารถโฮสต์บนบริการโฮสติ้ง แบบคงที่ เช่นGitHub PagesหรือAmazon S3ได้ ตราบใดที่ไม่มีโค้ดฝั่งเซิร์ฟเวอร์รวมอยู่ด้วย

จากนั้นผู้ใช้หรือโปรแกรมคอมพิวเตอร์จะโหลดหน้าเว็บแบบไดนามิกใหม่เพื่อเปลี่ยนเนื้อหาตัวแปรบางอย่าง ข้อมูลที่อัปเดตอาจมาจากเซิร์ฟเวอร์หรือจากการเปลี่ยนแปลงที่เกิดขึ้นกับ DOM ของหน้านั้น ซึ่งอาจตัดประวัติการเรียกดูหรือสร้างเวอร์ชันที่บันทึกไว้เพื่อย้อนกลับหรือไม่ก็ได้ แต่การอัปเดตหน้าเว็บแบบไดนามิกโดยใช้ เทคโนโลยี AJAXจะไม่สร้างหน้าที่จะย้อนกลับหรือตัดประวัติการเรียกดูเว็บก่อนหน้าหน้าที่แสดง การใช้ AJAX ทำให้ ผู้ใช้ ปลายทาง ได้รับหน้าเว็บแบบไดนามิกหนึ่งหน้าซึ่งจัดการเป็นหน้าเดียวในเว็บเบราว์เซอร์ ในขณะที่ เนื้อหาเว็บจริงที่แสดงบนหน้านั้นอาจแตกต่างกันไป เอ็นจิ้น AJAX ทำงานอยู่บนเบราว์เซอร์เท่านั้น โดยร้องขอส่วนต่างๆ ของ DOM สำหรับไคลเอ็นต์จากเซิร์ฟเวอร์แอปพลิเคชัน เซิร์ฟเวอร์แอปพลิเคชันเฉพาะอาจมีอิน เทอร์เฟซแบบ REST มาตรฐาน เพื่อให้บริการแก่เว็บแอปพลิเคชัน^{[ 2 ]}

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

การนำทาง ไฮเปอร์เท็กซ์แบบดั้งเดิมโดยใช้HTMLหรือXHTMLเพียงอย่างเดียว จะให้เนื้อหาแบบ "คงที่" ซึ่งหมายความว่าผู้ใช้ร้องขอหน้าเว็บและเพียงแค่ดูหน้าเว็บและข้อมูลบนหน้านั้น

อย่างไรก็ตาม หน้าเว็บยังสามารถมอบประสบการณ์การใช้งานแบบ "สด" "ไดนามิก" หรือ "โต้ตอบได้" เนื้อหา (ข้อความ รูปภาพ ช่องกรอกแบบฟอร์ม ฯลฯ) บนหน้าเว็บสามารถเปลี่ยนแปลงได้ตามบริบทหรือเงื่อนไขต่างๆ

มีสองวิธีในการสร้างเอฟเฟ็กต์แบบนี้:

• การใช้สคริปต์ฝั่งไคลเอ็นต์เพื่อเปลี่ยนแปลงพฤติกรรมของอินเทอร์เฟซภายในหน้าเว็บเฉพาะโดยตอบสนองต่อการกระทำของเมาส์หรือแป้นพิมพ์ ข้อมูลที่ได้รับจากเว็บ APIเว็บซ็อกเก็ตหรือเหตุการณ์ตามเวลาที่กำหนด ในกรณีนี้ พฤติกรรมแบบไดนามิกจะเกิดขึ้นภายในส่วนแสดงผล
• การใช้สคริปต์ฝั่งเซิร์ฟเวอร์เพื่อเปลี่ยนซอร์สโค้ดของหน้าเว็บที่ให้มาระหว่างหน้าต่างๆ การปรับลำดับหรือการโหลดซ้ำของหน้าเว็บหรือเนื้อหาเว็บที่ส่งไปยังเบราว์เซอร์ การตอบสนองของเซิร์ฟเวอร์อาจถูกกำหนดโดยเงื่อนไขต่างๆ เช่น ข้อมูลในแบบฟอร์ม HTML ที่ส่งมา พารามิเตอร์ในURLประเภทของเบราว์เซอร์ที่ใช้ ระยะเวลา หรือสถานะ ของฐานข้อมูล หรือ เซิร์ฟเวอร์ ^{[ 3 ]}

เว็บเพจที่ใช้สคริปต์ฝั่งไคลเอ็นต์ต้องใช้เทคโนโลยีการนำเสนอที่เรียกว่าหน้าเว็บที่มีอินเทอร์เฟซที่ หลากหลาย (rich interfaced pages ) ภาษาเขียนสคริปต์ฝั่งไคลเอ็นต์ เช่นJavaScriptหรือActionScriptซึ่งใช้สำหรับ เทคโนโลยี Dynamic HTML (DHTML) และFlashตามลำดับ มักถูกใช้เพื่อจัดการสื่อประเภทต่างๆ (เสียง ภาพเคลื่อนไหว ข้อความที่เปลี่ยนแปลง ฯลฯ) ในการนำเสนอ การเขียนสคริปต์ยังอนุญาตให้ใช้การเขียนสคริปต์ระยะไกลซึ่งเป็นเทคนิคที่หน้า DHTML ร้องขอข้อมูลเพิ่มเติมจากเซิร์ฟเวอร์โดยใช้เฟรมที่ซ่อนอยู่ XMLHttpRequests หรือเว็บเซอร์วิสนอกจากนี้ยังสามารถใช้เฟรมเวิร์กเว็บเพื่อสร้างเว็บ APIซึ่งไคลเอ็นต์ใช้ JavaScript ในการรับข้อมูลและเปลี่ยนแปลงลักษณะหรือพฤติกรรมแบบไดนามิกตามข้อมูลได้

เว็บเพจที่ใช้การเขียนสคริปต์ฝั่งเซิร์ฟเวอร์ มักถูกสร้างขึ้นโดยใช้ ภาษา ฝั่งเซิร์ฟเวอร์เช่นPHP , Perl , ASP , JSP , ColdFusionและภาษาอื่นๆ ภาษาฝั่งเซิร์ฟเวอร์เหล่านี้มักใช้Common Gateway Interface (CGI) เพื่อสร้างเว็บเพจแบบไดนามิก เว็บเพจประเภทนี้ยังสามารถใช้แบบแรก (DHTML เป็นต้น) ทางฝั่งไคลเอ็นต์ได้อีกด้วย

เป็นการยากที่จะระบุจุดเริ่มต้นหรือลำดับเวลาที่ แน่นอนของ "เว็บเพจแบบไดนามิก" เพราะแนวคิดที่แม่นยำนั้นจะมีความหมายก็ต่อเมื่อ "การพัฒนาเว็บเพจอย่างแพร่หลาย" แล้วเท่านั้นHTTPมีมาตั้งแต่ปี 1989 HTMLได้รับการกำหนดมาตรฐานอย่างเป็นทางการตั้งแต่ปี 1996 ความนิยมของเว็บเบราว์เซอร์เริ่มต้นด้วยMosaicในปี 1993 ระหว่างปี 1995 ถึง 1996 ผลิตภัณฑ์เว็บแบบไดนามิกหลายตัวได้ถูกนำออกสู่ตลาด รวมถึงColdfusion , WebObjects , PHPและActive Server Pages

การนำ JavaScript (ซึ่งในขณะนั้นเรียกว่า LiveScript) มาใช้ทำให้สามารถสร้างเว็บเพจแบบไดนามิกฝั่งไคลเอ็นต์ได้ โดยโค้ด JavaScript จะถูกเรียกใช้ในเบราว์เซอร์ของไคลเอ็นต์^{[ 4 ]}ตัวอักษร "J" ในคำว่าAJAXเดิมทีหมายถึงการใช้ JavaScript เช่นเดียวกับXMLด้วย ด้วยการเพิ่มขึ้นของการประมวลผล JavaScript ฝั่งเซิร์ฟเวอร์ เช่นNode.jsซึ่งพัฒนาขึ้นครั้งแรกในปี 2009 JavaScript จึงถูกใช้เพื่อสร้างหน้าเว็บแบบไดนามิกบนเซิร์ฟเวอร์และส่งไปยังไคลเอ็นต์ในรูปแบบที่สมบูรณ์

MediaWikiซึ่งเป็นระบบจัดการเนื้อหาที่ขับเคลื่อน Wikipedia เป็นตัวอย่างของเว็บเพจแบบไดนามิกที่ทำงานบนฝั่งเซิร์ฟเวอร์ตั้งแต่แรก โดยมีการโต้ตอบผ่านการส่งแบบฟอร์มและพารามิเตอร์ URL เมื่อเวลาผ่านไป ส่วนขยาย ที่พัฒนาขึ้นเรื่อยๆเช่นตัวแก้ไขภาพได้เพิ่มองค์ประกอบแบบไดนามิกบนฝั่งไคลเอ็นต์ ในขณะที่องค์ประกอบแบบไดนามิกบนฝั่งเซิร์ฟเวอร์ดั้งเดิม เช่น แบบฟอร์มแก้ไขแบบคลาสสิก ยังคงสามารถใช้งานได้เป็นทางเลือกสำรอง ( การลดระดับอย่างนุ่มนวล ) ในกรณีที่เกิดข้อผิดพลาดหรือความไม่เข้ากัน

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

เว็บเพจประเภทนี้มักถูกสร้างขึ้นโดยใช้ ภาษา ฝั่งเซิร์ฟเวอร์เช่นASP , ColdFusion , Java , JavaScript , Perl , PHP , Ruby , Pythonและภาษาอื่นๆ โดยมีเซิร์ฟเวอร์สนับสนุนที่สามารถทำงานบนฮาร์ดแวร์เดียวกันกับเว็บเซิร์ฟเวอร์ได้ ภาษาฝั่งเซิร์ฟเวอร์เหล่านี้มักใช้Common Gateway Interface (CGI) เพื่อสร้างเว็บเพจแบบไดนามิก ข้อยกเว้นที่สำคัญสองประการคือASP.NETและJSPซึ่งนำแนวคิด CGI มาใช้ในAPI ของตน แต่ในความเป็นจริงแล้วจะส่งคำขอเว็บทั้งหมดไปยังเครื่องเสมือนที่ใช้ร่วมกัน

ภาษาฝั่งเซิร์ฟเวอร์ใช้เพื่อฝังแท็กหรือเครื่องหมายภายในไฟล์ต้นฉบับของเว็บเพจบนเว็บเซิร์ฟเวอร์^{[ 5 ]}เมื่อผู้ใช้บนคอมพิวเตอร์ไคลเอ็นต์ร้องขอเว็บเพจนั้น เว็บเซิร์ฟเวอร์จะตีความแท็กหรือเครื่องหมายเหล่านี้เพื่อดำเนินการบนเซิร์ฟเวอร์ ตัวอย่างเช่น เซิร์ฟเวอร์อาจได้รับคำสั่งให้แทรกข้อมูลจากฐานข้อมูลหรือข้อมูลเช่นวันที่ปัจจุบัน

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

การเขียนสคริปต์ฝั่งไคลเอ็นต์คือการเปลี่ยนแปลงพฤติกรรมอินเทอร์เฟซภายในหน้าเว็บเฉพาะเพื่อตอบสนองต่อการกระทำของอุปกรณ์อินพุต หรือเหตุการณ์เวลาที่กำหนด ในกรณีนี้ พฤติกรรมแบบไดนามิกเกิดขึ้นภายในงานนำเสนอเนื้อหาฝั่งไคลเอ็นต์ถูกสร้างขึ้นบนระบบคอมพิวเตอร์ของผู้ใช้^{[ 6 ]}

เว็บเพจประเภทนี้ใช้เทคโนโลยีการนำเสนอที่เรียกว่าหน้าเว็บที่มีอินเทอร์เฟซที่หลากหลาย (rich interfaced pages ) ภาษาเขียนโปรแกรมฝั่งไคลเอ็นต์ เช่นJavaScriptหรือActionScriptซึ่งใช้สำหรับ เทคโนโลยี Dynamic HTML (DHTML) และFlashตามลำดับ มักถูกใช้เพื่อจัดการสื่อประเภทต่างๆ (เสียง ภาพเคลื่อนไหว ข้อความที่เปลี่ยนแปลง ฯลฯ) ในการนำเสนอ การเขียนโปรแกรมฝั่งไคลเอ็นต์ยังอนุญาตให้ใช้การเขียนโปรแกรมระยะไกล (remote scripting ) ซึ่งเป็นเทคนิคที่หน้า DHTML ร้องขอข้อมูลเพิ่มเติมจากเซิร์ฟเวอร์โดยใช้เฟรมที่ซ่อนอยู่XMLHttpRequestsหรือบริการ เว็บ

การใช้งาน JavaScript ในที่สาธารณะครั้งแรกเกิดขึ้นในปี 1995 เมื่อภาษานี้ถูกนำไปใช้ในNetscape Navigator 2และได้รับการกำหนดมาตรฐานเป็นECMAScriptในอีกสองปีต่อมา^{[ 7 ]}

ตัวอย่าง

เนื้อหาฝั่งไคลเอ็นต์ถูกสร้างขึ้นบนคอมพิวเตอร์ไคลเอ็นต์ เว็บเบราว์เซอร์ดึงหน้าเว็บจากเซิร์ฟเวอร์ จากนั้นประมวลผลโค้ดที่ฝังอยู่ในหน้าเว็บ (โดยทั่วไปเขียนด้วยJavaScript ) และแสดงเนื้อหาของหน้าเว็บที่ดึงมาให้กับผู้ใช้^{[ 8 ]}

คุณสมบัติinnerHTML(หรือคำสั่งเขียน) สามารถแสดงให้เห็นถึงการสร้างหน้าเว็บแบบไดนามิกฝั่งไคลเอ็นต์ได้: หน้าเว็บสองหน้าที่แตกต่างกัน คือ A และ B สามารถสร้างขึ้นใหม่ได้ (โดย "การตอบสนองเหตุการณ์แบบไดนามิก") เป็นdocument.innerHTML = Aและdocument.innerHTML = Bหรือ "แบบไดนามิกเมื่อโหลด" โดย document.write(A)และdocument.write(B)

ส่วนประกอบไคลเอ็นต์และเซิร์ฟเวอร์ทั้งหมดที่รวมกันสร้างเว็บเพจแบบไดนามิกเรียกว่าเว็บแอปพลิเคชันเว็บแอปพลิเคชันจัดการการโต้ตอบของผู้ใช้ สถานะ ความปลอดภัย และประสิทธิภาพ^{[ 9 ]}

Ajaxใช้การผสมผสานระหว่างการเขียนสคริปต์ฝั่งไคลเอ็นต์และการร้องขอฝั่งเซิร์ฟเวอร์ เป็นเทคนิคการพัฒนาเว็บแอปพลิเคชันสำหรับการแลกเปลี่ยนเนื้อหาแบบไดนามิก โดยจะส่งคำขอไปยังเซิร์ฟเวอร์เพื่อขอข้อมูล เซิร์ฟเวอร์จะส่งข้อมูลที่ร้องขอกลับมา ซึ่งจะถูกประมวลผลโดยสคริปต์ฝั่งไคลเอ็นต์ เทคนิคนี้สามารถลดเวลาในการโหลดเซิร์ฟเวอร์ได้ เนื่องจากไคลเอ็นต์ไม่จำเป็นต้องร้องขอให้ตัวแยกวิเคราะห์ภาษาของเซิร์ฟเวอร์สร้างเว็บเพจทั้งหมดใหม่ แต่จะส่งเฉพาะเนื้อหาที่จะเปลี่ยนแปลงเท่านั้นGoogle Mapsเป็นตัวอย่างของเว็บแอปพลิเคชันที่ใช้เทคนิค Ajax

ไคลเอนต์เว็บเช่น เว็บเบราว์เซอร์ สามารถทำหน้าที่เป็นเซิร์ฟเวอร์ของตัวเองได้ โดยเข้าถึงข้อมูลจากเซิร์ฟเวอร์ต่างๆ มากมาย เช่น Gopher, FTP, NNTP (Usenet) และ HTTP เพื่อสร้างหน้าเว็บHTTPรองรับการอัปโหลดเอกสารจากไคลเอนต์กลับไปยังเซิร์ฟเวอร์ โดยมีวิธีการ HTTP หลายวิธี สำหรับการทำเช่นนี้

• เว็บลึก (การจัดทำดัชนีการค้นหา)
• HTML แบบไดนามิก
• htmx
• ระบบจัดการการปรับแต่งเฉพาะบุคคล
• การออกแบบเว็บไซต์ที่ตอบสนองต่อทุกอุปกรณ์
• ชุดโซลูชันเพื่อรองรับเว็บเพจแบบไดนามิก
  • LAMP (ชุดซอฟต์แวร์)
  • LYME (ชุดซอฟต์แวร์)
  • LYCE (ชุดซอฟต์แวร์)
• หน้าเว็บแบบคงที่
• ระบบจัดการเนื้อหาเว็บ
• ระบบเทมเพลตเว็บ

• เว็บไซต์แบบคงที่และแบบไดนามิกจาก W3.org
• เว็บไซต์แบบไดนามิกที่ใช้เมธอดการจัดการความสัมพันธ์ (Relationship Management Method) จาก W3.org
• การวิเคราะห์เชิงลึกของเว็บเพจแบบไดนามิกจากมหาวิทยาลัยเท็กซัส ออสติน