Making AJAX requests with JavaScript and PHP
To create, send, receive, and receive client-side web requests using JavaScript and PHP programming in an Ajax webpage, web developers can divide this process into two parts.
JavaScript (client-side) Ajax request – It handles the activities of creating and sending client-side requests to the server, creating and sending responses using JavaScript and HTML webpages, and managing and controlling the task.
PHP (server-side) Ajax request – It processes and receives client requests used in PHP programming, and returns the appropriate response in a file format, such as JSON, HTML, or plain text.
So, let’s create and send a PHP file request to create, process, and display an Ajax client-side web request without reloading the webpage.
Example of a simple AJAX request to receive JavaScript and HTML data on the client side.
Step 1 – HTML and JavaScript client-side steps for the AJAX request.
Here, the web developer creates an HTML file with a user-defined custom AJAX request button. When the internet user clicks this button, a client-side AJAX web request is sent to the web server. Here, we use the fetch() function of the JavaScript API, an advanced modern method, to send the AJAX client-side request.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>AJAX Client Side Request Example</title>
</head>
<body>
<h2>Let’s Create AJAX Request with PHP</h2>
<button id=”fetchDataBtn”>Fetch Ajax Data</button>
<div id=”responses”></div>
<script>
document.getElementById(‘fetchDataBtn’).addEventListener(‘click’, function() {
// here we Make an AJAX request with use of javascript Fetch API
fetch(‘server.php’)
.then(response => response.json()) // here it Parse JSON responses
.then(data => {
// Here it displays the response in the ‘response’ div HTML block section
document.getElementById(‘responses’).innerHTML = data.message;
})
.catch(error => {
console.error(‘Display Error -‘, error);
});
});
</script>
</body>
</html>
Explanation of HTML and JavaScript Ajax requests.
- Here in this webpage, when an internet user clicks the Ajax request button, a fetch() JavaScript request is sent to the online server.php file.
- The server.php file returns a JSON request, which is processed on the server and displayed inside the #response div HTML block.
Step 2 – PHP Server-Side Ajax Request.
Now in step two, the web developer creates the server.php file to process the request server-side. In this case, the client-side will follow the process of receiving web data, such as from an online server database or processing a basic response.
<?php
// Here we create a server.php file for the server side.
// Here we simulate some data to be returned from the client-side.
$response = array(
‘msginfo’ => ‘Hi, let’s fetch data from an AJAX client-side request’
// Here we set the response’s content type to JSON format.
header(‘Content-Type: application/json’);
/ Here we use it to return the response as JSON format.
echo json_encode($response);
Explanation of a PHP Server-Side Ajax Request.
- The server-side PHP script creates an array with some data to be returned to the webpage when the request is made.
- Here, the header(‘Content-Type: application/json’) statement in the webpage decides that the web server’s response will be treated in JSON format.
- The json_encode($response) statement converts the program array created in PHP to JSON format.
So, let’s explore how Ajax requests work in HTML, JavaScript, and PHP.
- When the client clicks a button – Here, the Ajax request button created in the HTML webpage triggers the JavaScript program source code.
- AJAX web request – In which the JavaScript fetch() function sends an HTTP GET web request to the server.php server-side file.
- PHP server response – In this PHP server response, the web script processes the request and returns a JSON response to the JavaScript program.
- Display web request data – Here receives response from JavaScript and Json, and Ajax created element updates the webpage in live dynamic format, here displays a simple text message in this condition.
Here are some manual improvements web developers can make when creating Ajax requests.
- Post request data in PHP – Web developers can send data to a PHP web server by adding a body to the JavaScript fetch() function request, or using the POST internet protocol.
- Request error handling – This allows both the client and server sides to manage and control any errors generated during an Ajax client-server request.
- Live database interaction – In this, a PHP server-side created file can communicate directly with an existing server-side database, allowing the server to process and handle client queries and preview results in a dynamic order on the live server.
Sending data with the POST method in AJAX web development scripts.
Web developers can use the POST method to send Ajax web requests directly to a web server in a formatted format.
fetch(‘server.php’, {
method: ‘POST’,
headers: {
‘Content-Type’: ‘application/json’,
},
body: JSON.stringify({ emp_name: ‘Harry’,emp_id: ‘H101’, age: 32 }) // here this the Example used to send data
})
.then(response => response.json())
.then(data => {
console.log(data);
});
The web developer receives this data in his server.php file in this way.
// here let us Get the raw POST method data
$data = json_decode(file_get_contents(‘php://input’), true);
// here we Access the database file values
$emp_name = $data[’emp_name’];
$emp_id = $data[emp_id’];
$age = $data[‘age’];
$response = array(‘Employee info’ => “Hi, employee name $emp_name. Employee id $emp_id. Employee Age $age is.”);
echo json_encode($response);
Using the above method, users can send and receive client request data in a dynamic format through Ajax requests in JavaScript and PHP programming by applying the get and post methods.
