XMLHttpRequest (AJAX) — отправка и обработка ответов http-запросов с помощью JavaScript.


Оглавление (нажмите, чтобы открыть):

XMLHttpRequest против Fetch API: что лучше для отправки Ajax в 2020 году?

В марте 2020 года будет юбилей, 20-летие Ajax. Первая реализация XMLHttpRequest была выпущена в 1999 году как компонент ActiveX IE5.0.

До этого существовали способы извлечения данных с сервера без полного обновления страницы, но они часто полагались на неуклюжие методы, такие как внедрение script или сторонние плагины. Microsoft разработала первичную версию XMLHttpRequest для браузерной альтернативы своему почтовому клиенту Outlook.

XMLHttpRequest не был веб-стандартом до 2006 года, но он был реализован в большинстве браузеров. Его принятие в Gmail (2004) и Google Maps (2005) привело к появлению в 2005 году статьи Джесси Джеймса Гарретта AJAX: новый подход к веб-приложениям. Новый термин кристаллизуется в центре внимания разработчиков.

AJAX для Ajax

AJAX — это мнемоника Asynchronous JavaScript and XML. “Асинхронный” определенно, но:

  • Выбран JavaScript, хотя были и другие варианты, VBScript и Flash
  • Полезная нагрузка не должна была быть в формате XML, хоть это и было популярно в то время. Сегодня обычно предпочтительнее использовать JSON.

Теперь мы используем «Ajax» в качестве общего термина для любого процесса на стороне клиента, который извлекает данные с сервера и динамически обновляет DOM без полного обновления страницы. Ajax — это основной метод для большинства веб-приложений и одностраничных приложений (SPA).

Экстремальный XMLHttpRequest

Следующий код JavaScript показывает базовый HTTP-запрос GET для http://domain/service с использованием XMLHttpRequest (обычно сокращается до XHR):

Объект XMLHttpRequest имеет много других параметров, событий и свойств ответа. Например, тайм-аут в миллисекундах может быть установлен и обнаружен:

и событие progress может сообщить о длительной загрузке файла:

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

Быстрая перемотка Fetch

Fetch API является современной альтернативой XMLHttpRequest. Универсальные интерфейсы Headers, Request и Response обеспечивают согласованность, в то время как Promises позволяют упростить цепочки и async/await без обратных вызовов. Приведенный выше пример XHR можно преобразовать в гораздо более простой код на основе Fetch, который даже анализирует возвращенный JSON:

Fetch — чистый, элегантный, простой для понимания и интенсивно используемый в PWA Service Workers. Почему бы вам не использовать его вместо древнего XMLHttpRequest?

К сожалению, веб-разработка никогда не бывает такой четкой. Fetch еще не является полноценной заменой методов Ajax…

Поддержка браузера

Fetch API достаточно хорошо поддерживается, но он не будет работать во всех выпусках Internet Explorer. Люди, использующие версии Chrome, Firefox и Safari старше 2020 года, также могут испытывать проблемы. Эти пользователи могут составлять небольшую часть ваших пользователей. или это может быть основной клиент. Всегда проверяйте, прежде чем начать кодирование!

Cookieless по умолчанию

В отличие от XMLHttpRequest, не все реализации Fetch будут отправлять куки-файлы, поэтому аутентификация вашего приложения может быть неудачной. Проблема может быть исправлена путем изменения параметров инициации, передаваемых во втором аргументе, например:

Ошибки не отклоняются

Удивительно, но ошибка HTTP, такая как 404 Page Not Found или 500 Internal Server Error, .catch() никогда не запускается. Обычно он разрешается с состоянием response.ok, установленным в false.

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

Тайм-ауты не поддерживаются

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

…или, возможно, используйте Promise.race()

Отмена в Fetch

Запрос XHR легко завершить с помощью xhr.abort() и, при необходимости, обнаружить такое событие с помощью функции xhr.onabort.

Прекращение отправки было невозможно в течение нескольких лет, но теперь оно поддерживается в браузерах, которые реализуют API AbortController. Это запускает сигнал, который может быть передан объекту инициации Fetch:

Обработка может быть прервана вызовом controller.abort(). Promise отклоняет, поэтому вызывается функция .catch().

Нет прогресса

На момент написания, Fetch не поддерживает события прогресса. Поэтому невозможно сообщить о статусе загрузки файлов или аналогичных представлений больших форм.

XMLHttpRequest против Fetch API?

В конечном счете, выбор за вами. если только у вашего приложения нет клиентов использующих IE, которым требуются индикаторы загрузки.

Для простых вызовов Ajax, XMLHttpRequest является более низким уровнем, более сложным, и вам потребуются функции-оболочки. К сожалению, то же самое произойдет и после того, как вы начнете учитывать сложность тайм-аутов, прерываний вызовов и отслеживания ошибок.

Вы можете выбрать Fetch полифил вместе с полифилом Promise, чтобы можно было писать код Fetch в IE. Тем не менее, XHR используется как запасной вариант; не каждый вариант будет работать так, как ожидалось, например, куки будут отправлены независимо от настроек.

Fetch это будущее. Тем не менее, API является относительно новым, он не обеспечивает все функциональные возможности XHR, а некоторые параметры являются громоздкими. Используйте его с осторожностью в течение следующих нескольких лет.

Самые популярные способы создания HTTP-запросов в JavaScript

В JavaScript есть замечательные модули и методы, позволяющие создавать HTTP-запросы. Их можно использовать для отправки или получения данных с ресурса со стороны сервера. В этой статье мы рассмотрим несколько популярных способов добавления HTTP-запросов в JavaScript.

