Практика в Ajax

@golosalex · Регистрация: 02.07.2013

Студворк — интернет-сервис помощи студентам

здравствуйте, проблема такая: хочу попрактиковаться и научиться работе с ajax, гугл запросы все время выдают мне jquery, а я бы хотел сперва понять как все работает в нативе, если кто подскажет мне, что почитать буду признателен.

некоторое количество информации я на сайте learnJS почерпнул, но хотелось бы получить более понятное представление.

JavaScript
1
2
3
var xhr = new XMLHttpRequest();
 
xhr.open('GET', 'ajaxScript.php', false);

тут я создаю объект XMLHttpRequest и начинаю создавать GET запрос к ajaxScript.php, который лежит рядом с index.php

JavaScript
1
xhr.send();

тут я отправляю запрос, а то что выплюнет сервер попадет сюда:

JavaScript
1
xhr.responseText

данные можно отправить в get через url, а вот как быть с post я не разобрался, слишком много возни с кодировками и не ясно описан процесс. расскажите на простеньком примере пожалуйста, второй вопрос в том как все это общение подружить с JSON чтоб и сервер его выдавал(PHP) и AJAX. буду вам страшно признателен, если будет без Jquery, на нативном JS. если вы считаете что надо юзать библиотеку, то подскажите мне какую.(уважаемые мной люди говорили, что неплохо бы к jquery не привыкать)

Qwerty_Wasd · 03.10.2018, 07:28

golosalex, почему бы не документация? И с примерами - https://developer.mozilla.org/... 1%82%D1%8C
+ https://xhr.spec.whatwg.org/

Сообщение от golosalex

а вот как быть с post я не разобрался, слишком много возни с кодировками

да особой разницы в коде не будет. Единственное, что нужно помнить, что при POST запросе нужно серверу передать заголовок Content-Type, чтобы он знал какой mime-тип ответа вернуть и в какой кодировке - https://developer.mozilla.org/... uestHeader

Qwerty_Wasd · 03.10.2018, 09:59

Сообщение от golosalex

второй вопрос в том как все это общение подружить с JSON чтоб и сервер его выдавал(PHP) и AJAX.

Вот Вам маленький пример - изучайте
index.html

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html lang="ru">
  <head>
    <title>
      XMLHttpRequest
    </title>
    <meta charset="UTF-8"/>
  </head>
  <body>
    <label>
      Имя
      <input id='fName' type="text" name="fisrt-name"/>
    </label>
    <label>
      Фамилия
      <input id='lName' type="text" name="last-name"/>
    </label>
    <button class="btn">
      Отправить
    </button>
    <div class="result">
    </div>
    <script>
    let btnOut = document.querySelector('.btn'),
    result = document.querySelector('.result');
    const load = e => {
    let xhr = new XMLHttpRequest();
    const getXHR = () => xhr.readyState != 4 || xhr.status != 200 ? result.insertAdjacentHTML('afterbegin', xhr.response) : console.log("ответ с сервера не получен");
    xhr.open("POST", "handler.php", true);
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=utf-8");
    xhr.addEventListener('readystatechange', getXHR);
    xhr.send(`fName=${encodeURIComponent(fName.value)}&lName=${encodeURIComponent(lName.value)}`);
    }
    btnOut.addEventListener('click',load);
    </script>
  </body>
</html>

handler.php

PHP/HTML
1
2
3
4
5
6
7
8
<?php
if (isset($_POST["fName"]) && isset($_POST["lName"]) ) {
    $result = array(
        'name' => $_POST["fName"],
        'lastname' => $_POST["lName"]);
    echo json_encode($result);
    }
?>

@golosalex · 03.10.2018, 14:38 **[ТС]**

еще уточню на всякий случай, какими инструментами ajax можно упростить? интересуют специализированные библиотеки. или вполне нормальная практика писать на нативном JS?

Qwerty_Wasd · 03.10.2018, 14:57

golosalex,

Сообщение от golosalex

нормальная практика писать на нативном JS

вопрос субъективен. Мне норм. Кому-то нет. Вам как?

Сообщение от golosalex

можно упростить?

уже давно сделано - https://developer.mozilla.org/... sing_Fetch
еще вариант - https://developer.mozilla.org/... ockets_API

@j2FunOnly · 04.10.2018, 10:22

Сообщение от golosalex

интересуют специализированные библиотеки

как вариант https://github.com/axios/axios

@golosalex · 12.10.2018, 03:58 **[ТС]**

Сообщение от Qwerty_Wasd

Вот Вам маленький пример - изучайте
index.html

мне немного неловко, но я не смог до конца понять 28-ю строку. и как следствие дальше тоже не доконца вник.
попробую уточнить, что я понял и не понял:

JavaScript
1
const getXHR = () => xhr.readyState != 4 || xhr.status != 200 ? result.insertAdjacentHTML('afterbegin', xhr.response) : console.log("ответ с сервера не получен");

сперва объявляется константа "getXHR" ей присваевается стрелочная функция, которая ничего не принимает и которая не пойми что возвращает... мне кажется что это скорее всего true или false. в каких случаях она что вернет я не смог понять... слишком много всего наворочено: логическое выражение из незнакомых мне свойств, которые к тому же неявно приводятся к логическому значению внутри тернарного оператора. я возможно догадываюсь, что здесь перебираются все возможные случаи типа ответа от сервера нет, статус ответа не 200, или еще какая-то ботва, но деталей не разобрал и повторить ход мыслей не смогу.

