Ajax что это в программировании

AJAX для новичков

AJAX — это аббревиатура, которая означает Asynchronous Javascript and XML. На самом деле, AJAX не является новой технологией, так как и Javascript, и XML существуют уже довольно продолжительное время, а AJAX — это синтез обозначенных технологий. AJAX чаще всего ассоцириуется с термином Web 2.0 и преподносится как новейшее Web-приложение.

При использовании AJAX нет необходимости обновлять каждый раз всю страницу, так как обновляется только ее конкретная часть. Это намного удобнее, так как не приходится долго ждать, и экономичнее, так как не все обладают безлимитным интернетом. Правда в этом случае, разработчику необходимо следить, чтобы пользователь был в курсе того, что происходит на странице. Это можно реализовать с использованием индикаторов загрузки, текстовых сообщений о том, что идёт обмен данными с сервером. Необходимо также понимать, что не все браузеры поддерживают AJAX (старые версии браузеров и текстовые браузеры). Плюс Javascript может быть отключен пользователем. Поэтому, не следует злоупотреблять использованием технологии и прибегать к альтернативным методам представления информации на Web-сайте.

• Возможность создания удобного Web-интерфейса
• Активное взаимодействие с пользователем
• Частичная перезагрузка страницы, вместо полной
• Удобство использования

Обмен данными

Для того, чтобы осуществлять обмен данными, на странице должен быть создан объект XMLHttpRequest, который является своеобразным посредником между Браузером пользователя и сервером (рис. 1). С помощью XMLHttpRequest можно отправить запрос на сервер, а также получить ответ в виде различного рода данных.

Обмениваться данными с сервером можно двумя способами. Первый способ — это GET-запрос. В этом запросе вы обращаетесь к документу на сервере, передавая ему аргументы через сам URL. При этом на стороне клиента будет логично использовать функция Javascript`а escape для того, чтобы некоторые данные не прервали запрос.

Не рекомендуется делать GET-запросы к серверу с большими объемами данных. Для этого существует POST-запрос.

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

Как уже было сказано, AJAX использует асинхронную передачу данных. Это значит, что пока идёт передача данных, пользователь может совершать другие, необходимые ему действия. В это время следует оповестить пользователя о том, что идёт какой-либо обмен данными, иначе пользователь подумает, что произошло что-то не то и может покинуть сайт, или повторно вызвать «зависшую», по его мнению, функцию. Индикация во время обмена данными в приложении Web 2.0 играет очень важную роль: посетители могли еще не привыкнуть к таким способам обновления страницы.

Ответ от сервера может быть не только XML, как следует из названия технологии. Помимо XML, можно получить ответ в виде обычного текста, или же JSON (Javascript Object Notation). Если ответ был получен простым текстом, то его можно сразу вывести в контейнер на странице. При получении ответа в виде XML, обычно происходит обработка полученного XML документа на стороне клиента и преобразование данных к (X)HTML. При получении ответа в формате JSON клиент должен лишь выполнить полученный код (функция Javascript`а eval) для получения полноценного объекта Javascript. Но здесь нужно быть осторожным и учитывать тот факт, что с использованием этой технологии может быть передан вредоносный код, поэтому перед выполнением полученного с сервера кода следует его тщательно проверить и обработать. Существует такая практика, как «холостой» запрос, при котором никакой ответ от сервера не приходит, лишь изменяются данные на стороне сервера.

В разных браузерах данный объект обладает разными свойствами, но в целом он совпадает.

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

Заметьте, что названия методов записаны в том же стиле (Camel-style), что и другие функции Javascript. Будьте внимательны при их использовании.

abort() — отмена текущего запроса к серверу.

getAllResponseHeaders() — получить все заголовки ответа от сервера.

getResponseHeader(«имя_заголовка») — получить указаный заголовок.

