Menu
Home
People
Places
Arts
History
Plants & Animals
Science
Life & Culture
Technology
Reference.org
Dynamic web page
open-in-new
<h2 id="basic-concepts">Basic concepts</h2> <p>Classical <a href="/facts/Hypertext/qD8ozxSb">hypertext</a> navigation, with <a href="/facts/HTML/sSc3fT78">HTML</a> or <a href="/facts/XHTML/6qHnmJSg">XHTML</a> alone, provides "static" content, meaning that the user requests a web page and simply views the page and the information on that page. </p><p>However, a web page can also provide a "live", "dynamic", or "interactive" user experience. Content (text, images, form fields, etc.) on a <a href="/facts/Web_page/5JK7xQLe">web page</a> can change, in response to different contexts or conditions. </p><p>There are two ways to create this kind of effect: </p> <ul><li>Using client-side scripting to change interface behaviors <i>within</i> a specific <a href="/facts/Web_page/5JK7xQLe">web page</a>, in response to mouse or keyboard actions or at specified timing events. In this case the dynamic behavior occurs within the <a href="/facts/Look_and_feel/Uo3RcETT">presentation</a>.</li> <li>Using <a href="/facts/Server-side_scripting/JnLx8FnL">server-side scripting</a> to change the supplied page source <i>between</i> pages, adjusting the sequence or reload of the <a href="/facts/Web_page/5JK7xQLe">web pages</a> or <a href="/facts/Web_content/u4p0t6kz">web content</a> supplied to the browser. Server responses may be determined by such conditions as data in a posted <a href="/facts/HTML_form/9Ivp2peo">HTML form</a>, parameters in the <a href="/facts/Uniform_Resource_Locator/pPD5g7Wq">URL</a>, the type of browser being used, the passage of time, or a database or server <a href="/facts/State_(computer_science)/4Yu8xXHS">state</a>.<a class="footnote-ref" id="fnref:3" href="#fn:3"><sup>3</sup></a></li></ul> <p>Web pages that use client-side scripting must use presentation technology broadly called <a href="/facts/Rich_Internet_application/en12v9La">rich interfaced pages</a>. <a href="/facts/Client-side/v7DVfjsH">Client-side</a> <a href="/facts/Scripting_language/8pF4ajBL">scripting languages</a> like <a href="/facts/JavaScript/XhhIIEsl">JavaScript</a> or <a href="/facts/ActionScript/xtDQb0wR">ActionScript</a>, used for <a href="/facts/Dynamic_HTML/XrmcmIv5">Dynamic HTML</a> (DHTML) and <a href="/facts/Adobe_Flash/3Lrp9JuH">Flash</a> technologies respectively, are frequently used to orchestrate media types (sound, animations, changing text, etc.) of the presentation. The scripting also allows use of <a href="/facts/Remote_scripting/nXCmT6xs">remote scripting</a>, a technique by which the DHTML page requests additional information from a server, using a <a href="/facts/HTML_element/s4TKzjUP">hidden Frame</a>, <a href="/facts/XMLHttpRequest/3FHofhdx">XMLHttpRequests</a>, or a <a href="/facts/Web_service/qxrwqB3D">web service</a>. </p><p>Web pages that use server-side scripting are often created with the help of <a href="/facts/Server-side/JqukWyaA">server-side</a> languages such as <a href="/facts/PHP/vU6YRJX0">PHP</a>, <a href="/facts/Perl/fx31kjlT">Perl</a>, <a href="/facts/Active_Server_Pages/um62st21">ASP</a>, <a href="/facts/JavaServer_Pages/LAr4ALkb">JSP</a>, <a href="/facts/ColdFusion/4WB5vcA2">ColdFusion</a> and other languages. These server-side languages typically use the <a href="/facts/Common_Gateway_Interface/zWsLFXGJ">Common Gateway Interface</a> (CGI) to produce <i>dynamic web pages</i>. These kinds of pages can also use, on the client-side, the first kind (DHTML, etc.). </p> <h2 id="history">History</h2> <p>It is difficult to be precise about "dynamic web page beginnings" or chronology because the precise concept makes sense only after the "widespread development of web pages". <a href="/facts/Hypertext_Transfer_Protocol/TWtvf7JD">HTTP</a> has existed since 1989, <a href="/facts/Hypertext_Markup_Language/sSc3fT78">HTML</a>, publicly standardized since 1996. The web browser's rise in popularity started with <a href="/facts/Mosaic_(web_browser)/qrA52r1E">Mosaic</a> in 1993. Between 1995 and 1996, multiple dynamic web products were introduced to the market, including <a href="/facts/Coldfusion/4WB5vcA2">Coldfusion</a>, <a href="/facts/WebObjects/PyRxEc9F">WebObjects</a>, <a href="/facts/PHP/vU6YRJX0">PHP</a>, and <a href="/facts/Active_Server_Pages/um62st21">Active Server Pages</a>. </p><p>The introduction of JavaScript (then known as LiveScript) enabled the production of client-side dynamic web pages, with JavaScript code executed in the client's browser.<a class="footnote-ref" id="fnref:4" href="#fn:4"><sup>4</sup></a> The letter "J" in the term <a href="/facts/AJAX/cS0P0whT">AJAX</a> originally indicated the use of JavaScript, as well as <a href="/facts/XML/clNgUfWk">XML</a>. With the rise of server side JavaScript processing, for example, <a href="/facts/Node.js/FKzhV4Qa">Node.js</a>, originally developed in 2009, JavaScript is also used to dynamically create pages on the server that are sent fully formed to clients. </p><p><a href="/facts/MediaWiki/MbkLUTor">MediaWiki</a>, the <a href="/facts/Content_management_system/CCk4vIxV">content management system</a> that powers Wikipedia, is an example for an originally server-side dynamic web page, interacted with through form submissions and URL parameters. Throughout time, <a href="/facts/Progressive_enhancement/d54qcFcj">progressively enhancing</a> extensions such as the <a href="/facts/Visual_editor/CwxYgj6o">visual editor</a> have also added elements that are dynamic on the client side, while the original dynamic server-side elements such as the classic edit form remain available to be fallen back on (<a href="/facts/Graceful_degradation/rasrYlJk">graceful degradation</a>) in case of error or incompatibility. </p> <h2 id="server-side-scripting">Server-side scripting</h2> <p>A program running on a <a href="/facts/Web_server/A4GS6thA">web server</a> (<a href="/facts/Server-side_scripting/JnLx8FnL">server-side scripting</a>) is used to generate the web content on various web pages, manage user sessions, and control workflow. Server responses may be determined by such conditions as data in a posted <a href="/facts/HTML_form/9Ivp2peo">HTML form</a>, parameters in the <a href="/facts/Uniform_Resource_Locator/pPD5g7Wq">URL</a>, the type of browser being used, the passage of time, or a database or server <a href="/facts/State_(computer_science)/4Yu8xXHS">state</a>. </p><p>Such web pages are often created with the help of <a href="/facts/Server-side/JqukWyaA">server-side</a> languages such as <a href="/facts/Active_Server_Pages/um62st21">ASP</a>, <a href="/facts/ColdFusion/4WB5vcA2">ColdFusion</a>, <a href="/facts/Java_Server_Pages/LAr4ALkb">Java</a>, <a href="/facts/JavaScript/XhhIIEsl">JavaScript</a>, <a href="/facts/Perl/fx31kjlT">Perl</a>, <a href="/facts/PHP/vU6YRJX0">PHP</a>, <a href="/facts/Ruby_(programming_language)/BeYSaPSR">Ruby</a>, <a href="/facts/Python_(programming_language)/YbuGqofa">Python</a>, and other languages, by a support server that can run on the same hardware as the web server. These server-side languages often use the <a href="/facts/Common_Gateway_Interface/zWsLFXGJ">Common Gateway Interface</a> (CGI) to produce dynamic web pages. Two notable exceptions are <a href="/facts/ASP.NET/xq7KM8mN">ASP.NET</a>, and <a href="/facts/JavaServer_Pages/LAr4ALkb">JSP</a>, which reuse CGI concepts in their APIs but actually dispatch all web requests into a shared virtual machine. </p><p>The server-side languages are used to embed tags or markers within the source file of the web page on the web server.<a class="footnote-ref" id="fnref:5" href="#fn:5"><sup>5</sup></a> When a user on a client computer requests that web page, the web server interprets these tags or markers to perform actions on the server. For example, the server may be instructed to insert information from a database or information such as the current date. </p><p>Dynamic web pages are often <a href="/facts/Cache_(computing)/gmJYN8wm">cached</a> when there are few or no changes expected and the page is anticipated to receive considerable amount of web traffic that would wastefully strain the server and slow down page loading if it had to generate the pages on the fly for each request. </p> <h2 id="client-side-scripting">Client-side scripting</h2> <p>Client-side scripting is changing interface behaviors within a specific web page in response to input device actions, or at specified timing events. In this case, the dynamic behavior occurs within the <a href="/facts/Look_and_feel/Uo3RcETT">presentation</a>. The client-side content is generated on the user's local computer system.<a class="footnote-ref" id="fnref:6" href="#fn:6"><sup>6</sup></a> </p><p>Such web pages use presentation technology called <a href="/facts/Rich_Internet_application/en12v9La">rich interfaced pages</a>. Client-side scripting languages like <a href="/facts/JavaScript/XhhIIEsl">JavaScript</a> or <a href="/facts/ActionScript/xtDQb0wR">ActionScript</a>, used for <a href="/facts/Dynamic_HTML/XrmcmIv5">Dynamic HTML</a> (DHTML) and <a href="/facts/Adobe_Flash/3Lrp9JuH">Flash</a> technologies respectively, are frequently used to orchestrate media types (sound, animations, changing text, etc.) of the presentation. Client-side scripting also allows the use of <a href="/facts/Remote_scripting/nXCmT6xs">remote scripting</a>, a technique by which the DHTML page requests additional information from a server, using a <a href="/facts/HTML_element/s4TKzjUP">hidden frame</a>, <a href="/facts/XMLHttpRequest/3FHofhdx">XMLHttpRequests</a>, or a <a href="/facts/Web_service/qxrwqB3D">Web service</a>. </p><p>The first public use of JavaScript was in 1995, when the language was implemented in <a href="/facts/Netscape_Navigator_2/CCVPXpGS">Netscape Navigator 2</a>, standardized as <a href="/facts/ECMAScript/M7nDHsB5">ECMAScript</a> two years later.<a class="footnote-ref" id="fnref:7" href="#fn:7"><sup>7</sup></a> </p> Example <p>The client-side content is generated on the client's computer. The web browser retrieves a page from the server, then processes the code embedded in the page (typically written in <a href="/facts/JavaScript/XhhIIEsl">JavaScript</a>) and displays the retrieved page's content to the user.<a class="footnote-ref" id="fnref:8" href="#fn:8"><sup>8</sup></a> </p><p>The innerHTML property (or write command) can illustrate the client-side dynamic page generation: two distinct pages, A and B, can be regenerated (by an "event response dynamic") as document.innerHTML = A and document.innerHTML = B; or "on load dynamic" by document.write(A) and document.write(B). </p> <h2 id="combination-technologies">Combination technologies</h2> <p>All of the client and server components that collectively build a dynamic web page are called a <a href="/facts/Web_application/BLkF3BIN">web application</a>. Web applications manage user interactions, state, security, and performance.<a class="footnote-ref" id="fnref:9" href="#fn:9"><sup>9</sup></a> </p><p><a href="/facts/Ajax_(programming)/cS0P0whT">Ajax</a> uses a combination of both client-side scripting and server-side requests. It is a web application development technique for dynamically interchanging content, and it sends requests to the server for data in order to do so. The server returns the requested data which is then processed by a client-side script. This technique can reduce server load time because the client does not request the entire webpage to be regenerated by the server's language parser; only the content that will change is transmitted. <a href="/facts/Google_Maps/cKQ0jaFg">Google Maps</a> is an example of a web application that uses Ajax techniques. </p><p>A <a href="/facts/Web_client/2pfyymLs">web client</a>, such as a web browser, can act as its own server, accessing data from many different servers, such as Gopher, FTP, NNTP (Usenet) and HTTP, to build a page. <a href="/facts/Hypertext_Transport_Protocol/TWtvf7JD">HTTP</a> supports uploading documents from the client back to the server. There are several <a href="/facts/HTTP_method/TWtvf7JD">HTTP methods</a> for doing this. </p> <h2 id="see-also">See also</h2> <ul><li><a href="/facts/Deep_web_(search_indexing)/wV8VXBkR">Deep web (search indexing)</a></li> <li><a href="/facts/Dynamic_HTML/XrmcmIv5">Dynamic HTML</a></li> <li><a href="/facts/Htmx/EF6XcUuH">htmx</a></li> <li><a href="/facts/Personalization_management_system/G4jb88ll">Personalization management system</a></li> <li><a href="/facts/Responsive_Web_Design/gXbDHuno">Responsive Web Design</a></li> <li><a href="/facts/Solution_stack/rPE5Vp8c">Solution stacks</a> to serve dynamic web pages <ul><li><a href="/facts/LAMP_(software_bundle)/vUeXaEXW">LAMP (software bundle)</a></li> <li><a href="/facts/LYME_(software_bundle)/BXuDz3tb">LYME (software bundle)</a></li> <li><a href="/facts/LYCE_(software_bundle)/BXuDz3tb">LYCE (software bundle)</a></li></ul></li> <li><a href="/facts/Static_web_page/BtP4660l">Static web page</a></li> <li><a href="/facts/Web_content_management_system/F56h1HF6">Web content management system</a></li> <li><a href="/facts/Web_template_system/zWstHsCF">Web template system</a></li></ul> <h2 id="external-links">External links</h2> <ul><li><a href="http://www.w3.org/wiki/How_does_the_Internet_work#Static_vs._Dynamic_Web_Sites">Static versus dynamic web site</a> from W3.org</li> <li><a href="http://www.w3.org/People/Massimo/papers/rmm.pdf">Dynamic web sites</a> using the Relationship Management Method, from W3.org.</li> <li><a href="https://www.ischool.utexas.edu/~hristova/ia/">Wide analysis of dynamic web pages</a> from University of Texas, Austin.</li></ul> <h2 id="references">References</h2> <ol> <li id="fn:1"><p>DeGroote, Sandy. "Subject and Course Guides: Digital UIC: Static and Dynamic Websites". researchguides.uic.edu. Retrieved 2023-12-12. <a href="https://researchguides.uic.edu/digital-uic/static-dynamic" target="_blank">https://researchguides.uic.edu/digital-uic/static-dynamic</a> <a href="#fnref:1" class="footnote-back-ref">↩</a></p></li> <li id="fn:2"><p>Fielding, Roy Thomas (2000). "Chapter 5: Representational State Transfer (REST)". Architectural Styles and the Design of Network-based Software Architectures (Ph.D.). University of California, Irvine. <a href="http://www.ics.uci.edu/~fielding/pubs/dissertation/rest_arch_style.htm" target="_blank">http://www.ics.uci.edu/~fielding/pubs/dissertation/rest_arch_style.htm</a> <a href="#fnref:2" class="footnote-back-ref">↩</a></p></li> <li id="fn:3"><p>Nelson, Anne; Nelson, William H. M. (2002). Building Electronic Commerce with Web Database Constructions. Addison Wesley. ISBN 9780201741308. <a href="9780201741308" target="_blank">9780201741308</a> <a href="#fnref:3" class="footnote-back-ref">↩</a></p></li> <li id="fn:4"><p>Benson, Brent W. (1999). "JavaScript". ACM SIGPLAN Notices. 34 (4): 25–27. doi:10.1145/312009.312023. S2CID 10076062.. <a href="/wiki/JavaScript" target="_blank">/wiki/JavaScript</a> <a href="#fnref:4" class="footnote-back-ref">↩</a></p></li> <li id="fn:5"><p>Tatroe, Kevin (2013). Programming PHP: Creating Dynamic Web Pages (3 ed.). O'Reilly. ISBN 9781449365837. <a href="9781449365837" target="_blank">9781449365837</a> <a href="#fnref:5" class="footnote-back-ref">↩</a></p></li> <li id="fn:6"><p>Doyle, Barry; Lopes, Cristina Videira (17 January 2008). "Survey of Technologies for Web Application Development". arXiv:0801.2618 [cs.SE]. <a href="/wiki/ArXiv_(identifier)" target="_blank">/wiki/ArXiv_(identifier)</a> <a href="#fnref:6" class="footnote-back-ref">↩</a></p></li> <li id="fn:7"><p>Okin, J. R. (2005). The Information Revolution: The Not-for-dummies Guide to the History, Technology, and Use of the World Wide Web. Ironbound Press. ISBN 9780976385745. <a href="9780976385745" target="_blank">9780976385745</a> <a href="#fnref:7" class="footnote-back-ref">↩</a></p></li> <li id="fn:8"><p>"Learning VBScript", P. Lomax. ISBN 1-56592-247-6. Ed. O'Reilly, 1997. sec. C13. <a href="/wiki/ISBN_(identifier)" target="_blank">/wiki/ISBN_(identifier)</a> <a href="#fnref:8" class="footnote-back-ref">↩</a></p></li> <li id="fn:9"><p>"Web application". Archived from the original on 22 February 2014. Retrieved 24 July 2013.{{cite web}}: CS1 maint: bot: original URL status unknown (link) <a href="https://web.archive.org/web/20140222134142/http://docforge.com/wiki/Web_application" target="_blank">https://web.archive.org/web/20140222134142/http://docforge.com/wiki/Web_application</a> <a href="#fnref:9" class="footnote-back-ref">↩</a></p></li> </ol>