САМОСТОЯТЕЛЬНОЕ ОБУЧЕНИЕ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ
×

JS Учебник

JS Главная JS Введение JS Что? Где? Куда? JS Вывод JS Заявления JS Синтаксис JS Комментарии JS Переменные JS Операторы JS Арифметика JS Присваивания JS Типы данных JS Функции JS Объекты JS События JS Строки JS Методы строк JS Числа JS Методы чисел JS Массивы JS Методы массива JS Сортировка массива JS Итерация массива JS Объекты дат JS Формат дат JS Метод получения дат JS Метод набора дат JS Математические... JS Случайные числа JS Булевы JS Сравнение... JS Заявления if...else JS Заявление switch JS Цикл for JS Цикл while JS Заявление break... JS Преобразование... JS Битовые... JS Регулярные выражения JS Ошибки JS Область JS Подъемный JS Строгий JS Ключевое слово this JS Ключевое слово let JS Константы JS Функция стрелки JS Классы JS Отладчик JS Руководство стиля JS Практика JS Распространенные ошибки JS Эффективность JS Зарезервированные слова JS Версии JS Версия ES5 JS Версия ES6 JS Версия 2016 JS Версия 2017 JS JSON

JS Формы

JS Формы JS Формы API

JS Объекты

Определение объекта Свойства объекта Методы объекта Отображение объекта Доступ к объекту Конструкторы объекта Прототипы объекта ES5 Методы объекта

JS Функции

Определение функции Параметры функции Вызов функции Вызвать функцию Применение функции Закрытие функции

JS Прочее

Классы введение Наследование класса Статические методы... JS Обратный вызов JS Асинхронный JS Обещания JS Асинхронный синтаксис

JS HTML DOM

DOM Введение DOM Методы DOM Документы DOM Элементы DOM HTML DOM CSS DOM Анимация DOM События DOM Прослушиватель событий DOM Навигация DOM Узлы DOM Коллекция DOM Список узлов

JS Браузера BOM

JS Window JS Экран JS Расположение JS История JS Навигатор JS Предупреждение JS Синхронизация JS Cookies

JS AJAX

AJAX Введение AJAX XMLHttp AJAX Запрос на сервер AJAX Ответ с сервера AJAX XML Файл AJAX PHP Файл AJAX ASP Файл AJAX База данных AJAX Приложения AJAX Примеры

JS JSON

JSON Введение JSON Синтаксис JSON или XML JSON Типы данных JSON Парсинг JSON Строки JSON Объекты JSON Массивы JSON PHP JSON HTML JSON JSONP

JS Веб API

API - Введение API - История API - Хранилище API - Работник API - Извлечь файл API - Геолокации

JS или jQuery

jQuery HTML Селекторы jQuery HTML Элементы jQuery CSS Стили jQuery HTML DOM

JS Примеры

JS Примеры JS HTML DOM JS HTML Ввода JS HTML Объекты JS HTML События JS Браузер JS Редактор JS Упражнения JS Викторина JS Сертификат

JS Справочник

JavaScript Объекты HTML DOM Объекты


JavaScript AJAX Отправить запрос на сервер



Объект XMLHttpRequest используется для обмена данными с сервером.


Отправить запрос на сервер

Чтобы отправить запрос на сервер, мы используем методы open() и send() объекта XMLHttpRequest:

xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
Метод Описание
open(method, url, async) Указывает тип запроса

method: тип запроса: GET или POST
url: расположение сервера (файла)
async: true (асинхронный) или false (синхронный)
send() Отправляет запрос на сервер (используется для GET)
send(string) Отправляет запрос на сервер (используется для POST)

GET или POST?

GET проще и быстрее, чем POST и может использоваться в большинстве случаев.

Однако всегда используйте запросы POST, когда:

  • Кэшированный файл не является вариантом (обновить файл или базу данных на сервере).
  • Отправка большого количества данных на сервер (POST не имеет ограничений по размеру).
  • Отправка пользовательского ввода (который может содержать неизвестные символы), POST более надежен и безопасен, чем GET.

GET запросы

Простой GET запрос:

Пример

xhttp.open("GET", "demo_get.asp", true);
xhttp.send();
Попробуйте сами »

In the example above, you may get a cached result. To avoid this, add a unique ID to the URL:

Пример

xhttp.open("GET", "demo_get.asp?t=" + Math.random(), true);
xhttp.send();
Попробуйте сами »

Если вы хотите отправить информацию с помощью GET метода, добавьте информацию в URL:

Пример

xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford", true);
xhttp.send();
Попробуйте сами »


POST запросы

Простой POST запрос:

Пример

xhttp.open("POST", "demo_post.asp", true);
xhttp.send();
Попробуйте сами »

Для POST данных, таких как HTML форма, добавьте HTTP заголовок с расширением setRequestHeader(). Укажите данные, которые вы хотите отправить в send() методе:

Пример

xhttp.open("POST", "ajax_test.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");
Попробуйте сами »
Метод Описание
setRequestHeader(header, value) Добавляет HTTP заголовки для запроса

header: задает имя заголовка
value: определяет значение заголовка

URL адрес - файл на сервере

Параметр url open() метода - это адрес файла на сервере:

xhttp.open("GET", "ajax_test.asp", true);

Это может быть файл любого типа, например .txt и .xml, или файлы серверных сценариев, например .php и .php (которые могут выполнять действия на сервере перед отправкой ответа).


Асинхронный - true или false?

Запросы к серверу следует отправлять асинхронно.

Параметр async метода open() должен иметь значение true:

xhttp.open("GET", "ajax_test.asp", true);

Посылая асинхронно, JavaScript не должен ждать ответа сервера, но вместо этого может:

  • выполнять другие скрипты, ожидая ответа сервера
  • обработывать ответ после того, как ответ будет готов

Свойство onreadystatechange

С помощью XMLHttpRequest объекта вы можете определить функцию, которая будет выполняться, когда запрос получит ответ.

Функция определяется в onreadystatechange свойстве XMLHttpRequest объекта:

Пример

xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("demo").innerHTML = this.responseText;
  }
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
Попробуйте сами »

Вы узнаете больше об этом onreadystatechange в следующей главе.


Синхронный запрос

Чтобы выполнить синхронный запрос, измените третий параметр в open() методе на false:

xhttp.open("GET", "ajax_info.txt", false);

Иногда async = false используется для быстрого тестирования. Вы также найдете синхронные запросы в старом коде JavaScript.

Поскольку код будет ждать завершения работы сервера, в onreadystatechange функции нет необходимости:

Пример

xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;
Попробуйте сами »

Синхронный XMLHttpRequest (async = false) не рекомендуется, потому что JavaScript перестанет выполняться, пока не будет готов ответ сервера. Если сервер занят или работает медленно, приложение зависнет или остановится.

Синхронный XMLHttpRequest находится в процессе удаления из веб стандарта, но этот процесс может занять много лет.

Современные инструменты разработчика могут предупреждать об использовании синхронных запросов и могут вызывать исключение InvalidAccessError, когда это происходит.