open(«тип_запроса»,«URL»,«асинхронный»,«имя_пользователя»,«пароль») — инициализация запроса к серверу, указание метода запроса. Тип запроса и URL — обязательные параметры. Третий аргумент — булево значение. Обычно всегда указывается true или не указывается вообще (по умолчанию — true). Четвертый и пятый аргументы используются для аутентификации (это очень небезопасно, хранить данные об аутентификации в скрипте, так как скрипт может посмотреть любой пользователь).

send(«содержимое») — послать HTTP запрос на сервер и получить ответ.

setRequestHeader(«имя_заголовка»,«значение») — установить значения заголовка запроса.

Свойства объекта XMLHttpRequest

onreadystatechange — одно из самых главных свойств объекта XMLHttpRequest. С помощью этого свойства задаётся обработчик, который вызывается всякий раз при смене статуса объекта.

readyState — число, обозначающее статус объекта.

responseText — представление ответа сервера в виде обычного текста (строки).

responseXML — объект документа, совместимый с DOM, полученного от сервера.

status — состояние ответа от сервера.

statusText — текстовое представление состояния ответа от сервера.

• 0 — Объект не инициализирован.
• 1 — Объект загружает данные.
• 2 — Объект загрузил свои данные.
• 3 — Объек не полностью загружен, но может взаимодействовать с пользователем.
• 4 — Объект полностью инициализирован; получен ответ от сервера.

Создание объекта XMLHttpRequest

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

Например, для создания объекта в Gecko-совместимых браузерах, Konqueror`е и Safari, нужно использовать следующее выражение:

var Request = new XMLHttpRequest();

А для Internet Explorer`а используется следующее:

var Request = new ActiveXObject(«Microsoft.XMLHTTP»);

var Request = new ActiveXObject(«Msxml2.XMLHTTP»);

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

После всего этого можно создавать данный объект и не беспокоится за работоспособность на популярных браузерах. Но создать объект можно в разных местах. Если создать его глобально, то в определенный момент времени возможен будет только один запрос к серверу. Можно создавать объект всякий раз, как происходит запрос к серверу (это почти полностью решит проблему).

Запрос к серверу

• Проверка существования XMLHttpRequest.
• Инициализация соединения с сервером.
• Посылка запрса серверу.
• Обработка полученных данных.

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

Именно таким образом происходит взаимодействие с сервером.

Обработка ответа

В предыдущем примере мы сделали функцию запроса к серверу. Но она, по сути, небезопасна, так как мы не обрабатываем состояния объекта и состояния ответа от сервера.

Дополним наш код, чтобы он смог выводить визуальное оповещение о процессе загрузки.

Как вы уже знаете, объект XMLHttpRequest позволяет узнать статус ответа от сервера. Воспользуемся этой возможностью.

Варианты ответа от сервера

• Обычный текст
• XML
• JSON

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

Пример кода JSON:

При получении такого кода, производим следующее действие:

var responsedata = eval(«(» + Request.responseText + «)»)

После выполнения данного кода вам будет доступен объект responsedata.

Работа с серверными языками программирования

Такая работа ничем не отличается от обычной. Для примеров я возьму PHP в качестве серверного языка. В клиентской части ничего не изменилось, но серверная часть теперь представлена PHP-файлом.

По традиции, начнем с приветствия нашему замечательному миру:

При обращении к этому файлу клиенту вернется строка Hello, World. Как вы понимаете, это представляет широчайшие возможности для построения приложений. На основе передачи аргументов при вызове сервера с помощью XMLHttpRequest можно сделать параметризацию вывода, тем самым обеспечив обширную функциональность Web-приложения.

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

Литература по теме

Статья написана с целью рассказать новичкам о работе AJAX изнутри. Если Вам кажется, что что-то написано неточно или неверно, поправляйте, пожалуйста, меня, для того, чтобы создать достойную статью вместе.

Конечно, если есть возможность, стоит использовать существующие фреймворки, я считаю. Но знать «как оно работает» всё-же необходимо.

AJAX — Asynchronous Javascript And XML

AJAX (Asynchronous Javascript And XML) are Javascript techniques that brings more interactive interfaces and faster performance to responsive HTML content on the web. AJAX is an open standard that works in coordination with HTML, CSS and Javascript along side XML. It executes within the Javascript framework with data fetched and stored in XML format. A use case for AJAX is when accessing data from external sources even after a web page has finished loading.

