JavaScript Ajax GET Demo

AJAX — Server Response

The responseText property returns the server response as a JavaScript string, and you can use it accordingly:

Example

The responseXML Property

The XMLHttpRequest object has an in-built XML parser.

The responseXML property returns the server response as an XML DOM object.

Using this property you can parse the response as an XML DOM object:

Example

Request the file cd_catalog.xml and parse the response:

const xmlDoc = xhttp.responseXML;
const x = xmlDoc.getElementsByTagName(«ARTIST»);

let txt = «»;
for (let i = 0; i < x.length; i++) txt += x[i].childNodes[0].nodeValue + "
«;
>
document.getElementById(«demo»).innerHTML = txt;

Server Response Methods

Method	Description
getResponseHeader()	Returns specific header information from the server resource
getAllResponseHeaders()	Returns all the header information from the server resource

The getAllResponseHeaders() Method

The getAllResponseHeaders() method returns all header information from the server response.

Example

const xhttp = new XMLHttpRequest();
xhttp.onload = function() document.getElementById(«demo»).innerHTML =
this.getAllResponseHeaders();
>
xhttp.open(«GET», «ajax_info.txt»);
xhttp.send();

The getResponseHeader() Method

The getResponseHeader() method returns specific header information from the server response.

Example

const xhttp = new XMLHttpRequest();
xhttp.onload = function() document.getElementById(«demo»).innerHTML =
this.getResponseHeader(«Last-Modified»);
>
xhttp.open(«GET», «ajax_info.txt»);
xhttp.send();

Источник

Руководство по Ajax в JavaScript

Ajax расшифровывается как Asynchronous Javascript And Xml. Ajax — это просто средство загрузки данных с сервера и выборочного обновления частей веб-страницы без перезагрузки всей страницы.

По сути, Ajax использует встроенный в браузер объект XMLHttpRequest (XHR) для асинхронной отправки и получения информации на веб-сервер и с него в фоновом режиме, не блокируя страницу и не влияя на работу пользователя.

Ajax стал настолько популярным, что вы вряд ли найдете приложение, которое в некоторой степени не использует Ajax. Примером некоторых крупномасштабных онлайн-приложений на основе Ajax являются: Gmail, Google Maps, Google Docs, YouTube, Facebook, Flickr и многие другие.

Ajax — это не новая технология, на самом деле Ajax вообще не является технологией. Ajax — это просто термин, обозначающий процесс асинхронного обмена данными с веб-сервера через JavaScript без обновления страницы.

Не смущайтесь букве X (то есть XML ) в термине AJAX. Он сохранился в аббревиатуре по историческим причинам. Другой формат обмена данными, такой как JSON, HTML или простой текст, может использоваться вместо XML.

Как работает Ajax

Для осуществления Ajax-связи JavaScript использует специальный объект, встроенный в браузер — объект XMLHttpRequest (XHR) — для отправки HTTP-запросов на сервер и получения данных в ответ.

Все современные браузеры (Chrome, Firefox, IE7 +, Safari, Opera) поддерживают объект XMLHttpRequest .

Следующая иллюстрация демонстрирует, как работает Ajax-связь:

Поскольку Ajax-запросы обычно являются асинхронными, выполнение сценария продолжается, как только отправляется запрос Ajax, т. е. браузер не будет останавливать выполнение сценария до тех пор, пока ответ сервера не вернется.

В следующем разделе мы обсудим каждый шаг, вовлеченный в этот процесс один за другим:

Отправка запроса и получение ответа

Прежде чем выполнить Ajax-связь между клиентом и сервером, первое, что вы должны сделать, — создать экземпляр объекта XMLHttpRequest , как показано ниже:

var request = new XMLHttpRequest();

Теперь следующим шагом при отправке запроса на сервер является создание экземпляра вновь созданного объекта запроса с помощью метода open() объекта XMLHttpRequest .

Метод open() обычно принимает два параметра — метод HTTP-запроса для использования, такой как «GET», «POST» и т. д., и URL-адрес для отправки запроса, например:

request.open("GET", "info.txt"); -Or- request.open("POST", "add-user.php");

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

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

request.send(); -Or- request.send(body);

Метод send() принимает необязательный параметр body , который позволяет нам указать тело запроса. В основном это используется для запросов HTTP POST, так как запрос HTTP GET не имеет тела запроса, а только заголовки.

Метод GET обычно используется для отправки небольшого объема данных на сервер, в то время как метод POST используется для отправки большого объема данных, таких как данные формы.

В методе GET данные отправляются как параметры URL. Но в методе POST данные отправляются на сервер как часть тела HTTP-запроса. Данные, отправленные методом POST, не будут видны в URL.

См. Руководство по GET и POST запросам в PHP для подробного сравнения этих двух методов.

В следующем разделе мы подробнее рассмотрим, как работают Ajax-запросы.

Выполнение AJAX GET-запроса

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

В следующем примере показано, как сделать AJAX GET-запрос в JavaScript.

        
Содержимое поля DIV результата будет заменено ответом сервера
 
 Display Full Name  

Когда запрос асинхронный, метод send() возвращается сразу после отправки запроса. Поэтому перед обработкой необходимо проверить, где находится ответ в его жизненном цикле, используя свойство readyState объекта XMLHttpRequest .

readyState — это целое число, которое указывает состояние HTTP-запроса. Кроме того, функция, назначенная обработчику события onreadystatechange , вызывается каждый раз, когда изменяется свойство readyState . Возможные значения свойства readyState приведены ниже.

Номер	Значение	Описание
0	UNSENT	Объект XMLHttpRequest создан, но метод open() еще не был вызван (т.е. запрос не инициализирован).
1	OPENED	Вызван метод open() (т.е. установлено соединение с сервером).
2	HEADERS_RECEIVED	Метод send() был вызван (то есть сервер получил запрос).
3	LOADING	Сервер обрабатывает запрос.
4	DONE	Запрос обработан и ответ готов.

Теоретически событие readystatechange должно запускаться каждый раз, когда изменяется свойство readyState . Но большинство браузеров не запускают это событие, когда readyState изменяется на 0 или 1. Однако все браузеры запускают это событие, когда readyState изменяется на 4.

Свойство status возвращает числовой код состояния HTTP ответа XMLHttpRequest . Некоторые из распространенных кодов состояния HTTP перечислены ниже:

• 200 — Сервер успешно обработал запрос.
• 404 — Сервер не может найти запрошенную страницу.
• 503 — Сервер временно недоступен.

Подробнее см. Список HTTP-кодов состояний о статусе запроса для получения полного списка кодов ответов.

Вот код из нашего файла greet.php , который просто создает полное имя человека, объединяя его имя и фамилию и выводя приветственное сообщение.

Выполнение AJAX POST-запроса

Метод POST используется в основном для отправки данных форм на веб-сервер. В следующем примере показано, как отправить данные форм на сервер с помощью Ajax.

        
Имя: 
 
Комментарий: 
Отправить комментарий
  
Содержимое поля DIV результата будет заменено ответом сервера
 
  

Если вы не используете объект FormData для отправки данных формы, например, если вы отправляете данные формы на сервер в формате строки запроса, то есть request.send(key1=value1&key2=value2) , вам необходимо явно установить заголовок запроса с использованием метода setRequestHeader() , например:

request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

Метод setRequestHeader() должен вызываться после вызова open() , но перед вызовом send() .

Некоторые общие заголовки запроса: application/x-www-form-urlencoded , multipart/form-data , application/json , application/xml , text/plain , text/html и т. д.

Объект FormData предоставляет простой способ создания набора пар ключ/значение (key/value), представляющих поля формы и их значения, которые можно отправлять с помощью метода XMLHttpRequest.send() . Переданные данные имеют тот же формат, который использовался бы для отправки данных методом submit() формы, если тип кодировки формы был установлен на multipart/form-data .

Вот код файла confirmation.php , который просто выводит значения, представленные пользователем.

Привет, $name. Ваш комментарий был успешно получен.
"; echo "
Вот комментарий, который вы ввели: $comment
"; > else < echo "
Пожалуйста, заполните все поля формы!
"; > > else < echo "
Что-то пошло не так. Пожалуйста, попробуйте еще раз.
"; > ?>

Из соображений безопасности браузеры не разрешают делать междоменные Ajax-запросы. Это означает, что вы можете отправлять запросы Ajax только на URL-адреса того же домена, что и исходная страница, например, если ваше приложение работает на домене mysite.com , вы не можете сделать Ajax-запрос на othersite.com или любой другой домен.

Однако вы можете загружать изображения, CSS-таблицы, JS-файлы и другие ресурсы из любого домена.

Ознакомьтесь с методами Ajax в jQuery для быстрой и беспроблемной реализации Ajax. Инфраструктура jQuery предоставляет очень удобные методы для реализации функциональности Ajax.

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 4.8 / 5. Количество оценок: 4

Оценок пока нет. Поставьте оценку первым.

Похожие посты

Руководство по сортировке массивов в JavaScript

Сортировка — обычная задача при работе с массивами. Она будет использоваться, например, если вы захотите отобразить названия городов или регионов в алфавитном порядке. JavaScript массив (array) имеет встроенный метод sort() для сортировки элементов массива в алфавитном порядке. Следующий пример демонстрирует, как это работает: Реверсирование массива Вы можете использовать метод reverse(), чтобы изменить порядок элементов массива…

Руководство по массивам в JavaScript

Массивы — это сложные переменные, которые позволяют нам хранить группы значений под одним именем переменной. Массивы JavaScript могут хранить любое допустимое значение, включая строки, числа, объекты, функции и даже другие массивы, что позволяет создавать более сложные структуры данных, такие как массив объектов или массив массивов. Предположим, вы хотите сохранить название цветов в своем коде JavaScript….

Руководство по работе с атрибутами DOM в JavaScript

Атрибуты — это специальные слова, используемые внутри начального тега HTML-элемента для управления поведением тега или предоставления дополнительной информации о теге. JavaScript предоставляет несколько методов для добавления, удаления или изменения атрибутов HTML-элемента. В этом разделе мы узнаем об этих методах подробно. Получение значения атрибута элемента Метод getAttribute() используется для получения текущего значения атрибута элемента. Если указанный…

Разработка сайтов для бизнеса

Если у вас есть вопрос, на который вы не знаете ответ — напишите нам, мы поможем разобраться. Мы всегда рады интересным знакомствам и новым проектам.

Источник