Updating parts of a page without refreshing
To instantly update a particular website content block or individual web component without refreshing a webpage or website content, web developers can apply Ajax (Asynchronous JavaScript and XML) scripts to send a request to a dedicated PHP web server, and use the received data to live update particular webpage content and certain website components. This allows developers to dynamically load webpages live and replace web content immediately, without requiring any Internet user to reload the entire webpage.
Main steps for updating parts of a page without refreshing.
- User interaction – Using JavaScript in any HTML webpage, user input changes such as clicking a button or triggering a webpage load can trigger an Ajax POST request.
- AJAX request – In this, JavaScript programming sends an asynchronous request to a dedicated web server, typically using the JavaScript fetch(), XMLHttpRequest, or jQuery.ajax() function or method.
- Server-side processing – In this, the PHP server-side processes the received request in the web server, e.g., the current server retrieves data from a backend database or performs a user-generated action, and resends a system response, typically in JSON or HTML format.
- Update page – Here, the response in the dedicated webpage is used to update only the required relevant portion or component of the webpage without reloading the entire webpage.
Example of dynamically updating webpage content without refreshing.
If web developers want to dynamically load a list of employees from a web server on clicking an HTML or JavaScript-based created webpage button in a particular webpage website, and display the webpage data in a div (HTML block section) without refreshing the current webpage website content.
Use of HTML and JavaScript programming (client-side) scripts update.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Example of AJAX WebPage for Update Web content</title>
</head>
<body>
<h2>Update Webpage Content Without Reload Page or Component </h2>
<button id=”loademployeeBtn”>Load Dynamic Employee List</button>
<div id=”employeeList”></div>
<script>
//here we Add event listener to the created button to load employee list dynamically
document.getElementById(‘loademployeeBtn’).addEventListener(‘click’, function() {
// use javascript Fetch API method to send an AJAX request to the dedicated web server
fetch(‘getemployee.php’) // here this PHP script will send the employee list data
.then(response => response.json()) // here it Parse JSON response from PHP file
.then(data => {
// here it used to Find the div section to update and populate it with employee data list
const employeeListDiv = document.getElementById(’employeeList’);
employeeListDiv.innerHTML = ”; // here this code used to Clear any existing content
data.forEach(employee => {
employeeListDiv.innerHTML += `<p>${employee.emp_name} ${employee.emp_id} – ${employee.email}</p>`;
});
})
.catch(error => {
console.error(‘Display Error When fetch employee data -‘, error);
});
});
</script>
</body>
</html>
PHP programming for (server-side) script updates.
In this PHP script, a file named getemployee.php will retrieve particular employee data information from the database or return a static list. For simplicity, developers will use a static array for this process.
<?php
//create code for getemployee.php file
// here we Simulate a database response, here we can replace this with an actual database query
$employee = [
[’emp_name’ => ‘Siddhi’, ’emp_id’ => ‘S101′, ’email’ => ‘siddhi@domain.com’],
[’emp_name’ => ‘Harry’, ’emp_id’ => ‘H101′, ’email’ => ‘harry@domain.com’],
[’emp_name’ => ‘Bhavishi’, ’emp_id’ => ‘B101′,’email’ => ‘bhavishi@domain.com’]
];
// here we Set the response header as JSON file
header(‘Content-Type: application/json’);
// here we Send the employee data as a JSON response
echo json_encode($employee);
Here’s how the PHP script code works.
- HTML and Button – This webpage script creates a button labeled “Load Employees” that, when clicked by the user, triggers a call to the fetch() JavaScript function method.
- AJAX Request – When the user clicks this button, an AJAX request is sent to the getemployee.php file using the fetch() function method used in JavaScript programming. This request is generated asynchronously, so the currently open webpage is not reloaded.
- PHP Response – The PHP response from getemployee.php returns a list of employees in JSON format. This can also be displayed from an employee database query, depending on your usage.
- JavaScript Updates Page – Here, the system receives a response in JavaScript and, using the employee data, updates the #employeeList div with the employee’s name, ID, and email. The digital content within #employeeList updates dynamically without refreshing the webpage.
Why and how does this work in a webpage?
- AJAX – Using Ajax scripts in a webpage allows the user to send requests to a dedicated web server without reloading the entire webpage in the web browser.
- Partial Page Update – The #employeeList div block method is used to dynamically update the #employeeList div with new web content, which loads without refreshing the entire webpage.
You can extend this example.
- Search Functionality – Here, users can receive filtered employee data and modify it, such as displaying employee data based on search input.
- Real-time updates – If a dedicated web server provides live updates, developers can use Ajax dynamic scripts to automatically refresh specific parts of a webpage in a timely manner, such as with the setInterval() function.
- Form submission – Developers can send data, such as form data, to a web server through Ajax web scripts and, based on the server’s response, immediately update certain portions or blocks of a webpage.
Conclusion of Updating Parts of a Page Without Refreshing.
The Ajax script method in webpage design and development is very helpful for creating interactive, modern, and responsive web applications. Where developers can load web content live in a dynamic format without disturbing the Internet user experience with a complete webpage refresh, can update particular portions of a webpage live instantly as needed, or can interact directly with a live web server.
