<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>AJAX basics</title>
</head>
<body>
<script>
let dataStr = ""; // The string received
let dataObj = {}; // The Object retrieved
//AJAX_in_Progress = false; // To show what the process is still in progress use setInterval()
// The AJAX call
function load_info(call_file,function_to_call) {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() { // This function is called when the information arrives
dataStr = this.responseText; // Reciving a STRING !!! (UTF-8 based)
// AJAX_in_Progress = false;
function_to_call(dataStr); // This function is called after the data received
}
xhttp.open("GET", call_file, true);
// AJAX_in_Progress = true;
xhttp.send();
}
// The function to execute after the information arrived.
function show(str)
{
// Something you want to do after receiving the data which may take some time.
dataObj = JSON.parse(str,true); // Convert the string
// Show the data in debug window (use F12)
console.log(dataObj);
document.title = dataObj.site; // Chnage the title of the page
}
load_info("get_data.php", show);
</script>
</body>
</html>
/* THE PHP get_data.php file */
<?PHP
// a JSON info
// To send information to the AJAX you simply use echo to present your data
echo '{"name":"Gideon Koch","site":"GK10.com"}'; // As a string!!!
?>