В феврале 2005 года появился новый модный термин – Ajax. Ajax расшифровывается как Asynchronous Javascript And XML (Асинхронные Javascript И XML) и технологией в строгом смысле слова не является. Это просто аббревиатура, обозначающая подход к созданию Web-приложений с помощью следующих технологий:
- стандартизированное представление силами XHTML и CSS;
- динамическое отображение и взаимодействие с пользователем с помощью DOM;
- обмен и обработка данных в виде XML и XSLT;
- JavaScript;
- асинхронные запросы с помощью объекта XMLHttpRequest.
Если в стандартном Web-приложении обработкой всей информации занимается сервер, тогда как браузер отвечает только за взаимодействие с пользователем, передачу запросов и вывод поступившего HTML, то в Ajax-приложении между пользователем и сервером появляется еще один посредник – движок Ajax. Он определяет, какие запросы можно обработать «на месте», а за какими необходимо обращаться на сервер.
Изучаем Ajax | Урок №1 — Что это?
Поведение сервера тоже изменилось. Если раньше на каждый запрос сервер выдавал новую страницу, то теперь он отсылает лишь те данные, которые нужны клиенту, а HTML из них прямо в браузере формирует движок Ajax.
Асинхронность проявляется в том, что далеко не каждый клик пользователя доходит до сервера, причем обратное тоже справедливо – далеко не каждая реакция сервера обусловлена запросом пользователя. Большую часть запросов формирует движок Ajax, причем его можно написать так, что он будет загружать информацию, предугадывая действия пользователя.
Понятно, что с такой схемой работы качественная нагрузка на сервер меняется – если раньше запросов было мало, но каждый из них требовал значительных ресурсов (серверу нужно вытащить информацию из БД, сформировать из нее Web-страницу и отдать браузеру), то теперь задача сервера упрощается (формировать Web-страницы не нужно, да и объем передаваемых данных меньше), но запросов обрабатывать приходится больше.
Теоретически Ajax-приложения можно было создавать еще лет десять назад. Все необходимые составляющие к тому времени уже были. Классические и, пожалуй, лучшие примеры использования Ajax – проекты Google Maps и Gmail — и это при том, что программисты Google во время работы над ними ни о каком Ajax и знать не знали. У Gmail с недавнего времени есть обычный HTML-интерфейс для совместимости со старыми браузерами, и любой желающий может убедиться в том, что работает он в несколько раз медленнее, чем классический интерфейс Gmail.
С Ajax проблема заключается в том, что писать такие приложения – задача трудоемкая. Нужно написать и отладить на JavaScript движок из десяти или двадцати тысяч строк кода плюс реализовать серверную часть. Причем копировать удачные решения практически не у кого: по большому счету, несколькими действительно масштабными Ajax-проектами может похвастаться только Google, но у них проекты довольно специфические — Google Suggest (сервис, подсказывающий наиболее популярные запросы), Gmail и Google Maps. Наиболее основательной переработке программисты Google подвергли почтовый интерфейс, тогда как Google Suggest и Google Maps удивляют не столько новизной подхода, сколько качеством реализации.
Что такое AJAX? Обзор за 5 минут
Источник: htmlweb.ru
Руководство по 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.
JavaScript Ajax GET Demo function displayFullName() < // Создаем объект XMLHttpRequest var request = new XMLHttpRequest(); // Создаем объект запроса request.open(«GET», «greet.php?fname=John); // Определяем прослушивателя событий для события readystatechange request.onreadystatechange = function() < // Проверяем, был ли запрос успешным if(this.readyState === 4 this.status === 200) < // Вставляем ответ от сервера в HTML-элемент document.getElementById(«result»).innerHTML = this.responseText; >>; // Отправляем запрос на сервер request.send(); >
Содержимое поля DIV результата будет заменено ответом сервера
Display Full Name
Когда запрос асинхронный, метод send() возвращается сразу после отправки запроса. Поэтому перед обработкой необходимо проверить, где находится ответ в его жизненном цикле, используя свойство readyState объекта XMLHttpRequest .
readyState — это целое число, которое указывает состояние HTTP-запроса. Кроме того, функция, назначенная обработчику события onreadystatechange , вызывается каждый раз, когда изменяется свойство readyState . Возможные значения свойства readyState приведены ниже.
| 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 , который просто создает полное имя человека, объединяя его имя и фамилию и выводя приветственное сообщение.
else < echo «Hi there! Welcome to our website.»; >?>
Выполнение AJAX POST-запроса
Метод POST используется в основном для отправки данных форм на веб-сервер. В следующем примере показано, как отправить данные форм на сервер с помощью Ajax.
JavaScript Ajax POST Demo function postComment() < // Создаем объект XMLHttpRequest var request = new XMLHttpRequest(); // Создаем объект запроса request.open(«POST», «confirmation.php»); // Определяем прослушивателя событий для readystatechange request.onreadystatechange = function() < // Проверяем, был ли запрос успешным if(this.readyState === 4 this.status === 200) < // Вставляем ответ от сервера в HTML-элемент document.getElementById(«result»).innerHTML = this.responseText; >>; // Получяем данных формы var myForm = document.getElementById(«myForm»); var formData = new FormData(myForm); // Отправляем запрос на сервер request.send(formData); > Имя:
Комментарий:
Отправить комментарий
Содержимое поля DIV результата будет заменено ответом сервера
Если вы не используете объект FormData для отправки данных формы, например, если вы отправляете данные формы на сервер в формате строки запроса, то есть request.send(key1=value1Content-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
Оценок пока нет. Поставьте оценку первым.
Похожие посты
- 24 декабря, 2019
- 997
Руководство по сортировке массивов в JavaScript
Сортировка — обычная задача при работе с массивами. Она будет использоваться, например, если вы захотите отобразить названия городов или регионов в алфавитном порядке. JavaScript массив (array) имеет встроенный метод sort() для сортировки элементов массива в алфавитном порядке. Следующий пример демонстрирует, как это работает: Реверсирование массива Вы можете использовать метод reverse(), чтобы изменить порядок элементов массива…
- 17 декабря, 2019
- 660
Руководство по массивам в JavaScript
Массивы — это сложные переменные, которые позволяют нам хранить группы значений под одним именем переменной. Массивы JavaScript могут хранить любое допустимое значение, включая строки, числа, объекты, функции и даже другие массивы, что позволяет создавать более сложные структуры данных, такие как массив объектов или массив массивов. Предположим, вы хотите сохранить название цветов в своем коде JavaScript….
- 15 декабря, 2019
- 286
Руководство по работе с атрибутами DOM в JavaScript
Атрибуты — это специальные слова, используемые внутри начального тега HTML-элемента для управления поведением тега или предоставления дополнительной информации о теге. JavaScript предоставляет несколько методов для добавления, удаления или изменения атрибутов HTML-элемента. В этом разделе мы узнаем об этих методах подробно. Получение значения атрибута элемента Метод getAttribute() используется для получения текущего значения атрибута элемента. Если указанный…
Разработка сайтов для бизнеса
Если у вас есть вопрос, на который вы не знаете ответ — напишите нам, мы поможем разобраться. Мы всегда рады интересным знакомствам и новым проектам.
Источник: artzolin.ru
Что такое AJAX?
Привет! С вами снова Merion Academy — платформа доступного IT образования . При изучении принципов написания программного кода вы, вероятно, встречались с термином AJAX и задавались вопросом, что же он значит. Что это – язык программирования, платформа или приложение? На самом деле ничего из перечисленного, но к концу прочтения этой статьи вы будете знать, что же такое AJAX (Asynchronous Javascript and XML — асинхронные сценарии JavaScript и XML).
История AJAX
До конца 1990-х годов большинство веб-сайтов могли выдавать в качестве результата только полные веб-страницы при посещении страницы на сайте. Иначе говоря, для того, чтобы перезагрузить какие-либо отдельные данные, вам необходимо было перезагрузить всю страницу. Это был не самый эффективный способ предоставления информации пользователям, и, соответственно, не очень хорошо сказывалось на впечатлениях пользователей от взаимодействия с сайтом. Также это увеличивало нагрузку на серверы и пропускную способность, необходимую для обслуживания данных.
В 1996 году Microsoft представила тег iframe для Internet Explorer, который позволял браузеру асинхронно извлекать данные в фоновом режиме. Это был шаг в верном направлении на пути к современным веб-приложения.
В 2004 году Google добавила в Gmail функцию, позволяющую получать данные в фоновом режиме, а в 2005 году они сделали то же самое и для Google Maps.
Технологии Google и Microsoft позволяли разработчикам получать данные с веб-сервера с помощью JavaScript без необходимости перезагружать страницу. В 2005 году Джесси Джеймсон Гарретт в своей статье (о том, как Google добились такого результата) назвал эту технологию AJAX. Эта технология быстро стала одним из самых популярных способов создания веб-приложений.
А теперь, когда вы узнали немного из истории AJAX, давайте посмотрим, как это работает.
Как работает AJAX?
Что делает работу AJAX возможной, так это встроенный в веб-браузер объект XMLHttpRequests (XHR) . Этот объект поддерживают все современные браузеры, включая:
Большинство библиотек JavaScript, которые используют AJAX, помещают этот объект в пользовательский код для того, чтобы упростить его использование разработчиками, но мы рассмотрим, как AJAX работает в обычном JavaScript.
Первый шаг – создать переменную, которая будет создавать для вас экземпляр объекта XMLHttpReaquests в JavaScript. Ниже приведен пример:
const request = new XMLHttpRequest();
Поскольку мы хотим использовать эти данные в дальнейшем, например, хотим распечатать их на веб-странице, то мы добавим к этому запросу получатель запроса, который сообщит нам, когда наш запрос закончит обрабатываться и получит нужные данные.
Как можно понять из самого термина, запросы AJAX выполняются асинхронно. Это значит, что код JavaScript продолжает работать после отправки запроса и не ждет ответа. Прикрепив получатель запросов, мы можем перехватить ответ, когда он будет готов. Сделаем мы это вот так:
function requestListener() console.log(this.responseText);
>
Выше у нас есть функция, которая выводит ответ на консоль JavaScript, которую мы можем получить из атрибута responseText объекта XMLHttpRequests. Затем мы присоединяем эту функцию к событию load нашего запроса.
Следующий шаг – используем этот объект для отправки запроса к серверу с помощью метода open объекта XMLHttpRequests. Метод open принимает два параметра. Первый параметр – это используемый метод запроса. Ниже приведены несколько наиболее распространенных методов:
- GET : этот метод используется для извлечения данных и является наиболее распространенным.
- POST : этот метод отправляет данные запрошенному ресурсу и чаще всего используется для создания новых записей или для входа в систему.
- PUT : этот метод заменяет текущие представления данных измененными, которые были отправлены в запросе.
- PATCH : этот метод обычно используется для обновления части данных в запрошенном ресурсе.
- DELETE : этот метод используется для удаления определенного ресурса.
Второй параметр, который передается методу open, — это запрашиваемый ресурс. Мы будем использовать страницу с веб-сайта example.org и использовать запрос GET для простого получения данных. Вот так это будет выглядеть:
Последний шаг – фактическая отправка запроса на удаленный ресурс с помощью метода send объекта XMLHttpRequests. Ниже приведен пример:
Если мы используем метод POST, PUT или какой-либо другой метод, который обновляет ресурс, то этот метод мы вызываем с параметром, содержащем данные, которые мы отправляем:
В нашем случае мы только извлекаем данные, поэтому, как только мы выполним этот код, на консоли нашего веб-браузера выведется содержимое http://example.org/example.txt.