Modern Web Development Techniques
AJAX
Peter Larsson-Green
Jönköping University
Spring 2019
TRADITIONAL WEBSITES
page-a.html
Header
Menu
Content A
Page A
Page B
Page C
page-b.html
Header
Menu
Content B
Page A
Page B
Page C
Click!
We fetch information we already have.
•
Takes extra time
•
Wasting data
•
Loading...
"MODERN" WEBSITES
page-a.html
Header
Menu
Content A
Page A
Page B
Page C
------------
Content B
Click!
Fetch the content of
Page B from server.
Update!
Single Page Application:
•
A single HTML file, and a lot
of client-side JavaScript code.
AJAX
Asynchronous JavaScript and XML.
In old web browsers:
XMLHttpRequest
In modern web browsers:
fetch
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"}THE
fetch
FUNCTION
The old solution: using the
XMLHttpRequest
object
fetch('http://www.the-website.com/api/humans/4', {// ...
}).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){// ...
})
HTTP/1.1 200 OK
Content-Length: 15
Content-Type: application/json
{"name": "Bob"}MANAGING THE HISTORY
page-a.html
Header
Menu
Content A
Page A
Page B
Page C
page-b.html
Header
Menu
Content B
Page A
Page B
Page C
Click!
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
})
MANAGING THE HISTORY
Example
"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."
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
AJAX Peter Larsson-Green J nk ping University Spring 2019
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...
"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.
AJAX Asynchronous JavaScript and XML. In old web browsers: XMLHttpRequest In modern web browsers: fetch
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"}
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"}
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
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 })
MANAGING THE HISTORY Example
