sen vývojáře webu – naučte se techniku ​​AJAX

Jediný způsob, jak změnit webovou stránku o nové informace, je obnovit stránku a pracovat na požadavku, ale tento způsob je příliš hrubý a neefektivní. Lepším způsobem, jak dosáhnout stejného výsledku, ale s maximální efektivitou a profesionalitou, je AJAX protokol .

AJAX je zkratka pro Asynchrouns javascript and XML , a navzdory svému názvu může na webovou stránku přinést jakýkoli druh nových dat, aniž by bylo nutné je obnovovat připojením k databázi nebo k rozhraní API.

AJAX dělá v podstatě dvě důležité věci:

• Připojte se k serveru/rozhraní API
• Načtěte data
• Změňte webovou stránku

Každý z tohoto kroku je zcela na našem uvážení, protože jde o techniku, která nabízí velkou flexibilitu v našich koncích a spoustu abstrakce v tom, jak provádí skutečné operace.

Tato technika se používá prostřednictvím javascriptového objektu nazvaného XMLHttpRequest :

const ajax = new XMLHttpRequest();

nyní, když máme objekt, potřebujeme přiřadit funkci onreadystatechange metoda, která bude volána pokaždé, když se změní vnitřní stav objektu:

ajax.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200 {
        // execute what's here
    }
}

Vše uvnitř přiřazené funkce by mělo být vždy uvnitř příkazu if .
První věc, kterou je třeba zkontrolovat, je atribut readyState objektu.
Tyto atributy mohou mít pět různých hodnot v rozsahu od 0 do 4 a 4 znamená, že operace jsou plně dokončeny.
Pro referenci můžete jít sem.

Atribut stavu odkazuje na protokol HTTP:200 znamená, že bylo úspěšné, 404 že to, co bylo požadováno, nebylo nalezeno a tak dále.
Kompletní dokumentaci naleznete zde.

Pokud jsou readyState a status na 4 a 200, znamená to, že vše proběhlo úspěšně a je v tomto stavu, že chcete provést jakoukoli změnu na webové stránce.

Nyní, když je vše nastaveno, potřebujeme pouze načíst data ze serveru. pomocí odeslat funkci inicializujeme požadavek a pomocí odeslat jedním spustíme data:

url= 'https://myapi.com';
ajax.open('GET', url, true);
ajax.send();

otevřené metoda přijímá tři parametry:

1. Metoda požadavku, kterou ve většině případů chceme získat něco
2. Řetězec, který představuje adresu URL, na kterou se má požadavek odeslat
3. Pokud musí být požadavek asynchronní, což je samozřejmě true

metoda send je ta, která provádí všechny operace podtržení potřebné k provedení změn na webové stránce.

Integrace AJAX s naším vybraným backendovým jazykem je velmi snadná, pomocí webového serveru pro hostování našich webových stránek a PHP můžeme nastavit volání určeného skriptu, který provádí operace v podstatě vytvářející naše vlastní API.

Vezměte prosím na vědomí, že bez základních znalostí PHP nebudete schopni plně porozumět dalšímu kódu.

Pojďme vytvořit jednoduchou webovou stránku, která dynamicky vytvoří a aktualizuje tabulku.
Jediný kód, který potřebujeme v našem html souboru, je:

    <label for="cols">rows:</label>
    <input type="text" id="cols" name="cols" onkeyup="SetCols(this.value)" onload="this.value=''">
    <label for="rows">cols:</label>
    <input type="text" id="rows" name="rows" onkeyup="SetRows(this.value)">
    <span id="out"></span>

Tento kód definuje tři jednoduché věci:

• vstupní pole pro sloupec tabulky
• vstupní pole pro řádky tabulky
• rozpětí, které bude obsahovat výstup požadavku AJAX, naši tabulku

Než vysvětlíme skutečný kód, podívejme se na proměnnou, kterou budeme používat:

// before calling our backend we have to first polish the data
// that we are going to send.
// php accepts everything as a request
// our variables are just pieces of the request
// that will then be concatenated 
let cols = '';
let rows = '';
let script = '';
let output = document.getElementById("out");

let ajax = new XMLHttpRequest();
ajax.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        // we receive from the script a table in html
        // and then we replace it with the old one
        output.innerHTML = this.responseText;

    }
}

Jak vidíme v kódu HTML, pokaždé, když změníme hodnotu vstupního pole, zavolá se vyhrazená funkce, která nastavuje řádky a sloupce, podívejme se na ně:

function SetCols(ncols) {
    cols = 'cols=' + ncols;
    if (rows != '') {
        CreateTable();
    }    
}

function SetRows(nrows) {
    rows = 'rows=' + nrows;
    if (cols != '') {
        CreateTable();
    } 
}

Funkce pouze nastaví proměnnou rows nebo cols způsobem, kterému PHP rozumí, a pokud ta druhá není neplatná, zavolá createtable funkce, která:

function CreateTable() {
    script = 'make_ajax_table.php?' + cols + '&' + rows;
    // console.log(script);
    ajax.open('GET', script, true);
    ajax.send();
}

to, co posíláme do PHP skriptu, je jen řádek s požadavkem, který obsahuje rows a cols proměnné.

Nyní se podívejme na skutečný PHP skript:

$cols = $_REQUEST['cols'];
$rows = $_REQUEST['rows'];

try {
    $cols = (int)$cols;
    $rows = (int)$rows;
}  
catch (exception $e) {
    echo 'hi, something strange happened. <br> Let the developers know of this error ' . $e;
} 
finally {
    echo '<table border=1>';
    for($i = 1; $i < $cols+1; $i++)
    {
        echo '<tr>';
        for ($j = 1; $j < $rows+1; $j++)
        {
            echo '<td>' . $j * $i . '</td>';
        }
        echo '</tr>';
    }
    echo '</table>';
}

Vše, co odešleme, se transponuje jako řetězec a poté se vloží do vnitřního kódu HTML značky span.
Pojďme se podívat na konečný výsledek:

Úplný kód najdete v githubu zde