вспоминаю первый курс универсета, когда так и норовят износиловать мозг особо изощренным способом... неужели вот в ajax нужно входить с таким подходом? где же нубокод?

Qwerty_Wasd · 12.10.2018, 08:33

golosalex,

Сообщение от golosalex

мне немного неловко, но я не смог до конца понять 28-ю строку.

Все нормально )) Ф-я не всегда что-то возвращает. Она может быть просто именованным блоком команд. В данном случае выражение что Вы не поняли, называется функциональным == function expression в купе со стрелочной. Так вот все что делает 28 строка, это проверяет состояние объекта XMLHttpRequest и в случае удачного запроса выполняет операцию
разбора ответа от сервера как HTML\XML кода и вставки полученных узлов в начало result элемента, перед всеми дочерними

JavaScript
1
 result.insertAdjacentHTML('afterbegin', xhr.response)

в противном случае

JavaScript
1
console.log("ответ с сервера не получен")

При написании я просто использовал синтаксис ES6. Вам нужно поизучать его, ибо теперь он норма.
Для того чтобы было полегче, вот тот же код в синтаксисе ES5 -

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
'use strict';
var btnOut = document.querySelector('.btn'),
    result = document.querySelector('.result');
var load = function (e) {
    var xhr = new XMLHttpRequest();
    var getXHR = function () {
        if (xhr.readyState != 4 || xhr.status != 200) result.insertAdjacentHTML('afterbegin', xhr.response);
            else  console.log("ответ с сервера не получен");
    };
    xhr.open("POST", "handler.php", true);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=utf-8");
    xhr.addEventListener('readystatechange', getXHR);
    xhr.send('fName=' + encodeURIComponent(fName.value) + '&lName=' + encodeURIComponent(lName.value));
};
btnOut.addEventListener('click', load);

@golosalex · 12.10.2018, 12:10 **[ТС]**

спасибо, теперь понял. проверка

JavaScript
1
readyState!=4

нужно для того чтобы пропустить 4 первых состояния?https://developer.mozilla.org/... readyState вот я об этом... сразу не догадался.

Qwerty_Wasd · 12.10.2018, 14:52

golosalex,

Сообщение от golosalex

пропустить 4 первых состояния

все верно

@golosalex · 29.10.2018, 06:22 **[ТС]**

то что вы написали я понял, но необходимость писать повторяющийся код для каждого Ajax меня беспокоит, метод рабочий, но хотелось бы написать функции для такого метода работы:

допустим надо повесить обработчик событий на кнопку, чтоб при нажатии браузер обменялся данными с сервером и что-то выполнил. сразу обращает внимание на себя некоторая шаблонность: все такие обработчики событий будут иметь у себя одинаковую функциональность послать и принять JSON строку(обмен данными), а потом уже ее переварить в остальной части кода обработчика события будет привычно, есть небольшое понимание как это сделать синхронным запросом, чтобы как раз эта остальная часть кода дождалась выполнения функции по обмену кодом, но все говорят что им пользоваться на постоянной основе грех. как же быть? подскажите решение, а то на ум мне приходят только жуткие костыли.

Добавлено через 1 час 47 минут
вот немного костыльный подход:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
let someElement=document.querySelector('.bottom');
 
someElement.addEventListener('click',function(){
    let request="someJson";
    ajax(request, function(arg){
        someElement.innerHTML=arg;
    });
    function ajax(json, doAfter){
        let xhr=new XMLHttpRequest();
        xhr.addEventListener("readystatechange",check);
        xhr.open("POST","auto.php",true);
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded; charset=utf-8");
        xhr.send(`body=${encodeURIComponent(json)}`);
 
        function check(){
            if (xhr.readyState!=4) return false;
            else {
                if (xhr.status==200){
                    console.log("response = " + xhr.response);
                    doAfter(xhr.response);
                }
                else{
                    console.log("error request to server");
                }
            }
        }
    }
});

в принципе жить можно, но хотел бы узнать у вас плох ли мой код, а если плох, то почему и как сделать лучше?

Добавлено через 14 минут
само собой функцию ajax надо снаружи размещать, описка)

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
let someElement=document.querySelector('.bottom');
 
someElement.addEventListener('click',function(){
    let request="someJson";
    ajax(request, function(arg){
        someElement.innerHTML= arg;
    });
});
function ajax(json, doAfter){
    let xhr=new XMLHttpRequest();
    xhr.addEventListener("readystatechange",check);
    xhr.open("POST","auto.php",true);
    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded; charset=utf-8");
    xhr.send(`body=${encodeURIComponent(json)}`);
 
    function check(){
        if (xhr.readyState!=4) return false;
        else {
            if (xhr.status==200){
                console.log("response = " + xhr.response);
                doAfter(xhr.response);
            }
            else{
                console.log("error request to server");
            }
        }
    }
}

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .	Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .
Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .	SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .	SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .

@golosalex 151 / 135 / 29 Регистрация: 02.07.2013 Сообщений: 967
	03.10.2018, 14:38 [ТС]
	еще уточню на всякий случай, какими инструментами ajax можно упростить? интересуют специализированные библиотеки. или вполне нормальная практика писать на нативном JS? 0

Практика в Ajax

Решение