The following is the process behind the AJAX methodology:

• Data is read from a web server after an HTML page has loaded
• The data can be updated without requiring reloading the web page
• Data can be sent to a web server while working in the background

These steps are asynchronous and support an intuitive and natural user interaction with web pages. It is also independent from the web server in that it can execute tasks at any point in time making it a data-driven rather than a page-driven environment.

The XMLHttpRequest Object

The following is an example of how AJAX can change text without requiring the user to reload the web page. This is through the XMLHttpRequest object that sends a request to the web server and then display the result in Javascript DOM (Document Object Model). This is embedded in the HTML page.

The function called loadData() will fetch the contents of a file called “data.txt” from the web server. It then displays the content through the DOM. The following diagram illustrates the process.

Going back to the code, there is a condition that must be met. The this.readystate == 4 means “complete and response received” and this.status == 200 means the web server response must be HTTP 200 (Status: OK). If the server did not respond, due to a network failure or system downtime, then a status HTTP 200 is not returned. It could either be a 500 (Internal Error), 400 (Bad Request) or 404 (Request Not Found).

The fetch Function

In this next example we use the fetch function which allows sending HTTP request to the web server. This returns a promise in Javascript, or a pending process until it can be fulfilled. The data is not processed immediately but will be handled on the back end by the web server. When there is a result, the web server will then either send back a fulfilled legitimate request or reject the request in the case of a malicious attack. The promise statement uses a .then attribute which describes what action to take when a response is received from the web server.

We are going to use an API to convert the value of currency from a money exchange. Provided you have the API access key, you can get a response from the server. If there is no API access key, the request will be rejected. This exercise will assume that we have an API access key.

This should return a result similar to the following:

What happened here was the data format was converted to JSON from the XML format. JSON is an open file interchange format that is supported by many applications, making it a better choice when processing data.

Conclusion

AJAX provides a technique for sending requests without reloading a web page. It has a more dynamic way of providing users an interface to interact quickly with web servers. Without this Javascript framework, it would require a page reload every time in order to send a request. That can be a tedious process and consumes more of a user’s time. AJAX is thus much more efficient with responsive web applications that are the core of today’s e-commerce and online platforms.

С чего начать

В этой статье рассмотрены основные принципы работы AJAX и даны два простых примера, использующих эту технологию.

Что такое AJAX?

Ajax означает Асинхронный JavaScript и XML. В основе технологии лежит использование нестандартного объекта XMLHttpRequest , необходимого для взаимодействия со скриптами на стороне сервера. Объект может как отправлять, так и получать информацию в различных форматах включая XML, HTML и даже текстовые файлы. Самое привлекательное в Ajax — это его асинхронный принцип работы. С помощью этой технологии можно осуществлять взаимодействие с сервером без необходимости перезагрузки страницы. Это позволяет обновлять содержимое страницы частично, в зависимости от действий пользователя.

Две особенности, которые мы рассмотрим:

• Отправление запросов серверу без перезагрузки страницы
• Работа с XML документами

Шаг 1 — Как послать HTTP запрос

Для того, чтобы послать HTTP запрос на сервер используя JavaScript, вам необходим экземпляр класса, который позволит это сделать. Такой класс впервые был введён в Internet Explorer как объект ActiveX, называемый XMLHTTP . Позже в Mozilla, Safari и другие браузеры был введён класс XMLHttpRequest , который поддерживал методы и свойства изначального объекта ActiveX от Microsoft.

В результате, чтобы создать кросс-браузерный объект требуемого класса, вы можете сделать следующее:

(В целях наглядности, код выше является немного упрощённым. Более жизненный пример будет рассмотрен в шаге 3 этой статьи)

Некоторые версии некоторых броузеров Mozilla не будут корректно работать, если ответ сервера не содержит заголовка XML mime-type . Чтобы решить эту проблему, вы можете использовать вызовы дополнительных методов для переопределения заголовка полученного от сервера, если он отличен от text/xml .