AJAX – традиционный способ создания асинхронных HTTP-запросов. Данные можно отправлять при помощи метода HTTP POST. Получать информацию можно с использованием метода HTTP GET. Давайте взглянем на этот способ и попробуем сделать запрос GET. Я буду использовать JSONPlaceholder – бесплатный онлайн REST API для разработчиков. Он возвращает случайные данные в формате JSON.

Чтобы сделать HTTP вызов в AJAX, нужно инициализировать новый метод XMLHttpRequest() , описать конечную точку URL и метод HTTP (в данном случае – GET). Наконец, мы применим метод open() , чтобы связать метод HTTP и конечную точку URL. Далее мы вызовем метод send() , чтобы отправить запрос.

Мы записываем HTTP ответ в консоль с использованием свойства XMLHTTPRequest.onreadystatechange . Оно содержит обработчик событий, который будет вызван при запуске события readystatechange .

Если вы просмотрите консоль своего браузера, она будет возвращать массив данных в формате JSON. Но как же нам узнать, когда запрос будет обработан? Другими словами, как же работать с ответами в случае с AJAX?

У свойства onreadystatechange есть 2 метода: readyState и status . Они позволяют нам проверять состояние запроса.

Если значение readyState равно 4, то это значит, что запрос закончен. У свойства readyState есть 5 ответов .

Помимо прямой отправки запроса в AJAX для JavaScript, существуют более мощные способы создавать HTTP-запрос (например, $.ajax ) – jQuery, допустим. Сейчас обсудим их.

Методы jQuery

В jQuery есть много методов, позволяющие легко обходиться с HTTP-запросами. Чтобы использовать данные методы, вам понадобится включить в свой проект библиотеку jQuery.

$.ajax

Для JavaScript AJAX jQuery – один из самых простых способов обращения к HTTP.

Метод $.ajax имеет много параметров. Некоторые из них являются обязательными, а другие – нет. Этот метод содержит 2 опции обратного вызова: success и error. В них осуществляется работа, когда ответ получен.

$.get

Метод $.get используется для осуществления запросов GET. В нем 2 параметра: конечная точка и функция обратного вызова.

$.post

Метод $.post – еще один способ отправки данных на сервер. Он принимает 3 параметра: url, данные, которые вы хотите отправить, и функцию обратного вызова.

$.getJSON

Метод $.getJSON получает только данные в формате JSON. Он принимает 2 параметра: url и функцию обратного вызова.

В jQuery есть все эти методы, позволяющие отправлять запросы к удаленному серверу и получать от него ответ. Однако, по сути, все эти методы можно уложить в один: для JavaScript – $.ajax (jQuery), как показано ниже:

Fetch

fetch – новый мощный веб-API, который позволяет отправлять асинхронные запросы. Вообще, fetch – это один из лучших (и мой любимый) способов создания HTTP-запросов. Он возвращает Promise («обещание») – замечательную функцию в ES6. Promises позволяют работать с асинхронными запросами по-умному. Взглянем на то, как fetch работает:

Функция fetch принимает всего 1 обязательный параметр: конечную точку URL. В ней также есть и дополнительные параметры, которые продемонстрированы в примере ниже:

Как вы можете заметить, fetch обладает большим количеством преимуществ с точки зрения отправки HTTP-запросов. Кроме того, в fetch есть другие модули и плагины, которые позволяют получать и отправлять запросы к серверной стороне и от нее: например, axios .

Axios

Axios – это открытая библиотека для создания HTTP-запросов. В ней есть много отличных возможностей. Давайте рассмотрим, как она работает.

Для начала вам нужно будет включить Axios. Есть 2 способа включения Axios в свой проект.

Во-первых, можно использовать npm:

Затем вам нужно импортировать библиотеку:

Во-вторых, можно включить Axios при помощи CDN:

Создание запросов с Axios

С Axios можно использовать GET и POST как для того, чтобы получать данные с сервера, так и для того, чтобы отправлять их на него.

GET:

Axios включает в себя 1 обязательный параметр. Он также может принимать второй дополнительный параметр. Он использует данные в качестве простого запроса.

POST:

Axios возвращает Promise («обещание»). Если вы знакомы с обещаниями, то наверняка знаете, что одно обещание может работать с несколькими запросами. То же самое можно проделать с Axios – он тоже может «заниматься» несколькими запросами одновременно.

Axios поддерживает много других методов и опций.

Angular HTTPClient

У Angular есть собственный HTTP модуль, который работает с приложениями на Angular. Он использует библиотеку RxJS для работы с асинхронными запросами. В нем есть много вариантов для осуществления HTTP-запросов.

Отправляем вызов к серверу при помощи Angular HTTPClient

Чтобы сделать запрос с использованием Angular HTTPClient, нам нужно будет запустить свой код в приложении Angular. Из-за этого я и создал такое приложение.

Для начала нужно импортировать HTTPClientModule в app.module.ts .

Затем нам надо создать сервис, который будет обрабатывать запросы. Такой сервис можно легко сгенерировать при помощи Angular CLI .

Далее нужно импортировать HTTPClient в сервис fetchdataService.ts и ввести его в конструктор.

Кроме того, необходимо импортировать fetchdataService в app.component.ts .

Наконец, вызываем сервис и запускаем его.

Демонстрационный пример можно просмотреть на Stackblitz .

Заключение

Мы только что рассмотрели наиболее распространенные способы создания HTTP-запросов используя JavaScript.

XMLHttpRequest

XMLHttpRequest is a built-in browser object that allows to make HTTP requests in JavaScript.

Despite of having the word “XML” in its name, it can operate on any data, not only in XML format. We can upload/download files, track progress and much more.

Right now, there’s another, more modern method fetch , that somewhat deprecates XMLHttpRequest .

In modern web-development XMLHttpRequest is used for three reasons:

  1. Historical reasons: we need to support existing scripts with XMLHttpRequest .
  2. We need to support old browsers, and don’t want polyfills (e.g. to keep scripts tiny).
  3. We need something that fetch can’t do yet, e.g. to track upload progress.
Мастер Йода рекомендует:  WWDC 2020 — всё по этой теме для программистов

Does that sound familiar? If yes, then all right, go on with XMLHttpRequest . Otherwise, please head on to Fetch.

The basics

XMLHttpRequest has two modes of operation: synchronous and asynchronous.

Let’s see the asynchronous first, as it’s used in the majority of cases.

To do the request, we need 3 steps:

The constructor has no arguments.

Initialize it, usually right after new XMLHttpRequest :

This method specifies the main parameters of the request:

  • method – HTTP-method. Usually «GET» or «POST» .
  • URL – the URL to request, a string, can be URL object.
  • async – if explicitly set to false , then the request is synchronous, we’ll cover that a bit later.
  • user , password – login and password for basic HTTP auth (if required).

Please note that open call, contrary to its name, does not open the connection. It only configures the request, but the network activity only starts with the call of send .

This method opens the connection and sends the request to server. The optional body parameter contains the request body.

Some request methods like GET do not have a body. And some of them like POST use body to send the data to the server. We’ll see examples of that later.

Listen to xhr events for response.

These three events are the most widely used:

  • load – when the request is complete (even if HTTP status is like 400 or 500), and the response is fully downloaded.
  • error – when the request couldn’t be made, e.g. network down or invalid URL.
  • progress – triggers periodically while the response is being downloaded, reports how much has been downloaded.

Here’s a full example. The code below loads the URL at /article/xmlhttprequest/example/load from the server and prints the progress:

Once the server has responded, we can receive the result in the following xhr properties:

status HTTP status code (a number): 200 , 404 , 403 and so on, can be 0 in case of a non-HTTP failure. statusText HTTP status message (a string): usually OK for 200 , Not Found for 404 , Forbidden for 403 and so on. response (old scripts may use responseText ) The server response body.

We can also specify a timeout using the corresponding property:

If the request does not succeed within the given time, it gets canceled and timeout event triggers.

To add parameters to URL, like ?name=value , and ensure the proper encoding, we can use URL object:

Response Type

We can use xhr.responseType property to set the response format:

  • «» (default) – get as string,
  • «text» – get as string,
  • «arraybuffer» – get as ArrayBuffer (for binary data, see chapter ArrayBuffer, binary arrays),
  • «blob» – get as Blob (for binary data, see chapter Blob),
  • «document» – get as XML document (can use XPath and other XML methods),
  • «json» – get as JSON (parsed automatically).

For example, let’s get the response as JSON:

In the old scripts you may also find xhr.responseText and even xhr.responseXML properties.

They exist for historical reasons, to get either a string or XML document. Nowadays, we should set the format in xhr.responseType and get xhr.response as demonstrated above.

Ready states


XMLHttpRequest changes between states as it progresses. The current state is accessible as xhr.readyState .

An XMLHttpRequest object travels them in the order 0 → 1 → 2 → 3 → … → 3 → 4 . State 3 repeats every time a data packet is received over the network.

We can track them using readystatechange event:

You can find readystatechange listeners in really old code, it’s there for historical reasons, as there was a time when there were no load and other events. Nowadays, load/error/progress handlers deprecate it.

Aborting request

We can terminate the request at any time. The call to xhr.abort() does that:

That triggers abort event, and xhr.status becomes 0 .

Synchronous requests

If in the open method the third parameter async is set to false , the request is made synchronously.

In other words, JavaScript execution pauses at send() and resumes when the response is received. Somewhat like alert or prompt commands.

Here’s the rewritten example, the 3rd parameter of open is false :

It might look good, but synchronous calls are used rarely, because they block in-page JavaScript till the loading is complete. In some browsers it becomes impossible to scroll. If a synchronous call takes too much time, the browser may suggest to close the “hanging” webpage.

Many advanced capabilities of XMLHttpRequest , like requesting from another domain or specifying a timeout, are unavailable for synchronous requests. Also, as you can see, no progress indication.

Because of all that, synchronous requests are used very sparingly, almost never. We won’t talk about them any more.

HTTP-headers

XMLHttpRequest allows both to send custom headers and read headers from the response.

There are 3 methods for HTTP-headers:

Sets the request header with the given name and value .

Several headers are managed exclusively by the browser, e.g. Referer and Host . The full list is in the specification.

XMLHttpRequest is not allowed to change them, for the sake of user safety and correctness of the request.

Another peculiarity of XMLHttpRequest is that one can’t undo setRequestHeader .

Once the header is set, it’s set. Additional calls add information to the header, don’t overwrite it.

Gets the response header with the given name (except Set-Cookie and Set-Cookie2 ).

Returns all response headers, except Set-Cookie and Set-Cookie2 .

Headers are returned as a single line, e.g.:

The line break between headers is always «\r\n» (doesn’t depend on OS), so we can easily split it into individual headers. The separator between the name and the value is always a colon followed by a space «: » . That’s fixed in the specification.

So, if we want to get an object with name/value pairs, we need to throw in a bit JS.

Like this (assuming that if two headers have the same name, then the latter one overwrites the former one):

POST, FormData

To make a POST request, we can use the built-in FormData object.

The form is sent with multipart/form-data encoding.

Or, if we like JSON more, then JSON.stringify and send as a string.

Just don’t forget to set the header Content-Type: application/json , many server-side frameworks automatically decode JSON with it:

The .send(body) method is pretty omnivore. It can send almost any body , including Blob and BufferSource objects.

Upload progress

The progress event triggers only on the downloading stage.

That is: if we POST something, XMLHttpRequest first uploads our data (the request body), then downloads the response.

If we’re uploading something big, then we’re surely more interested in tracking the upload progress. But xhr.onprogress doesn’t help here.

There’s another object, without methods, exclusively to track upload events: xhr.upload .

It generates events, similar to xhr , but xhr.upload triggers them solely on uploading:

  • loadstart – upload started.
  • progress – triggers periodically during the upload.
  • abort – upload aborted.
  • error – non-HTTP error.
  • load – upload finished successfully.
  • timeout – upload timed out (if timeout property is set).
  • loadend – upload finished with either success or error.

Example of handlers:

Here’s a real-life example: file upload with progress indication:

Cross-origin requests

XMLHttpRequest can make cross-origin requests, using the same CORS policy as fetch.

Just like fetch , it doesn’t send cookies and HTTP-authorization to another origin by default. To enable them, set xhr.withCredentials to true :

See the chapter Fetch: Cross-Origin Requests for details about cross-origin headers.

Summary

Typical code of the GET-request with XMLHttpRequest :

There are actually more events, the modern specification lists them (in the lifecycle order):

  • loadstart – the request has started.
  • progress – a data packet of the response has arrived, the whole response body at the moment is in responseText .
  • abort – the request was canceled by the call xhr.abort() .
  • error – connection error has occurred, e.g. wrong domain name. Doesn’t happen for HTTP-errors like 404.
  • load – the request has finished successfully.
  • timeout – the request was canceled due to timeout (only happens if it was set).
  • loadend – triggers after load , error , timeout or abort .

The error , abort , timeout , and load events are mutually exclusive. Only one of them may happen.

The most used events are load completion ( load ), load failure ( error ), or we can use a single loadend handler and check the properties of the request object xhr to see what happened.

We’ve already seen another event: readystatechange . Historically, it appeared long ago, before the specification settled. Nowadays, there’s no need to use it, we can replace it with newer events, but it can often be found in older scripts.

XMLHttpRequest (AJAX) — отправка и обработка ответов http-запросов с помощью JavaScript.

Современные веб-приложение, как правило, разделяются на две части: клиент и сервер. Клиент представляет собой веб-страницу с кодом JavaScript. К серверным технологиям относятся PHP, Ruby, Node.js, ASP.NET и т.д., которые получают запрос от клиента, обрабатывают и отправляют в ответ результат обработки.

Ajax представляет технологию для отправки запросов к серверу из клиентского кода JavaScript без перезагрузки страницы. Сам термин расшифровывается как Asynchronous JavaScript And XML. То есть изначально AJAX предполагал асинхронное взаимодействие клиента и сервера посредством данных в формате XML. Хотя сейчас XML во многом вытеснил формат JSON. В любом случае AJAX революционизировал веб-среду, позволив создавать динамичные отзывчивые веб-приложения.

Поскольку Ajax предполагает взаимодействие клиента и сервера, то для работы с Ajax и в частности этой главы необходим локальный веб-сервер. Это может быть любой веб-сервер: Apache, IIS и т.д.

Объект XMLHttpRequest

Для создания приложений, использующих Ajax, применяются различные способы. Но самым распространенным способом является использование объекта XMLHttpRequest :

После создания объекта XMLHttpRequest можно отправлять запросы к серверу. Но для начала надо вызвать метод open() для инициализации:

Метод open() принимает три параметра: тип запроса (GET, POST, HEAD, PUT), адрес запроса и третий необязательный параметр — логическое значение true или false, указывающее, будет ли запрос осуществляться в асинхронном режиме. То есть в данном случае запрос будет иметь тип GET, он будет направляться по адресу «http://localhost/hello.txt в синхронном режиме, так как стоит значение false (для асинхронного режима указывается значение true).

Синхронный и асинхронный режим отличаются тем, что запрос в синхронном режиме пока запрос не выполнится, остальной код javascript не может выполняться. По умолчанию, если третий параметр не используется, то запрос отправляется в асинхронном режиме, что позволяет параллельно с выполнением запроса выполнять также и другой код javascript. И в большинстве случаев, как правило, используется именно асинхронный режим.

Кроме того, метод open() может принимать еще два параметра: логин и пароль пользователя, если для выполнения запроса нужна аутентификация.

После инициализации запроса методом open() необходимо отправить запрос с помощью метода send() :

Свойства XMLHttpRequest

Объект XMLHttpRequest имеет ряд свойств, которые позволяют проконтролировать выполнение запроса:

status : содержит статусный код ответа HTTP, который пришел от сервера. С помощью статусного кода можно судить об успешности запроса или об ошибках, которые могли бы возникнуть при его выполнении. Например, статусный код 200 указывает на то, что запрос прошел успешно. Код 403 говорит о необходимости авторизации для выполнения запроса, а код 404 сообщает, что ресурс не найден и так далее.

Мастер Йода рекомендует:  Выравнивание по вертикали c помощью CSS

statusText : возвращает текст статуса ответа, например, «200 OK»

responseType : возвращает тип ответа. Есть следующие типы:

AJAX — как сделать запрос к PHP-коду без перезагрузки страницы

Эта тема имеет больше общего с JavaScript, но ввиду того, как часто у новичков возникают вопросы вроде «Как выполнить функцию PHP из JavaScript-кода?» или «Как отправить форму без перезагрузки?», она напросилась в этом разделе сама самой.

Итак, AJAX — это Asynchronous Javascript And XML — асинхронный JavaScript и XML, если по-русски. Разберём каждое слово:

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

2) JavaScript — язык программирования, который используют инструменты для отправки AJAX-запросов. Т.к. статья для новичков, то подразумевается, что вы используете либо только чистый JavaScript, либо в совокупности с jQuery. Если вы не используете jQuery, то для создания такого запроса требуется создание объекта XMLHttpRequest. В jQuery всё немного проще и лаконичнее — вы пользуетесь методами $.post и $.get для отправки соответствующих запросов. Когда нужно использовать post, а когда get — чуть позже.

3) XML — в контексте этой статьи это не так важно, считайте это отсылкой к тому самому объекту XMLHttpRequest, ведь сначала появился именно этот способ.

Таким образом, AJAX — это способ отправки запросов (и данных) на сервер без перезагрузки страницы и, как следует, прерывания действий пользователя.

О методах GET и POST.

Обычно, любой запрос сопровождается некоторыми параметрами. В GET-запросах такие параметры передаются в URL, например: http://site.com/index.php?param1=value1&param2=value2 . Это накладывает два ограничения:
1) Объём отправляемых данных существенно ограничен — объём классического GET-запроса находится в диапазоне от 2 до 8 килобайт по умолчанию.
2) Данные открыты — не желательно передавать чувствительные данные, например — пароли. Из-за этого, POST-запросы встречаются намного чаще.

У POST-запроса, в отличие от GET, есть тело, которое помещается после заголовка (а GET-запрос имеет только его). Данные тела явно не передаются (относительно — трафик можно прослушать, но это уже вопрос применения шифрования и защищенного канала). Объём информации, который можно передать в теле, опять же, зависит от настроек сервера. По умолчанию, этот объём порядка 20 мегабайт. И, разумеется, можно передавать GET-параметры через URL. В общем случае, POST-запросы являются более гибкими.

Теперь рассмотрим отправку этих двух видов запросов с помощью обозначенных выше методов — с помощью объекта XMLHttpRequest и методов jQuery — $.post и $.get.

В качестве примера используем следующий «скрипт»:

В строке один происходит создание объекта. Во второй мы присваиваем этому объекту свойство onreadystatechange — функцию, которая будет выполнена, когда
будет получен ответ на запрос. Такая функция называется callback (колбэк). В ней мы обрабатываем два случая — когда запрос прошел нормально, и когда произошла ошибка.

В 10-той строке мы вызываем метод, в который передаём три параметра:
1) «GET» — тип запроса
2) «hello.php?name=Webkill» — URL запроса: файл hello.php и один параметр name.
3) true — асинхронность. Если false — то браузер будет ожидать ответа (синхронность).

На 11-ой строке происходит отправка запроса, при этом мы указываем один параметр — null (позже, через этот параметр будут передаваться данные тела POST-запроса).

Javascript

Собственно, отправка GET-запроса в jQuery заключается в вызове метода $.get с тремя параметрами:
1) «hello.php» — часть URL без GET-параметров
2) — параметры запроса в виде ассоциативного массива (JSON)
3) Функция-обработчик, которая вызывается в случае «успеха»

Допустим, нужно сделать аутентификацию без перезагрузки страницы. GET-запрос не подходит, т.к. передаётся пароль.

Javascript

Легко заметить, что в целом код не изменился. Поменялся только первый параметр функции open — тип запроса, и теперь мы передаём данные в метод send в формате JSON.

Javascript

Снова, изменений немного: только название метода говорит о том, что в этот раз мы шлём POST-запрос. В случае GET-запроса параметры, которые мы передаём в JSON, закодируются в URL, а в случае POST — попадут в тело запроса. Если вы хотите использовать GET-параметры в POST-запросе, то необходимо их писать в URL вручную.

Естественно, круг задач, для которых используется AJAX намного шире — загрузка файлов, игры и т.д. Целью этой статьи является ознакомление с этим комплексом технологий. Стоит отметить, что в случае jQuery можно обрабатывать намного больше вариантов ответа сервера с помощью функций done, fail и always. Также, функции-обработчики кроме собственно ответа принимают и другие параметры.

AJAX — Отправка запроса на сервер

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

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

Javascript
Метод Описание
open(method, url, async) Определяет параметры запроса:
method — тип запроса (GET или POST)
url — расположение файла
async — true (асинхронный) или false (синхронный)
send() Посылает запрос на сервер
Используется для запросов GET
send(контент) Посылает запрос на сервер
Используется для запросов POST

GET или POST?

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

Тем не менее, запросы типа POST всегда используются, когда:

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

Запросы типа GET

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

В предыдущем примере вы можете получить кэшированные данные. Чтобы этого избежать, добавьте к URL уникальный идентификатор:

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

Запросы типа POST

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

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

Метод Описание
setRequestHeader(header, value) Добавляет в запрос HTTP заголовки:
header — определяет имя заголовка
value — определяет значение заголовка

URL – файл на сервере

Параметр URL метода open() определяет адрес файла на сервере:

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

Асинхронный – True или False?

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

Для этого параметр async метода open() следует установить в значение true:

Отправляя запрос асинхронно, JavaScript не придется ждать, когда сервер ответит. Вместо этого JavaScript может:

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

Свойство onreadystatechange

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

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

Подробнее о свойстве onreadystatechange будет рассказано дальше в этом учебнике.


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

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

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

Так как при синхронном запросе скрипт будет ждать завершенного ответа сервера, то нет необходимости в определении функции в свойстве onreadystatechange:

ВНИМАНИЕ .

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

Функционал синхронных запросов объекта XMLHttpRequest в настоящее время находится в процессе удаления из стандарта. Хотя этот процесс может продлиться еще достаточно долгое время.

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

AJAX на практике.

Запрос на чистом JavaScript.

Серия статей «Ajax на практике«

  • Основы передачи данных
  • Получение данных из формы
  • Загрузка файлов
  • Progress Bar — индикатор процесса загрузки
  • Запрос на чистом JavaScript.

Во всех четырёх статьях серии «Ajax на практике», мы разбирались, как использовать эту технологию с помощью библиотеки jQuery и, в частности, её метод $.ajax(), но всегда ли нужно прибегать к помощи фреймворков? К примеру, если в своём проекте, вы больше нигде не используете библиотеку, то абсолютно не резонно нагружать страницы лишними килобайтами и особенно, если этих килобайт около девяноста. Вывод — пишем ajax-запрос на чистом JavaScript, тем более, что та же библиотека jQuery, ни что иное, как подготовленный набор методов (функций), написанный на нативном JS. Если взять для сравнения JS-код из статьи «Получение данных из формы», то переписывая код, нам нужно будет сделать следующее:

  1. Дождаться загрузки всего документа
  2. Получить в распоряжение элемент
  3. Повесить на него обработчик события submit
  4. Подготовить данные формы на отправку
  5. Создать объект XMLHttpRequest
  6. С помощью XHR отправить данные
  7. Получить, обработать и вывести на экран ответ сервера

Поехали пошагово.
1) Вместо привычных $(function()<>) или $(document).ready(function()<>), устанавливаем свой обработчик события onload. Но прежде, хочу пояснить, почему мы не будем использовать конструкцию element.onevent = func;. Это способ хоть и кроссбраузерный, но главным его недостатком является то, что установив на один элемент два и более обработчика, последний «затрёт» предыдущие и они «не откатают свою обязательную программу». Поэтому, хоть кода на пару строк получится больше, но запишем так:

После загрузки документа, будет вызвана функция init, где мы сможем получить доступ к нашей форме. Этот шаг можно и пропустить, если весь js-код, будет расположен в самом конце документа, перед закрывающим тего

# Получаем данные в Javascript с помощью XMLHttpRequest

Я очень часто вижу, что люди используют $http в Angular или jQuery или другие библиотеки и даже не знают, что выполняется внутри и как в чистом javascript работать с http запросами.

Поэтому в этом видео мы с вами разберем, как получать в javascript данные от сервера. То есть идея в том, чтобы получить данные от сервера асинхронно с помощью HTTP-запроса и изменить страницу у пользователя без перезагрузки.

Именно на этой технологии работают все современные Single Page приложения.

Для этого используется XMLHttpRequest. Из его названия можно подумать, что он может работать только с xml, но это не так. Он может работать с любыми данными.

Для того, чтобы обращатся на сервер за данными, давайте создадим API с тестовыми данными с помощью сервиса mocky.io.

Вот у меня есть JSON данных

Вставляем его в body запроса и в advance mode выбираем

Для того, чтобы любой домен мог обращатся к этому API.

Нажимаем Generate response и получаем ссылку на наш API.

Теперь давайте писать javascript.

Для начала нам нужно создать новый екземпляр XMLHttpRequest.

Теперь сконфигурировать какой url мы хотим получить

Для этого на xhr мы вызываем метод open передавая туда тип запроса, url, и асинхронный ли запрос. Конечно мы хотим асинхронный. Никогда не используйте синхронные запросы, так как это блокирует продолжение скрипта. В 99 случаях из 100 этого делать не нужно.

Не стоит думать, что xhr.open выполняет запрос. Хотя из названия похоже. Он его только конфигурирует. Для отправки запроса используется xhr.send

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

Внутри метода мы должны проверять readyState на 4, чтобы понять, когда запрос закончится. Пока readyState ниже четверки, то запрос не закончен. Там происходит начало запроса, получение заголовкой, загрузка body и только потом запрос завершен.

Теперь давайте добавим проверку на error и вывод результатов в консоль

Как мы видим, результат выводится в виде строки, поэтому нам нужно еще и парсить его в JSON

Какие же основные минусы XMLHttpRequest и почему все используют ajax в jQuery для получения данных или отдельные библиотеки для этого например superagent или axios.

Первым минус — это конечно количество кода. В любой из вспомогательных библиотек метод для работы с http запросами намного лаконичнее.

Второй — это отсутствие промисов при работе с XMLHttpRequest. Мы не можем написать .then, передать туда коллбек и выполнить что мы хотим когда запрос завершится. Поэтому с этим кодом неудобно работать.

Третий — это кроссбраузерность. Даже в IE 10-11 XMLHttpRequest работает не так, как в других браузерах.

Тем не менее понимать и помнить, что выполняется внутри нужно, хотя вряд ли вы будете его использовать в чистом виде.

Если у вас возникли какие-то вопросы или комментарии, пишите их прямо под этим видео.

AJAX с помощью jQuery. Руководство для начинающих. Часть 1

Большинство современных сайтов используют технологию, которая называется AJAX, для быстрого и эффективного взаимодействия с посетителем. AJAX стал очень популярным методом для получения данных с сервера в фоновом режиме и динамического обновления страницы.

Разработка кода для JavaScript для реализации AJAX с нуля является весьма трудоемким и нудным процессом. Однако множество библиотек JavaScript, включая jQuery, имеют отличную высокоуровневую реализацию AJAX в виде набора методов и функций, которые облегчают и ускоряют построение веб сайтов.

В данной серии уроков мы рассмотрим основы построения запросов AJAX с помощью jQuery. Будут раскрыты следующие темы:

  • Что такое технология AJAX? Как она работает? В чем ее преимущества?
  • Как выполнить различные типы запросов AJAX с помощью jQuery?
  • Отправка данных на сервер с помощью запросов AJAX.
  • Обработка и выделение данных из ответов AJAX с сервера.
  • Как настроить обработку AJAX в jQuery и изменить установки по умолчанию?

Примечание: Уроки сконцентрированы на части JavaScript клиентской стороны. Но разработка серверной части также достаточно проста. Для более полной информации следует изучить материалы по языкам программирования серверной стороны, например PHP.

Что такое AJAX и чем он полезен?

AJAX является техникой разработки веб приложений, в которых JavaScript код, выполняющийся в браузере посетителя, связывается с веб сервером асинхронно , то есть в фоновом режиме. Отличие от обычных веб приложений заключаются в следующем:

  • Обычная веб страница содержит ссылки или формы, которые при нажатии или отправке создают запрос к новому адресу URL на веб сервере. Сервер отправляет полностью новую страницу HTML, которую затем выводит браузер, заменяя оригинальную страницу. Такой подход занимает много времени и плохо действует на посетителя, так как тому приходится ждать загрузки новой страницы.
  • При использовании технологии AJAX, JavaScript код делает запрос к URL на сервере. Код также может отправить данные вместе с запросом. Затем JavaScript код обрабатывает ответ сервера и действует соответствующим образом. Например, могут быть произведены вычисления с возвращаемыми данными, добавлен или обновлен виджет на странице, выдано сообщение посетителю об обновлении базы данных на сервере.

Так как запрос AJAX выполняется в фоновом режиме, то код JavaScript (и посетитель) может продолжать работу со страницей во время обработки запроса. Процесс скрыт от посетителя, которому не нужно покидать страницу, которую он просматривает в данный момент времени. Такой подход делает страницы с AJAX очень приятными в работе.

Фундаментальным моментом AJAX является объект JavaScript XMLHttpRequest . Он предоставляет ряд методов, таких как open() , send() и onreadystatechange() , которые могут быть использованы при отправке запросов AJAX на сервер и обработке ответов в фоновом режиме.

Разработка кросс-браузерного JavaScript кода AJAX может оказаться довольно нудным процессом. К счастью, jQuery дает вам несколько простых в использовании методов AJAX, которые позволяют абстрагировать большое количество низкоуровневых операций.

Для тех кто более любопытен, слово AJAX является аббревиатурой из первых букв выражения на английском языке «Asynchronous JavaScript And XML» (Асинхронный JavaScript и XML). Однако, термин может ввести в заблуждение — запрос не обязательно должен быть асинхронным и необязательно использовать XML для отправки данных.

Делаем запрос GET с помощью $.get()

Метод jQuery $.get() предоставляет легкий и удобный способ сделать простой запрос AJAX. Он выполняет запрос с помощью метода HTTP GET (используется для получения URL, например страниц и изображений), вместо метода POST (который традиционно используется для отправки данных формы).

В простейшей форме можно вызвать метод так:

. где url является адресом URL ресурса, от которого ожидается ответ. Обычно это скрипт на стороне сервера, который выполняет какие-нибудь действия и может возвращать некие данные:

. хотя можно также запросить статический документ:

При запросе URL, вы можете отправить данные с запросом. Вы можете передать данные в строке запроса, так же как и при обычном запросе GET:

Корректно будет сделать то же самое передав объект данных в качестве второго параметра методу $.get() . Объект данных должен содержать информацию в виде пар имя свойства/значение свойства. Например:

В качестве альтернативы вы можете передать данные методу $.get() как строку:

Получаем данные с сервера

До сих пор мы рассматривали примеры использования $.get() только для отправки запросов на сервер, игнорируя любой ответ, который может сформировать скрипт на серверной стороне. Но в большинстве случаев ваш JavaScript код будет ожидать ответ от скрипта на серверной стороне и обрабатывать полученные данные.

AJAX запрос — асинхронный , что означет его выполнение в фоновом режиме, когда остальной код JavaScript продолжает действовать. Как же в таком случае получать ответ от сервера, когда завершится запрос?

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

Как только возвратная функция создана, вы можете передать ее в качестве третьего аргумента в метод $.get() :

Определяем тип данных ответа

Обычно, серверная сторона передает данные в одном из нескольких типовых форматов, включая XML, JSON, JavaScript, или HTML. По умолчанию jQuery пытается определить наиболее подходящий формат и разобрать данные соответствующим образом. Но лучше явно определить формат.

Для указания формата надо передать четвертый аргумент методу $.get() . Данный аргумент может быть строкой из следующего списка:

Например, если вы знаете, что скрипт сервера возвращает данные в формате JSON, то вызываете метод $.get() следующим образом:

Пример использования метода $.get()

Здесь приводится пример создания запроса AJAX с помощью метода $.get() и простая обработка ответа. Для работы примера нужно на сервере создать простой текстовый файл с именем getForecast.txt , содержащий следующий текст:

Данный файл будет имитировать ответ в формате JSON, который мог быть сформирован скриптом прогноза погоды на сервере.

Затем создаем страницу showForecast.html в той же папке что и getForecast.txt :

Открываем showForecast.html в браузере и нажимаем кнопку «Получить прогноз погоды». В окне сообщения получим прогноз погоды с нашего сервера.

Вот как работает данный код:

  1. showForecast.html содержит элемент button «Получить прогноз погоды» с ID getForecast .
  2. JavaScript вверху страницы выполняется как только страница будет загружена и DOM окажется в состоянии готовности.
  3. Код JavaScript сначала привязывает обработчик события click к кнопке #getForecast . Данный обработчик выполняет AJAX запрос GET к getForecast.txt , передавая название города и дату для прогноза. Также определяется возвратная функция success(), которая будет выполняться по завершению запроса. Формат возвращаемых сервером данных определяется как JSON.
  4. Файл getForecast.txt возвращает браузеру данные прогноза в формате JSON.
  5. Вызывается функция success() . jQuery разбирает данные JSON, полученные от getForecast.txt , конвертирует их в объект JavaScript, и передает их в функцию.
  6. Функция возвращает объект данных forecastData и выводит сообщение, которое содержит несколько свойств объекта, включая название города, прогноз и температуру.

Простой пример в несколько строк демонстрирует работу запроса AJAX с использованием метода $.get() .

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.elated.com/articles/ajax-with-jquery-a-beginners-guide/
Перевел: Сергей Фастунов
Урок создан: 5 Марта 2012
Просмотров: 162847
Правила перепечатки

5 последних уроков рубрики «jQuery»

Анимация набора текста на jQuery

Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.

Временная шкала на jQuery

jQuery плагин для создания временной шкалы.

Заметка: Перезагрузка и редирект на JavaScript

Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.

Рисуем диаграмму Ганта

jQuery плагин для создания диаграммы Ганта.

AJAX и PHP: загрузка файла

Пример того как осуществить загрузку файла через PHP и jQuery ajax.

Объект XMLHttpRequest

Объект XMLHttpRequest позволяет получать данные с сервера в фоновом режиме. Как правило, возвращаемая информация представляется в формате XML, но данный объект также позволяет работать с любыми текстовыми данными. Объект XMLHttpRequest впервые был реализован компанией Microsoft в виде объекта ActiveX. Сейчас он уже доступен в браузерах Mozilla, Netscape (начиная с 7-ой версии) а также в Safari (с версии 1.2), естественно, не в виде ActiveX-компоненты. Объект XMLHttpRequest представляет собой набор API функций, используемый в JavaScript, VBScipt и т.п. для передачи данных XML по протоколу HTTP.

Ниже представлены методы и свойства объекта XMLHttpRequest, общие для Internet Explorer 5+, Mozilla, Netscape 7 и Safari 1.2.

Методы объекта XMLHttpRequest:


  • abort( ). Обрывает текущий запрос.

Для браузера Internet Explorer успешный вызов abort() на самом деле может не обрывать соединение, а оставлять его в подвешенном состоянии на некоторый таймаут (

30 секунд). У браузера есть лимит: не более 2 одновременных соединений с одним доменом. Т.е, если два соединения уже висят, то третье открыто не будет, пока одно из них не умрет.

  • getAllResponseHeaders( ). Возвращает полный набор заголовков ответа (названий и значений) в виде строки.
  • getResponseHeader( ). Возвращает строковое значение заголовка, название которого указано в параметре headerLabel. Если параметр не задан, возвращает весь заголовок. Например: http.getResponseHeader(«Last-Modified»);
  • open( , [, [, [,

    ]]]). Открывает соединение с сервером с указанием метода передачи данных.

    URL: адрес запроса. Можно использовать не только HTTP или HTTPS, но и другие протоколы, такие как FTP и file://. При этом запрос со страницы можно отправлять только на тот домен и порт, с которого она пришла. Как обойти это ограничение описано в разделе Ошибки Ajax.

    asyncFlag: флага асинхронности: false — синхронно (скрипт будет ожидать ответа от сервера), true — асинхронно (по умолчанию);

    userName, password: логин и пароль для простой HTTP-авторизации.

  • send( ). Отправка запроса. Значением content могут быть данные для POST-запроса или пустая строка.
  • setRequestHeader( , ). Установка в отправляемом запросе заголовка label со значением value. Если заголовок с таким name уже есть — он заменяется. Например, http.setRequestHeader(‘Content-Type’, ‘application/x-www-form-urlencoded’) http.setRequestHeader(‘Content-type’, ‘text/xml’)
  • timeout — время выполнения запроса в милисекундах, например http.timeout = 10000; // 10 sec
  • ontimeout — обработка события «время ожидания ответа истекло», например http.ontimeout = function();
  • ontimeout — обработка события «ошибка», например http.onerror = function();
  • Свойства объекта XMLHttpRequest:


    • onreadystatechange. Событие, возникающее при смене статуса объекта.
    • readyState. Значения статуса. Может принимать следующие значения:
      • 0 — не инициализирован (перед началом работы объекта),
      • 1 — загрузка (однажды, когда идет инициализация объекта),
      • 2 — загружен (однажды, когда получен ответ от сервера),
      • 3 — доступен (пока объект соединен с сервером),
      • 4 — завершен (после того, как объект выполнил все задачи).
    • responseText. Строка с возвращенными сервером данными.
    • responseXML. DOM-совместимый объект-документ с возвращенными сервером данными. Например,
      var authorElem = xmlhttp.responseXML.getElementById(‘author’)
      Чтобы браузер успешно обработал ответ сервера в свойство responseXML, в заголовок ответа должен содержать: «Content-Type: text/xml». Иначе свойство responseXML будет равно null.
    • status. Стандартный HTTP-код статуса. Например, 404 (для «Not Found») или 200 (для «OK»).
      Запросы по протоколам FTP, file:// не возвращают статуса, поэтому нормальным для них является status=0.
    • statusText. Текстовое сообщение статуса, например «Not Found» или «OK».

    Общий план работы с объектом XMLHttpRequest можно представить следующим образом:

    1. Создание экземпляра объекта XMLHttpRequest.
    2. Установка обработчика события onreadystatechange.
    3. Открытие соединения с сервером методом open.
    4. Непосредственно отправка запроса методом send.

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