Exploring Modern Web Development Techniques

Slide Note
Embed
Share

"Explore the evolution of website development from traditional to modern approaches like AJAX, single-page applications, and managing history entries. Learn about Asynchronous JavaScript and XML, using the Fetch API, and transitioning from XMLHttpRequest to fetch in web browsers. Discover how to manipulate history entries and enhance user experience with client-side JavaScript."


Uploaded on Oct 05, 2024 | 0 Views


Download Presentation

Please find below an Image/Link to download the presentation.

The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. Download presentation by click this link. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.

E N D

Presentation Transcript


  1. AJAX Peter Larsson-Green J nk ping University Spring 2019

  2. TRADITIONAL WEBSITES Header Header Menu Page A Page B Page C Menu Page A Page B Page C Content A Content B Click! page-a.html page-b.html We fetch information we already have. Takes extra time Wasting data Loading...

  3. "MODERN" WEBSITES Single Page Application: A single HTML file, and a lot of client-side JavaScript code. Header Menu Page A Page B Page C Content A ------------ Content B Click! page-a.html Update! Fetch the content of Page B from server.

  4. AJAX Asynchronous JavaScript and XML. In old web browsers: XMLHttpRequest In modern web browsers: fetch

  5. THE fetch FUNCTION fetch('http://www.the-website.com/api/humans', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({name: "Alice"}) }).then(function(response){ // Got back an HTTP response }).catch(function(error){ // Something went wrong }) POST /api/humans HTTP/1.1 Host: www.the-website.com Content-Type: application/json Content-Length: 17 {"name": "Alice"}

  6. THE fetch FUNCTION The old solution: using the XMLHttpRequest object // ... }).then(function(response){ const statusCode = response.status const contentType = response.headers.get("Content-Type") return response.json() .then(function(human){ const name = human.name }).catch(function(error){ // ... }) fetch('http://www.the-website.com/api/humans/4', { HTTP/1.1 200 OK Content-Length: 15 Content-Type: application/json {"name": "Bob"}

  7. MANAGING THE HISTORY Header Header Menu Page A Page B Page C Menu Page A Page B Page C Content A Content B Click! page-a.html page-b.html

  8. MANAGING THE HISTORY Add history entry: history.pushState({page: "about"}, "Title", "/about") Listen for history changes: window.addEventListener('popstate', function(event){ const state = event.state })

  9. MANAGING THE HISTORY Example

Related


More Related Content