Взаимодействие клиент-сервер чистый js-php.

Получить обычный text/html

В этом случае на стороне клиента пишем:

send();

async function send() {
    let url = '/answer.php';
    let response = await fetch(url);

    if (response.ok) {
        let text = await response.text();
        console.log(text);
    } else {
        console.log("Ошибка HTTP: " + response);
    }
}

На стороне сервера подготавливаем файл /answer.php возвращающий обычную строку

<?
$answer = 'some simple string';
echo $answer;

Получить json массив или объект

На стороне клиента пишем:

send();

async function send() {
    let url = '/answer.php';
    let response = await fetch(url);

    if (response.ok) {
        let json = await response.json();
        console.log(json);
    } else {
        console.log("Ошибка HTTP: " + response);
    }
}

На стороне сервера файл /answer.php:

<?
$answer = array('status'=>'good', 'body'=>'what is need');
echo json_encode($answer);

Различия

На клиентской стороне в обработчике промиса ставим await response.text(); либо await response.json();

На серверной стороне отличие в том, чтобы заворачивать или нет ответ в json_encode($answer);

Способ получения данных можно оформить в виде параметра функции и условия:

async function send(url = '', way = '') {
    let response = await fetch(url), result;

    if (response.ok) {
        if (way == 'json') {
            result = await response.json();
        } else {
            result = await response.text();
        }
        console.log(result);
    } else {
        console.log("Ошибка HTTP: " + response);
    }
}

Итог

Ответ можно возвращать обычным текстом, но у json есть преимущество: он может в виде ассоциативного массива вернуть нам не одну, а множество строк, которые после js может разместить в разных местах. Плюс к этому можно передавать параллельно и поток ответов и поток ошибок, что важно в том случае, когда ошибки не являются критическими для исполнения, но важны для логирования и отладки.

Добавить комментарий

Ваш адрес email не будет опубликован.