Introduction to AJAX
In this page:
What is AJAX?
AJAX lets a page request data from a server in the background without a full page reload; jQuery wraps the browser's raw AJAX API in a simpler, more consistent one. This is what makes features like live search or infinite scroll possible without navigating away.
Example: What is AJAX?
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<button id="btn">Load</button>
<script>
$("#btn").on("click", function() {
$.ajax({url: "data.php", success: function(data) {
console.log("Received:", data);
}});
});
</script>
</body>
</html>AJAX Method
The $.ajax() method accepts a configuration object with options such as url, method, data, success, and error, giving you full control over exactly how the request is made. It's the most flexible AJAX method jQuery provides, underlying the shorthand methods like get() and post().
Example: AJAX Method
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
$.ajax({
url: "data.php",
method: "GET",
success: function(data) { console.log(data); },
error: function() { console.log("Request failed"); }
});
</script>
</body>
</html>Handling Returned Data
A successful request passes its returned data to the success callback, where you can use it to update the page -- inserting it into the DOM, filling a table, or updating a counter. What that data looks like depends entirely on what the server sends back.
Example: Handling Returned Data
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<ul id="list"></ul>
<script>
$.ajax({url: "data.php", success: function(data) {
$("#list").append("<li>" + data.message + "</li>");
}});
</script>
</body>
</html>AJAX Error Handling
Network requests can fail for many reasons -- a dropped connection, a server error, a bad URL -- so the error callback lets you show a friendly message instead of leaving the page silently broken. Handling this case is just as important as handling success.
Example: AJAX Error Handling
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
$.ajax({
url: "data.php",
success: function(data) { console.log(data); },
error: function() { console.log("Something went wrong, please try again"); }
});
</script>
</body>
</html>AJAX in a Small Project
AJAX is useful for small interactive pages where loading everything up front would be wasteful, like fetching extra details only when the user clicks a 'show more' button. This keeps the initial page load light while still allowing rich, on-demand interactivity.
Example: AJAX in a Small Project
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<button id="showMore">Show More</button>
<div id="details"></div>
<script>
$("#showMore").on("click", function() {
$.ajax({url: "data.php", success: function(data) {
$("#details").text(data.message);
}});
});
</script>
</body>
</html>Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: