AJAX PHP Framework
PHP is a scripting language and AJAX is a method of calling in asynchronous way to web-server programs or scripts.
AJAX is not any programming language. It is way of calling to web-server or script present on the web-server. AJAX calls can be made by VBSCRIPT, JAVASCRIPT as well as using popular client-side library like JQuery. Definitely, when AJAX method of calling a web-server is used, somebody e.g. script or program or application should be present on the web-server to listen to that call coming from browser and respond to it.
Take an example. When a browser requests a website say, Quora , browser sends request to web-server to give the complete HTML page for rendering. The complete HTML page consists of all the content between tags <html> and </html>.
Once the complete page is received by the browser, it is rendered by the browser and complete DOM (Document Object Model) of the HTML page is created.
If other web-page of the same website is needed, browser needs to make another call to web-server to get another complete page between tags <html> and </html>. The relation between browser and web-server is state-less. Neither browser or web-server records the state information of browsing and navigation from one page to another. Browser records only history of browsing which web-server can not access. Besides history, browser does not contain navigational state information of browsing.
If reloading of complete page is to be avoided, asynchronous call like ajax can be used to update only smaller portion of the web-page which needs to be changed. So ajax call can be used to update some portion of the web-page without loading complete web-page or going to entirely any other web-page. Changing of small portion of web-page means manipulating the concerned HTML element object of the complete DOM Model.
Since browser can execute JavaScript , AJAX call can be made using JavaScript. In following way, AJAX call can be made to web-server using JavaScript :
<!DOCTYPE html>
<html>
<head>
<script>
function change_text() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById(“text_to_be_changed””).innerHTML = this.responseText;
}
};
xhttp.open(“GET”, “new_content.txt”, true);
xhttp.send();
}
</head>
</script>
<body>
<div id=”text_to_be_changed”>
<h2>I am going to change after button is clicked.</h2>
</div>
<button type=”button” onclick=”change_text()”>Change Text</button>
</body>
</html>
In the above code, when button is clicked, JavaScript function “change_text()” makes ajax call to the same web-server and requests to transfer file “new_content.txt” to browser. Once the browser recieves the complete file, it changes the DOM element object having id “text_to_be_changed”.
So web-page is changed without completely loading it.
The question arising here is which script or application is receiving the request ? Off course, the web-server listening on default port 80 for http requests.
<!DOCTYPE html>
<html>
<head>
<script src=”https://code.jquery.com/jquery-2.2.3.min.js”
integrity=”sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=”
crossorigin=”anonymous”></script>
<script>
$(document).ready(function()
{
var url_to_get_data = ‘http://www.yourdomain.com”;
$.ajax({
url: url_to_get_data,
data: {
format: ‘text’
},
error: function() {
},
dataType: ‘text’,
success: function(data) {
document.getElementById(“text_to_be_changed””).innerHTML = data;
},
type: ‘GET’
});
});
</head>
</script>
<body>
<div id=”text_to_be_changed”>
<h2>I am going to change after button is clicked.</h2>
</div>
<button type=”button” onclick=”change_text()”>Change Text</button></body>
</html>
Same functionality can be achieved using jQuery. jQuery is an advanced JavaScript library.
In the above example, “index.html” lying in web-server root folder “public_html” is responsible for returning data to the call. If the call will be successful, “success” function will be called.
PHP script lying on web-server can be used to handle ajax call like:
$(document).ready(function()
{
var url_to_get_data = ‘http://www.yourdomain.com/my_file_controller.php’;
$.ajax({
url: url_to_get_data,
data: {
format: ‘text’
},
error: function() {
},
dataType: ‘text’,
success: function(data) {
document.getElementById(“text_to_be_changed””).innerHTML = data;
},
type: ‘GET’
});
});
PHP scripts are helpful in building server logic and handling ajax requests for web-page change from
front-end (UI/UX). The above call can be handled by PHP script file “my_file_controller.php” as :
<?php
echo file_get_contents(‘new_content.txt’);
?>
In this way , we can combine ajax calls and php scripts to update the content on web-page without reloading.
This technique is foundation of MVC(Model-View-Controller) design pattern used for large portal and web-site development.