Далее вам необходимо решить, что вы будете делать после получения ответа сервера. На этом этапе вам необходимо указать объекту, какая JavaScript функция будет обрабатывать ответ. Это делается путём присваивания свойству onreadystatechange имени JavaScript функции, которую вы собираетесь использовать:

Заметьте, что после названия функции нет скобок и не указано параметров, потому что вы просто присваиваете ссылку на функцию, а не вызываете её. К тому же, вместо указания имени функции, вы можете использовать возможность JavaScript объявлять функции на лету (так называемые «анонимные функции») и указывать действия, которые тотчас же будут обрабатывать ответ:

Далее, после того как вы объявили что будет происходить после получения ответа, вам необходимо сделать запрос. Вы должны вызвать методы класса open() и send() :

• Первый параметр вызова функции open() — метод HTTP запроса (GET, POST, HEAD или любой другой метод, который вы хотите использовать). Используйте методы в соответствии с HTTP стандартами, иначе некоторые браузеры (такие как Firefox) могут не обработать запрос. Информация о допустимых HTTP запросах доступна по адресу спецификации W3C
• Второй параметр — URL запрашиваемой страницы. Из соображений безопасности возможность запрашивать страницы сторонних доменов недоступна. Убедитесь, что вы используете одинаковое доменное имя на всех страницах, иначе вы получите ошибку ‘доступ запрещён’ при вызове функции open() . Типичной ошибкой при доступе к сайту через site.ru является отправка запроса на www.site.ru .
• Третий параметр указывает, является ли запрос асинхронным. Если он TRUE , то выполнение JavaScript продолжится во время ожидания ответа сервера. В этом и заключается асинхронность технологии.

Параметром метода send() могут быть любые данные, которые вы хотите послать на сервер. Данные должны быть сформированы в строку запроса:

Заметьте, что если вы хотите отправить данные методом POST , вы должны изменить MIME-тип запроса с помощью следующей строки:

Иначе сервер проигнорирует данные отправленные методом POST.

Шаг 2 — Обрабатываем ответ сервера

Отправляя запрос, вы указали имя функции JavaScript, обрабатывающей ответ.

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

Полный список значений кодов readyState такой:

• 0 (uninitialized)
• 1 (loading)
• 2 (loaded)
• 3 (interactive)
• 4 (complete)

Следующее, что нужно проверить — это статус HTTP-ответа. Все возможные коды можно посмотреть на сайте W3C. Для наших целей нам интересен только код ответа 200 OK .

Теперь, после проверки состояния запроса и статуса HTTP-ответа, вы можете делать с данными, полученными от сервера, всё что угодно. Есть два способа получить доступ к данным:

• httpRequest.responseText – возвращает ответ сервера в виде строки текста.
• httpRequest.responseXML – возвращает ответ сервера в виде объекта XMLDocument , который вы можете обходить используя функции JavaScript DOM

Шаг 3 — Простой пример

Давайте соберём все вместе и сделаем простой пример HTTP-запроса. Наш JavaScript запросит HTML документ test.html , который содержит текст «I’m a test.» и выведет содержимое файла в диалоговом окне.

• Пользователь нажимает на ссылку «Сделать запрос» в броузере;
• Это вызывает функцию makeRequest() с параметром test.html — именем HTML файла;
• Посылается запрос, после чего ( onreadystatechange ) выполнение передаётся alertContents() ;
• alertContents() проверяет получен ли ответ и все ли с ним в порядке, после чего содержимое файла test.html выводится в диалоговом окне.

Замечание: Строка httpRequest.overrideMimeType(‘text/xml’); вызовет ошибки в консоли JavaScript в Firefox 1.5 или более позднем, как описано в https://bugzilla.mozilla.org/show_bug.cgi?id=311724, если страница вызванная с помощью XMLHttpRequest не является правильным XML (например, если это обычный текст). На самом деле это корректное поведение.

Замечание 2: Если вы посылаете запрос не на статический XML-файл, а на серверный скрипт, возвращающий XML, то нужно установить некоторые заголовки ответа, если вы планируете сделать вашу страницу работоспособной в Internet Explorer помимо Mozilla. Если вы не установите заголовок Content-Type: application/xml , IE будет сообщать об ошибке JavaScript, ‘Object Expected’, после строки, где вы пытаетесь получить доступ к XML элементу. Если вы не установите заголовок Cache-Control: no-cache броузер будет кешировать ответ и никогда не будет повторно отправлять запрос, что сделает отладку весьма «забавной».

Замечание 3: Если переменная httpRequest используется глобально, то конкурирующие функции, вызывающие makeRequest() могут конкурировать друг с другом, вызывая состязания. Объявление переменной httpRequest локально в функции и передача её в alertContent() предотвращает состязания.

Замечание 4: При привязывании колбэк-функции к onreadystatechange нельзя указать аргументы. По этой причине не работает следующий код:

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

Первый способ позволяет делать несколько запросов одновременно, а второй используется, когда переменная httpRequest является глобальной.

Замечание 5: В случае ошибки взаимодействия (например, если сервер упал), при попытке доступа к переменной .status метода onreadystatechange будет сгенерировано исключение. Убедитесь, что if. then заключено в try. catch. (См. https://bugzilla.mozilla.org/show_bug.cgi?id=238559).

Шаг 4 — Работа с XML ответом

В предыдущем примере, после того как был получен ответ на HTTP-запрос мы использовали responseText запрашиваемого объекта, который содержал данные файла test.html . Теперь давайте попробуем использовать свойство responseXML .

Прежде всего, давайте создадим правильный XML документ, который мы будем запрашивать. Документ ( test.xml ) содержит следующее:

В скрипте нам всего лишь необходимо заменить строку запроса на:

Далее в alertContents() нам нужно заменить строку alert(httpRequest.responseText); на:

Этот код берёт объект XMLDocument , возвращаемый responseXML и использует методы DOM для доступа к данным, содержащимся в документе XML.

AJAX. Введение

AJAX — это мечта разработчика, потому что вы можете:

• Считывать данные с веб-сервера — после загрузки страницы
• Обновить веб-страницу без перезагрузки страницы
• Отправка данных на веб-сервер — в фоновом режиме

AJAX Пример

Позвольте AJAX изменить этот текст

AJAX Объяснение примера

HTML Страница

<div > <h2>Пусть AJAX изменит этот текст</h2>
<button type="button" onclick="loadDoc()">Изменить содержимое</button>
</div>

HTML страница содержит раздел <div> и <button>.

Раздел <div> используется для отображения информации с сервера.

Кнопка <button> вызывает функцию (если по ней кликнуть).

Функция запрашивает данные с веб-сервера и отображает их:

Функция loadDoc()

Что такое AJAX?

AJAX = Asynchronous JavaScript And XML.

AJAX — это не язык программирования.

AJAX просто использует комбинацию:

• Встроенный в браузер объект XMLHttpRequest (для запроса данных с веб-сервера)
• JavaScript и HTML DOM (для отображения или использования данных)

Название AJAX вводит в заблуждение. Приложения AJAX могут использовать XML для передачи данных, но не менее распространено переносить данные в виде обычного текста или текста JSON.

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

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

• 1. На веб-странице происходит событие (страница загружается, нажимается кнопка)
• 2. Объект XMLHttpRequest создаёт JavaScript
• 3. Объект XMLHttpRequest отправляет запрос на веб-сервер
• 4. Сервер обрабатывает запрос
• 5. Сервер отправляет ответ на веб-страницу
• 6. Ответ читается JavaScript
• 7. Правильное действие (например, обновление страницы) выполняется JavaScript

Современные браузеры (Fetch API)

Современные браузеры могут использовать Fetch API вместо объекта XMLHttpRequest.

Интерфейс Fetch API позволяет веб-браузеру отправлять HTTP-запросы к веб-серверам.

Если вы используете объект XMLHttpRequest, Fetch может сделать то же самое более простым способом.