Button Click event to change the contents of a PHP page using AJAXButton Click event to change the contents of a PHP page using AJAX
AJAX Sample Codes

Change the contents of a web page using AJAX in PHP

This is a small example to learn button click event to change the contents of a web page using AJAX in PHP. AJAX is mainly focused on changing the content of a web page without reload the whole page. Only a small portion of a web page gets refreshed by sending the data to the server asynchronously.

Asynchronously means when we send data to the server we don’t need to wait for the response from the server .At the same time we can do other operations parallel. Synchronous means when we send a request to the server we should have to wait for the response from the server in order to proceed the other operations in the web page. This tutorial for button click event to change the content of a web page using AJAX in PHP is explained in a very simple way.

Change the contents of a web page using ajax in PHP

I hope you all have installed PHP in your system. For those who have not yet configure PHP in your system please check this site for the installation of PHP in Ubuntu. Please visit this link for more details : https://codeunplug.com/how-to-install-php-in-ubuntu/ . Once you finished installation of PHP in Ubuntu follow the steps to learn the button click event to change the content of a web page using AJAX in PHP.

First we need to create a text file that contains the following content. Here  I have created a text file called Ajaxtutorial. The content in the text file is

Ajaxtutorial.txt

AJAX technology (AJAX = Asynchronous JavaScript And XML) is a developer’s dream because it can be used to update a content of a web page without reloading the whole page.

Second step is to create a PHP page as shown below. The name of a web page is Ajaxtest1.php. The code for a button click event to change the content of a web page using AJAX is shown in the Ajaxtest1.php page.

 

Ajaxtest1.php

<!DOCTYPE html>

<html>

<body>

<h1>AJAX object to Change the Content of Paragraph</h1>

<p id="p1">In conventional web applications data from the server and data to the server

are sending synchronously.Which means that when we hit the submit button,

it will direct to a new page with new content.By using AJAX we can update

the part of a web page by sending the data to the server or retrieve data

from the server asynchronously. </p>

<button type="button" onclick="changeContent()">Click To Change Paragraph Content Using AJAX</button>

<script>

function changeContent() {

var obj = new XMLHttpRequest();

obj.open("GET", "home.txt", true);

obj.send();

obj.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {

document.getElementById("p1").innerHTML = this.responseText;

}

};

}

</script>

</body>

</html>

 

When we load the Ajaxtest1.php page in the web browser, the  page design will be as shown below.

 

Button Click event to change the contents of a PHP page using AJAXButton Click event to change the contents of a PHP page using AJAX
Web Page Design

When we click on the button showing “Click To Change Paragraph Content Using AJAX” , the contents in the paragraph get replaced by the contents in the text file as shown below. Here we can see that the button click event to change the content of a web page using AJAX.

 

When we click on the button showing “Click To Change Paragraph Content Using AJAX” , the contents in the paragraph get replaced by the contents in the text file as shown below. Here we can see that the button click event to change the content of a PHP page using AJAX.
Button Click event to change the contents of a web page using AJAX

One Reply to “Change the contents of a web page using AJAX in PHP

Leave a Reply

Your email address will not be published.