AJAX
Mar 12, 2021
Asynchronous Javascript and XML
Allows only parts of web page to be updated by requesting data from server (don’t have to reload the entire page!)
How it works
Use jQuery (wrapper for XMLHttpRequest XHR) to perform calls to server.
Sample from Dani Krossing’s YouTube tutorial
When document has finished loading, if button is clicked, then load data from file data.txt and display it in the <div id=”test”> section.
<!DOCTYPE html>
<html>
<head>
<title></title> <script>
$(document).ready(function() {
$("#btn").click(function() {
$("#test").load("data.txt");
});
});
</script></head>
<body>
<div id="test">
<p>This is the first content!</p>
</div>
<button id="btn">Click to change</button>
</body>
Cons
- Dependent on JacaScript version (different on browsers, Back button may do unexpected things)
- Webpage can be hard to debug
Security
Validations can be done on the frontend but still always do validations in the backend because frontend components can always be changed by malicious users via browser’s Inspect feature.
