Два способи асинхроного виконання JS
Розглянемо варіант коли нам по кліку на кнопку:
<button type="button" onclick="loadXMLDoc()">Change Content</button>
потрібно завантажити вміст іншого файлу в блок (< p id="file-body-view"></p >) асинхронно - без перезавантаження сторінки.
1 Спосіб (XMLHttpRequest) асинхроного запиту - старий:
// Ajax запит на завантаження файлу
function loadXMLDoc() {
var xmlhttp;
if (window.XMLHttpRequest) {xmlhttp = new XMLHttpRequest();} // Для нових браузерів
else {xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}// Для старих браузерів
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// отримані дані відправляємо в блок - .file-body-view
document.getElementById("file-body-view").innerHTML = this.responseText;
//або консоль: console.log(this.responseText);
}
};
// Просто отримуємо дані з файлу
xmlhttp.open("POST", "<?=$url_adm;?>/0-CORE/FileClass/File_Load.php", true);
xmlhttp.send("");
// або передаємо спочатку ще пост запит - і отримуємо дані з файлу
xmlhttp.open("POST", "<?=$url_adm;?>/0-CORE/ModalClass/modal_mini.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");
}
Про XMLHttpRequest - читати тут
2-й Спосіб (Fetch) - сучасний
function loadXMLDoc() {
fetch("<?=$url_adm;?>/0-CORE/FileClass/File_Load.php", {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({some_var: "test123"})
}).then(response => response.json()).then(json => {
document.getElementById("file-body-view").innerHTML = json?.some_response
});
}
// У файлі PHP з якого ми тягнемо міст має бути:
if( empty($_POST) ){ $_POST = json_decode(file_get_contents('php://input'), true); }
$var = $_POST['some_var'];
print json_encode(['some_response' => $var . " plus 444"]);
Більш детально пр Fetch - офіц. сайт