LEARNING PHP: From Beginners to Advanced by DVZ Editorial
Author:DVZ, Editorial
Language: eng
Format: epub
Published: 2023-12-03T00:00:00+00:00
PHP and AJAX - Updating Web Pages without Reloading
The no-reload web page refresh technique, commonly known as AJAX (Asynchronous JavaScript and XML), allows you to improve the user experience by loading or sending data to the server in the background without having to reload the entire page. In this chapter,we will explore how to integrate AJAX with PHP to achieve dynamic updates.
Introduction to AJAX:
AJAX uses JavaScript to make asynchronous requests to the server and manipulate the response without reloading the entire page. Let's create a simple example to understand how it works.
Practical example:
File Structure:
/project-ajax
âââ index.php
âââ update.php
âââ script.js
index.php:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>AJAX Update</title>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<h1>Counter: <span id="counter">0</span></h1>
<button onclick="incrementCounter()">Increment</button>
</body>
</html>
script.js:
function incrementCounter() {
// Make an AJAX request to the server
$.ajax({
type: "POST",
url: "update.php",
success: function(response) {
// Update the counter on the page
$("#counter").text(response);
}
});
}
update.php:
<?php
// Simulate a process on the server (you can perform more complex operations here)
// In this example, we simply increment a counter on the server.
session_start();
if (!isset($_SESSION['contador'])) {
$_SESSION['contador'] = 0;
}
$_SESSION['contador']++;
// Return the new counter value
echo $_SESSION['counter'];
Practical exercise:
Implements additional functionality in update.php to reset the counter to zero when a specific request is sent from the client. Modify the functionincrementCounter() in script.js to call this new functionality.
// In update.php
if (isset($_POST['reset'])) {
$_SESSION['contador'] = 0;
echo $_SESSION['counter'];
exit;
}
// And script.js
function resetCounter() {
$.ajax({
type: "POST",
url: "update.php",
data: { reset: true },
success: function(response) {
$("#counter").text(response);
}
});
}
Add a new button in index.php that calls the functionresetCounter(). This exercise will help you understand how to handle different actions with AJAX and PHP to dynamically update the web page without recharge it for complete.
Download
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.
Deep Learning with Python by François Chollet(12810)
Hello! Python by Anthony Briggs(10092)
A Developer's Guide to Building Resilient Cloud Applications with Azure by Hamida Rebai Trabelsi(9970)
The Mikado Method by Ola Ellnestam Daniel Brolund(9967)
OCA Java SE 8 Programmer I Certification Guide by Mala Gupta(9952)
Dependency Injection in .NET by Mark Seemann(9490)
Hit Refresh by Satya Nadella(8914)
Algorithms of the Intelligent Web by Haralambos Marmanis;Dmitry Babenko(8474)
The Kubernetes Operator Framework Book by Michael Dame(8100)
Exploring Deepfakes by Bryan Lyon and Matt Tora(7888)
Sass and Compass in Action by Wynn Netherland Nathan Weizenbaum Chris Eppstein Brandon Mathis(7878)
Practical Computer Architecture with Python and ARM by Alan Clements(7847)
Grails in Action by Glen Smith Peter Ledbrook(7844)
Test-Driven iOS Development with Swift 4 by Dominik Hauser(7837)
Implementing Enterprise Observability for Success by Manisha Agrawal and Karun Krishnannair(7811)
Robo-Advisor with Python by Aki Ranin(7792)
The Well-Grounded Java Developer by Benjamin J. Evans Martijn Verburg(7736)
Building Low Latency Applications with C++ by Sourav Ghosh(7703)
Svelte with Test-Driven Development by Daniel Irvine(7688)
