😎 » JavaScript » Примеры JavaScript » Два способи асинхроного виконання JS
58 0  

Два способи асинхроного виконання 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");
}

winked Про 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"]);

crying Більш детально пр Fetch - офіц. сайт


Залишити свій коментар:

Досвід у веброзробці:

2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2009
2023