AJA — AJAX без XML


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

jQuery и Ajax

— это сокращение от «Asynchronous JavaScript and XML» (асинхронный JavaScript и XML), но в наши дни этот термин употребляется как самостоятельный, без приписывания ему какого-либо смысла в результате расшифровки названия.

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

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

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

В библиотеке jQuery определен ряд так называемых , которые в действительности представляют собой оболочки для вызовов функций ядра Ajax и позволяют быстро и просто решать типичные задачи Ajax.

Кратко об Ajax

Если вы новичок в Ajax, позвольте вкратце рассказать вам о том, что такое асинхронные запросы. Это важно знать, поскольку асинхронные запросы занимают в Ajax центральное место, а буква А в Ajax происходит от слова asynchronous.

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

Если же задача выполняется асинхронно, то вы сообщаете браузеру, что намерены выполнить определенную работу в фоновом режиме. Выражение «в фоновом режиме» звучит довольно туманно, но для браузера оно означает следующее: «Выполни это так, чтобы пользователь в течение всего времени мог взаимодействовать с документом, и сообщи мне, когда все будет сделано».

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

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

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

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

Прежде всего, Ajax используется для того, чтобы выполнить HTTP-запрос GET с целью загрузки HTML-фрагмента, который можно добавить в документ. Образец документа, с которым мы будем работать, приведен ниже:

Этот код (файл test.html) аналогичен тому, который использовался в предыдущих примерах, но в нем отсутствуют элементы, описывающие отдельные виды цветочной продукции, а также элементы данных и шаблоны, с помощью которых они генерируются. Вместо этого создан отдельный файл под названием flowers.html:

Это те же элементы, которые использовались в предыдущих статьях, но они не распределены по рядам и из элементов div удален атрибут class. Эти изменения внесены исключительно для того, чтобы продемонстрировать, как осуществляется обработка элементов, загружаемых в документ. Никаких технических предпосылок, которые заставляли бы поступать именно так, нет. Обратите внимание на то, что это не полноценный HTML-документ, а всего лишь фрагмент.

Для тестирования всех приведенных ниже и в следующей статье примеров, вы должны сохранить оба этих файла на локальном сервере. Если вы еще не установили локальный сервер, рекомендую WAMP сервер EasyPHP.

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

Пример того, как это можно сделать, приведен ниже:

Здесь используется метод get(), которому передаются два аргумента. Первый из них — это URL-адрес, указывающий на документ, который мы хотим загрузить. В данном случае используется адрес flowers.html, который будет интерпретироваться как URL, заданный относительно URL-адреса, использующегося для загрузки основного документа.

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

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

В этом сценарии метод get() используется для загрузки HTML-страницы, однако точно так же с сервера могут быть загружены данные любой природы.

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

Обработка ответных данных сервера

Функция, выполняющаяся в случае успешного завершения запроса, принимает в качестве аргумента данные, отправленные сервером в ответ на запрос. В этом примере мы получаем содержимое файла flowers.html, представляющее собой HTML-фрагмент. Чтобы превратить этот фрагмент в объект, с которым можно работать средствами jQuery, мы передаем его функции $(), которая выполнит синтаксический анализ фрагмента и сгенерирует дерево объектов HTMLElement, как показано в примере ниже:

Как уже отмечалось, из элементов div были намеренно удалены атрибуты class. Теперь, как видите, мы восстанавливаем их с помощью стандартного метода addClass(). Передав данные функции $(), мы получаем от нее объект jQuery, с которым далее можем работать как с любым другим объектом. Мы добавляем элементы в документ с помощью методов slice() и appendTo().

Обратите внимание на то, что для выбора элементов div, сгенерированных на основе полученных от сервера данных, используется метод filter(). Дело в том, что в процессе синтаксического анализа символы перевода строки, введенные между элементами div в файле flowers.html для структурирования данных, jQuery воспринимает как текстовое содержимое и вставляет вместо них текстовые элементы. Чтобы этого избежать, необходимо либо проследить за тем, чтобы эти символы отсутствовали в запрашиваемом документе, либо удалить их, используя метод filter().

Повышение наглядности процесса загрузки

В нашем сценарии инструкции, запускающие Ajax-запрос, начинают выполняться, когда срабатывает событие ready. Это мешает увидеть различия между использованием Ajax и встроенных данных. Для повышения наглядности процесса загрузки добавим в документ кнопку и сделаем так, чтобы Ajax-запрос выполнялся лишь после того, как на этой кнопке будет выполнен щелчок. Вносимые изменения отражены в примере ниже:

Теперь документ flowers.html не будет загружаться до тех пор, пока на кнопке «Ajax» не будет выполнен щелчок, причем каждый последующий щелчок также будет приводить к добавлению в документ дополнительных элементов, как показано на рисунке:

Обратите внимание на вызов метода preventDefault() для объекта Event, который передается в обработчик событий. Это делается для того, чтобы отменить выполнение браузером действий, предусмотренных по умолчанию. Поскольку элемент button содержится внутри элемента form, действием по умолчанию является отправка формы на сервер.

Получение других типов данных

Возможности метода get() не ограничиваются работой только с HTML. Он позволяет получать с сервера данные любой природы. Особый интерес для нас представляет формат JSON, предоставляющий удобные возможности для обработки данных средствами jQuery.

В свое время, когда технология Ajax еще только начинала широко внедряться, предпочтительным форматом данных считался XML, и даже буква X в аббревиатуре «Ajax» обязана своим происхождением этому формату. Я не собираюсь подробно обсуждать XML и лишь замечу, что этот язык страдает избыточностью синтаксиса, трудно читается и требует относительно больших затрат времени и ресурсов для генерации и обработки данных.

В последние годы формат XML был заметно потеснен форматом JSON (JavaScript Object Notation), отличающимся простотой и исключительной приспособленностью для работы с JavaScript-кодом (о чем говорит уже само его название). Специально для этого примера я создал файл mydata.json и сохранил его вместе с файлом test.html на веб-сервере. Содержимое файла mydata.json представлено в примере ниже:

В этом файле содержатся данные для различных видов цветочной продукции, и несложно заметить, что форма представления данных JSON совпадает с формой представления данных, встраиваемых в JavaScript-код. Это и есть одна из причин, по которым формат JSON вытеснил XML в веб-приложениях.

Для загрузки и обработки этих данных с помощью Ajax можно использовать метод get(), как показано в примере ниже (здесь мы используем шаблоны данных, вам потребуется добавить ссылку на библиотеку jquery.tmpl.js):

В этом примере файл с данными JSON запрашивается с сервера после щелчка на кнопке. Полученные данные передаются функции так, как если бы это был обычный HTML-фрагмент. Для обработки данных и генерации из них HTML-элементов используется подключаемый модуль шаблонов, а для вставки элементов в документ — методы slice() и appendTo(). Обратите внимание на то, что мы не предпринимаем никаких действий для того, чтобы преобразовать строку JSON в объект JavaScript — за нас это автоматически делает jQuery.

Некоторые веб-серверы (например Microsoft IIS 7.5) не возвращают содержимое браузеру, если не могут распознать расширение имени файла или формат данных. Чтобы этот пример работал с IIS, мне пришлось установить новое соответствие между расширением имени файла (.json) и MIME-типом данных в формате JSON (application/json). Пока я этого не сделал, веб-сервер IIS отвечал на мой запрос файла mydata.json сообщением с кодом 404 («Not Found»).

Передача данных GET-запросам

Данные могут пересылаться на сервер в составе GET-запросов, для отправки которых можно использовать методы get(), load(), getScript() и getJSON(). Соответствующий пример приведен ниже:

Предоставленные вами данные присоединяются к указанному URL-адресу в виде строки запроса. Это означает, что запрос имеет примерно следующий вид:

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

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

Теперь, когда вы уже знаете, как получать данные с сервера, можно перейти к рассмотрению вопроса о способах отправки данных, точнее — отправки данных формы на сервер. Для решения этой задачи также предусмотрен прямой метод post(), значительно упрощающий отправку данных формы. Прежде чем перейти к рассмотрению данного метода, вы должны настроить свой сервер.

Серверный сценарий

Для этого раздела вам понадобится серверный сценарий, который будет получать данные, отправленные браузером с использованием HTTP-метода POST, выполнять простую операцию с использованием этих данных и генерировать ответ. Сценарий PHP (вы можете написать собственный сценарий для своей платформы) для этого раздела приведен в примере ниже:

Сохраните сценарий в файле phphandler.php. Этот сценарий обрабатывает данные, отправленные браузером, и генерирует ответ в формате JSON. Вообще говоря, можно было сделать так, чтобы этот сценарий возвращал HTML-данные, но формат JSON более компактен, и во многих случаях с ним проще работать.

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

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

Использование метода POST для отправки данных формы

Итак, теперь, когда вы уже имеете подготовленный сервер, можем приступить к использованию метода post() для оправки данных формы на сервер, как показано в примере ниже:

Этот пример кажется немного сложнее, чем он есть на самом деле. Мы начинаем с того, что используем метод getJSON() для получения файла mydata.json, содержащего описание цветочной продукции, после чего генерируем элементы с помощью шаблона данных и добавляем их в документ. В результате мы оказываемся на уже хорошо вам знакомой исходной позиции, которую, надеюсь, вы уже успели полюбить:

Вы видите на этом рисунке, что в некоторых текстовых полях содержатся значения, формирующие заказ. Для регистрации функции, которая будет вызываться после щелчка на кнопке, используется метод click().

Первое, что делает обработчик — вызывает метод serialize() для элемента form. Это весьма полезный метод, который последовательно обрабатывает все элементы формы и создает строку, закодированную для передачи на сервер в качестве фрагмента URL-адреса. Для введенных мною значений метод serialize() генерирует следующую строку:

Я использую здесь метод serialize(), поскольку метод post() отправляет данные в закодированном для передачи в составе URL формате. Получив объект data, созданный на основе значений элементов input, мы вызываем метод post(), чтобы инициировать Ajax-запрос.

В качестве аргументов метод post() получает URL-адрес, по которому должны быть отправлены данные, подлежащие отправке, сами данные и функцию, которая должна быть вызвана в случае успешного выполнения запроса.

В этом примере получаемый от сервера ответ передается функции processServerResponse(). Сначала мы скрываем элементы div уровня ячеек, формирующие табличную компоновку страницы с использованием стилей CSS (они относятся к классу dcell), а затем отображаем те из них, которые соответствуют свойствам объекта JSON, полученного от сервера. Кроме того, мы используем шаблон данных для генерации разметки, отображающей общее количество выбранных единиц продукции. Это все можно было бы сделать с помощью клиента, но наша цель — научиться обрабатывать данные, возвращаемые POST-запросом Ajax. Результат показан на рисунке:

Теперь вы сами могли убедиться в том, насколько легко отправить данные формы на сервер (и, конечно же, насколько просто обработать ответ, особенно если он возвращается в формате JSON).

Указание ожидаемого типа данных

При использовании методов get() и post() библиотеке jQuery приходится определять тип данных, получаемых от сервера в ответ на запрос. Данными может быть все что угодно, начиная от HTML-кода и заканчивая файлами JavaScript. Для определения типа данных библиотека jQuery использует содержащуюся в ответе информацию, и в частности — заголовок Content-Type. Как правило, этого вполне достаточно, но иногда jQuery приходится оказывать небольшую помощь. Обычно необходимость в этом возникает из-за указания сервером неверного MIME-типа в ответе.

Можно изменить информацию, поставляемую сервером, и сообщить jQuery, какой тип данных ожидается, передавая методам get() и post() дополнительную информацию. Аргумент может принимать одно из следующих значений:

В примере ниже показано, как задать ожидаемый тип данных для метода post():

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

Ловушка при работе с Ajax

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

В этом сценарии определяется переменная elems, которая используется в функции обратного вызова Ajax для сохранения результата выполнения запроса к серверу. Полученные с сервера элементы добавляются в документ с помощью методов slice() и appendTo(). Если вы выполните этот пример, то увидите, что ни один из элементов не будет добавлен в документ, и вместо этого на консоли отобразится сообщение, конкретный текст которого зависит от типа браузера. Ниже приведено сообщение, отображаемое на консоли браузера Google Chrome:

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

Определяется переменная elems.

Получаемые с сервера данные присваиваются переменной elems.

Элементы извлекаются из переменной elems и добавляются в документ.

В действительности происходит следующее:

Определяется переменная elems.


Запускается асинхронный запрос к серверу.

Элементы извлекаются из переменной elems и добавляются в документ.

При этом в какой-то промежуточный момент времени вскоре после отправки браузером запроса происходит следующее:

В браузер поступают данные от сервера.

Данные обрабатываются и присваиваются переменной elems.

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

Использование вспомогательных методов для работы с конкретными типами данных

Библиотека jQuery предоставляет три вспомогательных метода, которые делают работу с некоторыми типами данных более удобной. Некоторые из них мы рассмотрим далее.

Получение HTML-фрагментов

Метод load() предназначен для получения только HTML-данных, что позволяет совместить запрос HTML-фрагмента, обработку ответа от сервера для создания набора элементов и вставку этих элементов в документ в одном действии. Пример использования метода load() представлен ниже:

В этом сценарии мы вызываем метод load() для элемента, в который хотим вставить новые элементы, и передаем ему URL-адрес в качестве аргумента. Если запрос завершается успешно, а полученный от сервера ответ содержит действительный HTML-фрагмент, элементы вставляются в указанное место в документе, как показано на рисунке:

Вы видите, что все элементы из файла flowers.html добавлены в документ, как мы и хотели, но поскольку у них отсутствует атрибут class, то они не укладываются в табличную компоновку страницы, используемую в основном документе. Поэтому метод load() наиболее полезен в тех случаях, когда все элементы могут быть вставлены в одно место в документе без какой-либо дополнительной обработки.

Получение и выполнение сценариев

Метод getScript() загружает файл JavaScript, а затем выполняет содержащиеся в нем инструкции. Чтобы продемонстрировать работу этого метода, я создал файл myscript.js и сохранил его вместе с файлом test.html на своем веб-сервере. Содержимое этого файла представлено в примере ниже:

Эти инструкции генерируют три ряда элементов, описывающих цветы. Мы обошлись здесь без определения шаблонов и использовали циклы для генерации элементов (хотя, вообще говоря, следовало бы воспользоваться шаблонами данных).

Самое важное, что необходимо знать при работе со сценариям, — между инициализацией Ajax-запроса и выполнением инструкций сценария состояние документа может измениться. В примере ниже приведен сценарий из основного документа, в котором по-прежнему используется метод getScript(), но при этом, еще до завершения Ajax-запроса, модифицируется дерево DOM:

Здесь мы вызываем метод getScript() для основной функции $() и передаем ему в качестве аргумента URL-адрес файла, который хотим использовать. Если сервер способен предоставить указанный файл и этот файл содержит действительный JavaScript-код, то последний будет выполнен.

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

Используя метод getScript(), можно быстро получать запрашиваемую информацию, не доставляя пользователям неудобств, вызванных необходимостью ожидания ответа. Уточню свою мысль. Я вовсе не предлагаю вам использовать этот метод для выполнения каких-либо действий скрытно от пользователя и говорю лишь о том, что следует отодвигать на второй план загрузку и выполнение вполне законной функциональности, если она представляет для пользователей меньшую ценность, чем затрачиваемое на ее ожидание время.

В данном примере после запуска Ajax-запроса с помощью метода getScript() из документа удаляется элемент row2, для чего используется метод remove(). Данный элемент используется в файле myscript.js для вставки новых элементов. Эти элементы отбрасываются незаметным для пользователя образом, поскольку в документе селектору #row2 ничто не соответствует. Итоговый результат представлен на рисунке:

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

Получение данных в формате JSON

Для загрузки данных JSON с сервера предназначен метод getJSON(). Возможно, это наименее полезный из всех трех вспомогательных методов, поскольку он не делает с данными ничего сверх того, что делает базовый метод get().

Ajax-запрос

Материал из JQuery

url — адрес запроса.
settings — в этом параметре можно задать настройки для данного запроса. Задается с помощью объекта в формате . Ни одна из настроек не является обязательной. Установить настройки по умолчанию можно с помощью метода $.ajaxSetup().

Отличие от предыдущего варианта метода заключается лишь в том, что свойство url здесь является частью настроек, а не отдельным параметром.

Содержание

Список настроек

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

beforeSend относится к ajax-событиям. Поэтому если указанная в нем функция вернет false, ajax-запрос будет отменен.

Начиная с jQuery-1.5, beforeSend вызывается независимо от типа запроса.

Начиная с jQuery-1.5, в параметр complete можно передать не одну функцию, а массив функций. Все функции будут вызваны в той очередности, в которой заданы в этом массиве.

В качестве контекста можно задать DOM-элемент, который должен каким-либо образом сигнализировать о завершении запроса:

В случае запроса методом GET, строка с данными добавляется в конец url. Если данные задаются с помощью объекта, то он должен соответствовать формату: .

Событие error не определено для dataType равных script и JSONP.

Рекомендуется устанавливать значение параметраisLocal глобально — с помощью функциии $.ajaxSetup(), а не в настройках отдельных ajax-запросов.

Начиная с jQuery-1.5, указав в этом параметре false, вы предотвратите добавление в url дополнительного параметра. В этом случае необходимо явно установить значение свойства jsonpCallback. Например так: .

Начиная с jQuery-1.5, вы можете указать функцию в этом параметре, для того, чтобы обработать ответ сервера самостоятельно. В этом случае, указанная функция должна возвращать полученные от сервера данные (в указанной функции они будут доступны в первом параметре).

Функции, реагирующие на коды удачного выполнения запроса будут получать те же аргументы, что и функции-обработчики удачного выполнения запроса (указанные в параметре success), а функции, срабатывающие на коды ошибок, будут такими же, как и у error-функций.

Время отсчитывается с момента вызова функции $.ajax. Может случиться так, что в этот момент будет запущено несколько других запросов и браузер отложит выполнение текущего запроса. В этом случае timeout может завершиться, хотя фактически, запрос даже еще не был запущен.

В jQuery-1.4 и младше, при завершении времени ожидания, объект XMLHttpRequest перейдет в состояние ошибки и доступ к его полям может вызвать исключение. В Firefox 3.0+ запросы типа script и JSONP не будут прерваны при превышении времени ожидания. Они будут завершены даже после того как это время истечет.

В jQuery-1.5 свойство withCredentials не поддерживается нативным XMLHttpRequest и при кроссдоменном запросе это поле будет проигнорировано. Во всех следующих версиях библиотеки, это исправлено.

Обработчики событий

Настройки beforeSend, error, dataFilter, success и complete (их описание есть в предыдущем разделе) позволяют установить обработчики событий, которые происходят в определенные моменты выполнения каждого ajax-запроса.

beforeSend происходит непосредственно перед отправкой запроса на сервер. error происходит в случае неудачного выполнения запроса. dataFilter происходит в момент прибытия данных с сервера. Позволяет обработать "сырые" данные, присланные сервером. success происходит в случае удачного завершения запроса. complete происходит в случае любого завершения запроса.

Мастер Йода рекомендует:  Кроссплатформенный текстовый редактор с поддержкой мыши в терминале обзор инструмента micro

Пример простого использования. Выведем сообщение при удачном выполнении запроса:

Начиная с jQuery-1.5, метод $.ajax() возвращает объект jqXHR, который помимо прочего реализует интерфейс deferred, что позволяет задавать дополнительные обработчики выполнения. Помимо стандартных для объекта deferred методов .done(), .fail() и .then(), с помощью которых можно устанавливать обработчики, в jqXHR реализованы .success(), .error() и .complete(). Это сделано для соответствия привычным названиям методов, с помощью которых устанавливаются обработчики выполнения ajax-запросов. Однако начиная с jQuery-1.8 эти три метода станут нежелательными для использования.

Для некоторых типов запросов, таких как jsonp или кроссдоменных GET-запросов, не предусматривается использование объектов XMLHttpRequest. В этом случае, передаваемые в обработчики XMLHttpRequest и textStatus будут содержать значение undefined.

Внутри обработчиков, переменная this будет содержать значение параметра context. В случае, если он не был задан, this будет содержать объект настроек.

Параметр dataType

Функция $.ajax() узнает о типе присланных сервером данных от самого сервера (средствами MIME). Кроме этого, существует возможность лично указать (уточнить), как следует интерпретировать эти данные. Это делается с помощью параметра dataType. Возможные значения этого параметра:

"xml" — полученный xml-документ будет доступен в текстовом виде. С ним можно работать стандартными средствами jQuery (также как и с документом html). "html" — полученный html будет доступен в текстовом виде. Если он содержит скрипты в тегах

Примеры отправки AJAX JQuery

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

Полное описание функции AJAX на jquery.com.

GET запрос

Запрос идет на index.php с параметром « text » и значением « Текст » через метод GET.
По сути это то же самое что перейти в браузере по адресу – http://site.com/index.php?text=Текст

В результате запроса index.php вернет строку «Данные приняты – Текст», которая будет выведена в сообщении alert.

Код можно сократить используя функцию $.get

Код файла index.php

GET запросы могут кэшироваться браузером или сервером, чтобы этого избежать нужно добавить в функцию параметр – cache: false .

POST запросы

Или сокращенная версия – функция $.post

Код файла index.php

POST запросы ни когда не кэшироваться.

Отправка формы через AJAX

При отправке формы применяется функция serialize() , подробнее на jquery.com.

Она обходит форму и собирает названия и заполненные пользователем значения полей и возвращает в виде массива – .

Добавление данных в xml файл при помощи ajax. Без перезагрузки страницы

Есть таблица в которую загружаются данные из xml. Нужно сделать что бы эти данные можно было добавлять без перезагрузки страницы. Почитал про ajax, понял что нужно передавать строку со всеми тегами и содержимым внутри. Но как эти новые данные внести в xml и отобразить их без перезагрузки?

1 ответ 1

Берём JQuery, и пишем.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками php ajax xml или задайте свой вопрос.


Похожие

Подписаться на ленту

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

дизайн сайта / логотип © 2020 Stack Exchange Inc; пользовательское содержимое попадает под действие лицензии cc by-sa 4.0 с указанием ссылки на источник. rev 2020.11.7.35374

jQuery.ajax()

Выполняет асинхронный HTTP (Ajax) запрос

version added: 1.5 jQuery.ajax( url [, settings] )

url
Тип: Строка
URL адрес, на который будет отправлен Ajax запрос

settings
Тип: Объект
Набор параметров вида ключ / значение, которые настраивают запрос Ajax. Все настройки опциональны. По умолчанию настройки берутся из $.ajaxSetup(). Ниже приведен полный список всех настроек.

version added: 1.0 jQuery.ajax( settings )

settings
Тип: Объект
Набор параметров вида ключ / значение, которые настраивают запрос Ajax. Все настройки опциональны. По умолчанию настройки берутся из $.ajaxSetup().

settings:

Тип данных
accepts

По умолчанию: зависит от типа данных

При выполнении ajax-запроса, в заголовках (header) указываются допустимые типы содержимого, ожидаемого от сервера. Значения этих типов будут взяты из параметра accepts . Если требуется его изменить, лучше сделать это с помощью метода $.ajaxSetup().

async

По умолчанию: true

По умолчанию, все запросы отсылаются асинхронно (значение данного параметра true). Если же вам нужны синхронные запросы, то параметру async выставите значение false. Кроссдоменные запросы и dataType: "jsonp" не выполняются в синхронном режиме. Учтите, синхронные запросы могут на время выполнения запроса заблокировать браузер.

beforeSend(jqXHR jqXHR , объект settings)

Функция, которая будет вызвана непосредственно перед отправкой ajax-запроса на сервер. Она может быть использована для модификации jqXHR-объекта (в ранних версиях, до jQuery 1.4.x использовался XMLHttpRequest). Так же может использоваться для изменения заголовков (headers) и т.д. Объект типа jqXHR и объект настроек, передаются в качестве аргументов. Возврат значения false в функции beforeSend вызовет отмену ajax-запроса. Начиная с jQuery 1.5, beforeSend сработает вне зависимости от типа запроса.

cache

По умолчанию: true, false для типов данных 'script' and 'jsonp'

Если false, запрашиваемая страница не будет кэшироваться браузером.

complete( jqXHR jqXHR, строка textStatus)

Функция, которая будет вызвана после завершения ajax запроса (срабатывает после функций-обработчиков success и error). Функция принимает два аргумента: объект типа jqXHR (в ранних версиях, до jQuery 1.4.x использовался XMLHttpRequest) и строку, характеризующую статус запроса ("success", "notmodified", "error", "timeout", "abort", или "parsererror"). Начиная с jQuery 1.5, complete может принимать массив функций.

contents

Параметр задается в формате <строка:регулярное выражение>и определяет, как jQuery будет разбирать ответ от сервера, в зависимости от его типа. (добалено в версии 1.5)

contentType

По умолчанию: 'application/x-www-form-urlencoded; charset=UTF-8'

При отправке Ajax запроса, данные передаются в том виде, в котором указаны в данном параметре. По умолчанию используется 'application/x-www-form-urlencoded; charset=UTF-8'. Если задать значение самим, то оно будет отправлено на сервер. Если кодировка не указана, то по умолчанию будет использоваться кодировка выставленная на сервере.

context

Объект, который станет контекстом после выполнения запроса (передаваемое значение в переменную this). Например, если указать в качестве контекста DOM-элемент, то все обработчики ajax-запроса тоже будут выполняться в контексте данного DOM-элемента. В данном примере ключевое слово this будет содержать document.body:

converters

Определяет, с помощью каких функций будет производиться конвертация значений из одного типа, в другой. (добалено в версии 1.5)

crossDomain

По умолчанию: false для одного и того же домена, true для кроссбоменных запросов.

Если вы хотите, чтобы выполнить кросс-доменный запрос (например, JSONP) на том же домене, выставите true в настройке crossDomain. Это позволяет, например, сделать серверные перенаправление на другой домен. (добалено в версии 1.5)

Данные, которые будут переданы на сервер. Если данные не являются строкой, то они конвертируются в строку запроса. Для запросов типа GET данные прикрепляются к URL. Объект должен состоять из пар ключ/значение. Если в значении массив, то jQuery упорядочивает значения в зависимости от настройки traditional. По умолчанию, например, превращается в &foo=bar1&foo=bar2.

dataFilter( строка data, строка type)

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

dataType

По умолчанию: автоматически определяемая строка (xml, json, script, или html)

Тип данных, ожидаемых от сервера. Если опция не определена, то jQuery попытается определить тип, основываясь на MIME-типе ответа.

error( jqXHR jqXHR, строка textStatus, строка errorThrown)

Функция, исполняемая в случае неудачного запроса. Принимает 3 аргумента: объект jqXHR (в прошлом XMLHttpRequest), строку с описанием ошибки, а так же строку исключения, если оно было выбрашено. Второй аргумент может содержать следующие значения: null, "timeout", "error", "abort", и "parsererror". В случае если происходит HTTP ошибка, то в третий аргумент будет записан её текстовой статус. К примеру, "Not Found" или "Internal Server Error.". Начиная с jQuery 1.5, вместо одной функции, этот параметр может принимать массив функций. Событие error не происходит при dataType равному script или JSONP.

global

По умолчанию: true.

Вызывать или нет глобальные обработчики событий Ajax для этого запроса (например ajaxStart или ajaxStop).

headers

По умолчанию: <>

Здесь можно указать дополнительные заголовки запроса (header). Значения этой настройки будут введены до вызова функции beforeSend, в которой могут быть внесены окончательные изменения в заголовки. (добалено в версии 1.5)

ifModified

По умолчанию: false

Запрос будет считаться успешным только в случае, если данные ответа изменились со времени последнего запроса. Проверка осуществляется по заголовку Last-Modified. По умолчани, данная опция отключена. В jQuery 1.4 так же проверяется значение 'etag', для отслеживания факта изменения данных.

isLocal

По умолчанию: в зависимости от текущей локации

Параметр определяет, запущена ли веб-страница локально (например по протоколу file, *-extension, и w >(добалено в версии 1.5)

jsonp

Определяет имя параметра, который добавляется в url JSONP-запроса(по умолчанию, используется "callback"). К примеру настройка преобразуется в часть url строки 'onJSONPLoad=?'. Начиная с версии 1.5, указание в этом параметре false предотвращает добавление в url дополнительного параметра. В этом случае, необходимо установить значение настройки jsonpCallback. Например так: .

jsonpCallback

Функция, которая будет вызвана при ответе сервера на запрос типа JSONP. По умолчанию, jQuery генерирует произвольное уникальное имя этой функции, что более предпочтительно. Если вы хотите использовать кэширование GET запросов, то вписывайте название функции сами. Начиная с версии 1.5 можно указать функцию, для того, чтобы обработать ответ сервера самостоятельно.

mimeType

Здесь можно указать тип данных, в котором ожидается ответ от сервера вместо XHR. (добалено в версии 1.5.1)


password

Пароль, который будет использоваться в ответ на запрос проверки подлинности доступа HTTP (если это требуется)

username

Имя пользователя, которое будет использоваться в ответ на запрос проверки подлинности доступа HTTP (если это требуется)

processData

По умолчанию: true;

По умолчанию передаваемые на сервер данные преобразуются из объекта в строку запроса и отправляются как "application/x-www-form-urlencoded". Если вам необходимо отправить DOM-документ или иные данные, которые нельзя подвергать конвертированию установите опцию processData в false.

scriptCharset

Применяется только для Ajax GET-запросов типов 'JSONP' и 'script '. Если сервер на стороннем домене использует кодировку, отличную от вашей, необходимо указать кодировку стороннего сервера.

statusCode

Набор пар, в котором кодам выполнения запроса сопоставляются функции, которые при этом будет вызваны. Например, для кода 404 (страницы не существуют) можно сделать вывод сообщения на экран:

Если запрос прошёл успешно, то в качестве параметра, анонимная функция будет принимать те же параметры, что и при success. При ошибке, будет принимать то же самое что и при функции-обработчике error. (добалено в версии 1.5)

success( объект data, строка textStatus, объект jqXHR)

Функция, которая будет вызвана в случае успешного завершения запроса. Принимает 3 аргумента - данные (data), присланные сервером и прошедшие предварительную обработку; строка со статусом выполнения (textStatus); объект jqXHR (в версиях до 1.5 вместо jqXHR используетсяXMLHttpRequest). С версии jQuery 1.5, вместо одной функции, этот параметр может принимать массив функций.

timeout

Время ожидания ответа от сервера в миллисекундах. Переписывает глобальную настройку этого же параметра в $.ajaxSetup(). Если это время будет превышено, запрос будет завершен с ошибкой и произойдет событие error, которое будет иметь статус "timeout".

traditional

По умолчанию: false

Установите значение этого параметра в true, для того, чтобы использовать традиционный стиль сериализации.

По умолчанию: GET

Определяет тип запроса GET или POST. Можно также использовать другие HTTP-запросы (такие как PUT или DELETE), но следует помнить, что они поддерживаются не всеми бразерами.

По умолчанию: текущая страница.

Страница, накоторую будет отправлен запрос.

По умолчанию ActiveXObject в IE, XMLHttpRequest в других браузерах.

Callback-функция, для создания объекта XMLHttpRequest. Создав свою функцию, вы берёте на себя всю ответственность за формирование объекта.

xhrFields

Объект вида <имя:значене>для изменения значений соответствующих полей объекта XMLHttpRequest.

(добалено в версии 1.5.1)

Примеры

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

Получить последнюю версию HTML страницы

Передаём в качестве данных XML документ. Отключаем автоматическую конвертацию данных в обычную строку, задав настройке processData значение false :

Отправить на сервер значение ID. Сохранить данные, оповестить пользователя. Если запрос не прошёл, сообщить об этом пользователю.

Часть 7. Использование XML в запросах и ответах

Узнайте, когда это разумно, а когда нет.

Серия контента:

Этот контент является частью # из серии # статей: Освоение Ajax

Этот контент является частью серии: Освоение Ajax

Следите за выходом новых статей этой серии.

Сегодня невозможно создавать сколько-нибудь значительные программы без обращения к XML. Будь вы разработчиком Web-страниц, обдумывающим переход к XHTML, Web-программистом, разрабатывающим JavaScript, серверным программистом, использующим дескрипторы развертывания и привязку данных, или программистом, исследующим базы данных на основе XML, без расширяемого языка разметки вам не обойтись. Поэтому неудивительно, что XML считается одной из корневых технологий, которые лежат в основе Ajax.

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

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

XML: Есть ли он вообще?

Легко сделать предположение в отношении Ajax-приложений и использовании ими XML; и имя технологии (Ajax), и используемый ею корневой объект ( XMLHttpRequest ) указывают на использование XML, и вы будете слышать, что XML постоянно связан с Ajax-приложениями. Однако такое восприятие неверно, а если вы действительно захотите узнать, с чем именно вы работаете при написании асинхронных приложений, вы должны знать, что это восприятие неверно -- но вам важнее знать почему оно неверно.

XMLHttpRequest: Неудачные имена и HTTP

Худшее, что может случиться с технологией, это ее злоупотребление до такой степени, что замена ее основных частей становится невозможной. Именно это произошло с XMLHttpRequest , основным элементом, используемым в Ajax-приложениях. Судя по названию, он спроектирован для отсылки XML по HTTP-запросам, или, возможно, для создания HTTP-запросов в каком-либо XML-формате. Как бы имя объекта ни звучало, все же его реальная функция заключается в предоставлении способа для вашего клиент-кода (обычно JavaScript на вашей Web-странице) для отсылки HTTP-запроса. Только это, и не более того.

Итак, было бы хорошо просто изменить имя XMLHttpRequest на что-либо более точное, например HttpRequest , или, возможно, просто Request . Однако, миллионы разработчиков сейчас вводят Ajax в свои приложениях, а так как мы все знаем, что требуются годы -- если не десятилетия -- чтобы большинство пользователей перешло к новым версиям браузеров, таких как Internet Explorer 7.0 или Firefox 1.5, такой переход просто нецелесообразен. В результате вы остаетесь с XMLHttpRequest , а разработчикам только остается признать, что имя выбрано неудачно.

Очевидно, что одним из наиболее известных методов перехода на аварийный режим (fallback methods) при обращении к браузеру (особенно на Windows), который не поддерживает XMLHttpRequest , является применение Microsoft-объекта IFRAME . Едва ли похоже на XML, HTTP, или даже на запрос, не правда ли? Очевидно, что все эти элементы могут быть включены, но важно, чтобы было ясно, что объект XMLHttpRequest в большей степени предназначен для создания запросов без обращения к загрузке страницы, чем для XML, или даже HTTP.

Запросы делаются при помощи HTTP, а не XML

Еще одним распространенным заблуждением является предположение, что XML так или иначе незаметно применяется -- точка зрения, которой я и сам когда-то придерживался, по правде говоря! Однако, такая точка зрения свидетельствует о неверном понимании данной технологии. Когда пользователь открывает систему навигации (brouser) и запрашивает Web-страницу из сервера, набирается что-то вроде http://www.google.com или http://www.headfirstlabs.com . Даже если не включается http:// , браузер вставит эту часть в панель адреса системы. Эта первая часть -- http:// -- это явный указатель на то, как происходит передача данных: через HTTP, протокол передачи гипертекста (Hypertext Transfer Protocol). Когда вы записываете код на вашей Web-странице, чтобы связаться с сервером, идет ли речь о применении Ajax или об обычной форме POST или даже о гиперссылке, вы используете HTTP.

HTTPS: по-прежнему HTTP

Те из вас, кто менее знаком с Web могут удивляться таким унифицированным указателям ресурсов (URLs), как https://intranet.nextel.com . Протокол https является надежным протоколом HTTP и просто применяет более надежную форму протокола HTTP, используемого обычными Web-запросами. Поэтому даже с HTTPS вы все еще просто применяете HTTP, хотя и с некоторыми дополнительными уровнями защиты от посторонних глаз.

В связи с тем, что вся Web-коммуникация между браузерами и серверами происходит посредством HTTP, представление о том, что XML каким-то образом незаметно используется XMLHttpRequest в качестве технологии или средства передачи данных не соответствует действительности. Конечно возможно отправлять XML в HTTP-запросе, но HTTP является очень точно определяемым стандартом, от которого в любое время без труда можно отказаться. Если вы намеренно не используете XML в вашем запросе, или если сервер не отправляет вам ответ в XML, то в объекте XMLHttpRequest будет применяться ничто иное как простой старый HTTP. Поэтому следующий раз, когда кто-нибудь вам скажет, "Да, это называется XMLHttpRequest потому что здесь незаметно применяется XML", просто улыбнитесь и терпеливо объясните ему, что представляет собой HTTP, и поясните, что пока XML можно отправлять через HTTP, XML является форматом данных, а не протоколом передачи данных. Вы оба извлечете выгоду из такого объяснения.

Применение XML (в действительности)

На этом этапе я рассказал вам обо всех областях, где XML не используется в Ajax. Но x в Ajax и XML в XMLHttpRequest все же очень реальны, и у вас есть несколько опций для использования XML в ваших Web-приложениях. В этом разделе вы узнаете об основных опциях, и затем вы сможете детально с ними ознакомиться в остальных разделах данной статьи.

Опции для XML

В ваших асинхронных приложениях вы найдете два основных применения XML:

  • Для отправления запроса с Web-страницы на сервер в XML-формате
  • Для получения запроса из сервера на вашу Web-страницу в XML-формате

Первое применение -- для отправления запроса в XML -- требует, чтобы вы формировали ваш запрос как XML, либо применяя для этого API, либо просто связывая текст и затем отправляя результат на сервер. В этом способе главной рассматриваемой задачей является построение запроса согласно правилам XML, так, чтобы он был понят сервером. Итак, основное внимание в действительности уделяется XML-формату; у вас есть данные, которые вы хотите отправить, и вы только должны представить их в XML-выражении. Остальная часть данной статьи посвящена данному применению XML в ваших Ajax-приложениях.

Второе применение -- для получения запроса в XML -- требует, чтобы вы получили запрос из сервера и извлекли данные из XML (опять же с помощью API или более грубым методом). В этом случае вашей задачей будет извлечение полученных с сервера данных из XML, чтобы можно было их использовать конструктивно. Об этом пойдет речь в следующей статье данной серии, где вам предоставится детальное описание данного вопроса.

Строгое предостережение

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

Если вы хотите написать молниеносно быстрое приложение, такое как настольное приложение, XML может оказаться не лучшей отправной точкой. Если вы начнете с простого текста, и обнаружите особую необходимость в применении XML, это другое дело; однако, если вы используете XML с самого начала, вы почти наверняка замедлите ответную реакцию вашего приложения. В большинстве случаев быстрее будет отправить простой текст -- с помощью пар имя/значение (name/value), например name=jennifer -- чем превращать текст в XML, как в примере:

Вы только представьте все участки, где применение XML требует дополнительного времени: придание тексту оболочки XML; отправка дополнительной информации (заметьте, что я не включаю сюда какие-либо сопутствующие элементы, XML-заголовок, или что-либо, что будет частью более реалистичного запроса); синтаксический анализ XML сервером, создание ответа, сворачивание ответа обратно в форрмат XML, и отправка его обратно на вашу Web-страницу; и затем синтаксический анализ ответа вашей страницей и, наконец, использование его. Поэтому ознакомьтесь с тем, когда применять XML, но не думайте, что ваше приложение во многих ситуациях будет работать быстрее; скорее, это добавит гибкости, о чем мы сейчас и поговорим.

XML от клиента к серверу

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

Пересылка пар имя/значение (name/value)

Примерно 90% Web-приложений, которые вы пишите, вы завершаете парами имя/значение для отправления на сервер. Например, если пользователь набирает свое имя и адрес в какой-либо форме на своей Web-странице, вы можете получить из формы примерно такие данные:

Если бы вы использовали обычный текст для пересылки этих данных на сервер, вы могли бы применить код как в Листинге 1. (Это похоже на пример, который я использовал в первой статье этой серии. См. Ресурсы.)

Листинг 1. Отправка пар имя/значение в виде обычного текста


Преобразование пар name/value в XML

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

Конечно, XML требует, чтобы вы имели корневой элемент, или, если вы просто работаете с фрагментом документа (часть XML-документа), охватывающий элемент. Поэтому вы можете конвертировать вышеприведенный XML-код во что-то подобное:

Теперь вы готовы создать эту структуру в вашем Web-клиенте, и отправить его на сервер. почти.

Передача данных вербального типа

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

В действительности, вы должны предпринять два шага, чтобы удостовериться, что данные, которые вы отправляете в XML, будут получены правильно:

  1. Удостоверьтесь, что скрипт, на который вы посылаете XML, допускает XML в качестве формата данных.
  2. Удостоверьтесь, что скрипт допустит особый XML-формат и структуру, в которых вы отправляете данные.

Оба шага, вероятно, потребуют от вас беседы с человеком, итак, строгое предостережение! А серьезно, если вам важно уметь отправлять данные, такие как XML, большинство авторов скриптов будут вам обязаны; поэтому просто найти скрипт, который будет допускать XML, не должно быть трудным. Однако, вам еще нужно удостовериться, что ваш формат соответствует тому, что требует скрипт. Например, предположим, что сервер принимает данные такого рода:

Напоминает вышеуказанный XML, за исключением двух моментов:

  1. XML, исходящий от клиента, помещен внутри элемента адрес , но сервер ожидает, что данные будут помещены в элемент profile .
  2. XML, исходящий от клиента, использует элемент zipCode , тогда как сервер ожидает zip-код в элементе zip-code .

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

Передача XML на сервер

Когда дело дойдет до передачи XML на сервер, вы потратите больше кодировки, чтобы взять данные и обернуть их в формат XML, чем для фактической передачи данных. Фактически, как только ваша XML-строка готова для передачи не сервер, вы отправляете ее точно так, как вы послали бы любой другой простой текст; проверьте Листинг 2 чтобы увидеть это в действии.

Листинг 2. Отправка пар имя/значение в XML

Большинство из этого понятно без объяснений, лишь несколько моментов стоит отметить. Во-первых, данные в вашем запросе должны быть вручную отформатированы как XML. Это небольшой шаг назад после трех статей по использованию Document Object Model, не так ли? А так как ничто не запрещает вам применять DOM для создания XML-документа с помощью JavaScript, вам тогда придется перевести тот DOM-объект в текст, прежде чем отправлять его по сети с GET или POST-запросом. Поэтому оказывается легче просто отформатировать данные с помощью обычной строковой манипуляции. Конечно, это создает возможность допущения ошибок или опечаток, поэтому вам нужно быть особенно внимательными при записи кода, в отношении XML.

Как только вы сконструировали ваш XML, вы открываете соединение в большей степени тем же способом, что и при пересылки текста. Я предпочитаю применять POST-запросы для XML, так как некоторые браузеры налагают ограничения по протяженности на цепочки GET-запроса, а XML может становиться довольно длинным; вы увидите, что Листинг 2 переключается от GET к POST соответственно. К тому же, XML предпочтительно пересылается посредством метода send() , а не как параметр, прикрепленный на конце URL, который вы запрашиваете. В этом и заключаются все довольно тривиальные различия, к которым легко приспособиться.

Вам, правда, придется записать совершенно новую строку кода:

Ее нетрудно понять: она просто сообщает серверу, что вы отправляете ее как XML, а не как простые старые пары name/value. В любом случае, вы отправляете данные как текст, но применяете здесь text/xml , или XML, отправленный как обычный текст. Если вы просто использовали пары name/value, строка будет такой:

Если вы забыли сообщить серверу, что вы посылаете ее как XML, вы окажетесь в затруднении, поэтому не забывайте этот шаг.

Как только вы все это составите, все, что вам нужно будет сделать, это вызвать send() и передать его в XML-строке. Сервер получит ваш XML-запрос, и (предполагая, что вы выполнли всю предварительную работу) примет XML, расшифрует его и отправит вам ответ. Вот и все, что нужно сделать -- XML-запросы всего лишь с несколькими изменениями в коде.

Отправка XML: за и против?

Прежде чем вы покинете XML-запросы (и эту статью) и перейдете к XML-ответам, давайте поразмышляем, насколько разумно применять XML в ваших запросах. Я уже упоминал, что XML никак не может считаться самым скоростным форматом данных в отношении передачи, но помимо этого есть над чем подумать.

Не просто сконструировать XML

Первое, что вам нужно понять, это то, что XML не так-то просто сконструировать для применения в запросах. Как вы видели в Листинге 2, ваши даннные быстро становятся слишком замысловатыми из-за семантики XML:

Может показаться, что в этом нет ничего плохого, но это XML-фрагмент, который имеет только шесть полей. Большинство Web-форм, которые вы будете разрабатывать, будут иметь от десяти до пятнадцати; хотя вы не будете применять Ajax для всех ваших запросов, над этим стоит задуматься. Вы тратите, по крайней мере, столько же времени, занимаясь угловыми скобками и именами тегов, сколько вы тратите на действительные данные, а возможность сделать опечатки - огромна.

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

XML не добавляет ничего к вашим запросам

Помимо проблемы запутанности, применение XML для ваших запросов в действительности не предлагает вам больших преимуществ -- если вообще они есть -- по сравнению с обычным текстом и парами name/value. Имейте в виду, что все в этой статье нацелено на взятие тех же самых данных, которые вы могли бы уже отправить, применяя пары имя/значение (обратитесь к Листингу 1) и передачу их с помощью XML. Нигде ничего не говорилось о данных, которые можно отпралять с помощью XML, и которые было бы невозможно отправлять, используя обычный текст; это потому, что почти никогда нет ничего, что можно отправить с помощью XML, что нельзя было бы отправить, используя обычный текст.

Вот, собственно, и всё, что касается XML и запросов: в их пользу довольно редко возникают убедительные доводы. В следующей статье этой серии вы увидите, что сервер может применять XML для того, что намного труднее выполнить, если использовать обычный текст; но это не касается запросов. Поэтому если вы не имеете дело со скриптом, который допускает только XML (а есть и такие), вам безопаснее использовать обычный текст почти во всех ситуациях при передачи запросов.

Заключение

Вам теперь, определенно, кажется, что вы знаете, как начинать работать с XML в Ajax. Вы знаете, что Ajax-приложения не должны применять XML, и что XML не является своего рода чудодейственным средством для передачи данных. Вам также должно быть довольно комфортно пересылать XML из Web-страницы на сервер. Что еще важнее, вы знаете, что сервер будет действительно работать и отвечать на ваши запросы: вы должны удостовериться, что серверный скрипт допускает XML, и что допускает его в формате, который вы используете для пересылки данных.

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

В следующей статье этой серии, вы узнаете, как серверы могут отвечать с помощью XML, и как ваши Web-приложения могут работать с этими ответами. К счастью, есть гораздо больше причин, чтобы сервер отправлял XML обратно в Web-приложение, чем наоборот, поэтому вы получите даже больше пользы из технических деталей статьи; а теперь, удостоверьтесь, что вы понимаете, почему XML не всегда целесообразен -- по крайней мере, для отправления запросов. Возможно, вы даже захотите попытаться выполнить некоторые Web-приложения с помощью XML в качестве формата данных для запросов, и затем конвертировать обратно в обычный текст, и посмотреть, что быстрее и легче для вас. Я еще увижусь с вами в сети до опубликования следующей статьи.

Знакомство с AJAX для Front-End дизайнеров. Основы AJAX

Дата публикации: 2020-02-15

От автора: данная серия статей призвана познакомить front-end дизайнеров и начинающих разработчиков с технологией AJAX, основной front-end технологией. В первом уроке мы затронем основы AJAX, начнем узнавать различные детали данной технологии, узнаем, что это такое, как работает и какие есть ограничения.

Приступим! Обратите внимание: предполагается, что вы уже знаете базовые front-end технологии, такие как HTML и CSS.

Что такое AJAX?

AJAX расшифровывается как «Асинхронный JavaScript и XML». Под AJAX понимается не одна технология, и она не является новой. На самом деле это группа технологий (HTML, CSS, Javascript, XML, и т.д.), которые связываются вместе для создания современных веб-приложений.

С помощью AJAX клиент (браузер) общается с сервером и запрашивает у него данные. Полученный ответ обрабатывается, и в станицу вносятся изменения без полной ее перезагрузки. Разберем аббревиатуру AJAX:

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

«JavaScript» это язык программирования, который используется для создания объекта запроса AJAX, парсинга этого ответа и обновления DOM страницы.

Для отправки запроса на сервер клиент использует XMLHttpRequest или XHR API. API (программный интерфейс) это набор методов, которые задают правила общения между двумя заинтересованными сторонами. Тем не менее, приходящие из AJAX запроса данные могут быть в любом формате, а не только в XML.

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

Чтобы понять основной принцип работы, давайте взглянем на картинку ниже:

На картинке описан стандартный AJAX сценарий:

Пользователь хочет увидеть больше статей, и он или она кликает на нужную кнопку. Данное событие запускает вызов AJAX.

Запрос посылается на сервер. С запросом можно передать различные данные. Запрос может посылаться в статический файл (к примеру, example.php), хранящийся на сервере. Также можно выполнять динамические скрипты (functions.php), на каждом этапе которых будет происходить общение с базой данных (или другой системой) для извлечения необходимой информации.

База данных отсылает обратно запрошенные статьи на сервер. А сервер посылает их в браузер.

JavaScript парсит ответ и обновляет часть DOM (структура страницы). В нашем примере обновится только сайдбар. Остальные части страницы не меняются.

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

Живой пример на AJAX

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

Сперва рассмотрим принципы работы Facebook и Twitter. При прокрутке страницы вниз AJAX подгружает новый контент. Также если вы ставите лайк или дизлайк вопросам и ответам на Stack Overflow, опять же срабатывает AJAX. Как только вы вбиваете в строку поиска что-то в Google или Youtube, срабатывают множественные запросы AJAX.

Более того, если мы захотим, то сможем отслеживать данные запросы. К примеру, в консоли Chrome это можно сделать, кликнув правой кнопкой мыши и активировав функцию Log XMLHttpRequests.

Как создать запрос

Выше мы уже говорили, что для создания запроса используется XMLHttpRequest API. Кроме того в jQuery, самой популярной JS библиотеке есть различные Ajax функции и методы. В серии статей мы рассмотрим различные примеры на чистом JS и JQuery для отправки запросов на сервер.

Управление запросами

Вытаскиваемые данные с сервера могут храниться в различных форматах. XML, JSON, JSONP, обычный текст и HTML.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

XML (Расширяемый язык разметки) – один из самых популярных форматов для обмена данными между приложениями. Формат похож на HTML, и в качестве структуры используются теги. Однако в XML нет готовых тегов, мы сами задаем их. Пример структуры ниже:

jQuery.ajax()

Содержание:

jQuery.ajax( url [, settings ] ) Возвращает: jqXHR

Описание: Выполняет асинхронный HTTP (Ajax) запрос.

Добавлен в версии: 1.5 jQuery.ajax( url [, settings ] )

Добавлен в версии: 1.0 jQuery.ajax( [settings ] )

Объект с числовыми кодами HTTP кодов статусов и функции которые будут вызваны когда статус ответа имеет соотвествующее значение. Например, следующий alert будет вызван когда статус ответа будет 404:


Если запрос успешен, то соотвествующая функция будет принимать те же самые параметры что и success обработчик; если результат ошибка (включая редиректы 3xx), то эти функции примут те же параметры что и обработчик error .

(добавлен в версии: 1.5)

В jQuery 1.5, свойство withCredentials не будет распространено на нативный объект XHR и таким образом CORS запросы требуя его будет игнорировать этот флаг. По этой причине, мы рекомендуем использовать jQuery 1.5.1+.

(добавлен в версии: 1.5.1)

Функция $.ajax() лежит в основе всех Ajax запросов отправляемых при помощи jQuery. Зачастую нет необходимости вызывать эту функцию, так как есть несколько альтернатив более высого уровня, такие как $.get() и .load() , которые более простые в использовании. Если требуется менее распространенные варианты , через, $.ajax() Вы можете более гибко скофигурировать запрос.

В простейшем виде, функция $.ajax() может быть вызвана без аргументов:

Важно: настройки по умолчанию могут быть установлены при помощи функции $.ajaxSetup() .

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

Объект jqXHR

Объект jQuery XMLHttpRequest (jqXHR) возвращается функцией $.ajax() начиная с jQuery 1.5 является надстройкой над нативным объектом XMLHttpRequest. Например, он содержит свойства responseText и responseXML , а также метод getResponseHeader() . Когда траспортом используемым для запрос является что то иное, а не XMLHttpRequest (например, тэг script tag для JSONP запроса) объект jqXHR эмулирует функционал нативного XHR там где это возможно.

Начиная с jQuery 1.5.1, объект jqXHR также содержит метод overrideMimeType() (он был доступен в jQuery 1.4.x, но был временно удален в версии jQuery 1.5). Метод .overrideMimeType() может быть использован в обработчике beforeSend() , например, для изменения поля заголовка content-type :

Объект jqXHR возвращаемый методом $.ajax() в версии jQuery 1.5 реализует интерфейс Promise, дающий ему все свойства, методы и поведение Promise. Эти методы принимают один или несколько аргументов, которые вызываются при завершении запроса инициированного при помощи $.ajax() . Это позволяет назначать несколько обработчиков на один запрос и даже назначать обработчики после того как запрос может быть завершен. (Если запрос уже выполнен, то обработчики вызовутся немедленно). Доступные методы Promise в объекте jqXHR:

    jqXHR.done(function( data, textStatus, jqXHR ) <>);

Альтернатива создания обработчика success , подробнее смотрите на deferred.done() .

jqXHR.fail(function( jqXHR, textStatus, errorThrown ) <>);

Альтернатива создания обработчика error , метод .fail() заменяет устаревший метод .error() . Смотрите подробнее deferred.fail() .

jqXHR.always(function( data|jqXHR, textStatus, jqXHR|errorThrown ) < >); (добавлен в версии jQuery 1.6)

Альтернатива создания обработчика complete , метод .always() заменяет устаревший метод .complete() .

В ответ на успешный запрос, аргументы функции те же самые что и у .done() : data, textStatus и объект jqXHR. Для ошибочных зпросов аргументы те же самые что и у .fail() : объект jqXHR, textStatus и errorThrown. Смотрите подробнее deferred.always() .

jqXHR.then(function( data, textStatus, jqXHR ) <>, function( jqXHR, textStatus, errorThrown ) <>);

Включает в себя функциональность методов .done() и .fail() , что упрощает (начиная с jQuery 1.8) проще управлять объектом Promise. Смотрите подробнее deferred.then() .

Внимание: обработчики jqXHR.success() , jqXHR.error() и jqXHR.complete() будут удалены в jQuery 3.0. Вы можете использовать jqXHR.done() , jqXHR.fail() и jqXHR.always() соответственно.

Ссылка this внутри всех обработчиков указывает на объект заданный в параметре context переданные в аргумент settings метода $.ajax ; если context не указан, то this указывает на объект settings.

Для обеспечения обратной совместимости с кодом XMLHttpRequest , в объекте jqXHR предоставляет следующие свойства и методы:

  • readyState
  • status
  • statusText
  • responseXML и/или responseText когда запрос вернул xml и/или text, соответственно
  • setRequestHeader(name, value) те заголовки что отходят от стандарта, заменят старое значение на новое, а не конкатенируют старое и новые значения
  • getAllResponseHeaders()
  • getResponseHeader()
  • statusCode()
  • abort()

Механизма onreadystatechange не предусмотрено, так как done , fail , always и statusCode охватывает все возможные требования.

Очередность функций обратного вызова

Все параметры beforeSend , error , dataFilter , success и complete принимают в качестве значений функции обратного вызова, которые вызываются в соотвествующие моменты времени.

С версии jQuery 1.5 функции fail и done , и, начиная с jQuery 1.6, always вызовутся в первую очередь, первыми из упрвляемой очереди, что позволяет более чем один обработчик для каждого элемента очереди. Смотрите отложенные методы, которые реализуют внутренности обработчиков метода $.ajax() .

Функции обратного вызова предоставленные методом $.ajax() следующие:

  1. beforeSend вызывается всегда; принимает jqXHR объект и объект settings как параметры.
  2. error вызывается, если запрос выполняется с ошибкой. Принимает объект jqXHR , строку со статусом ошибки и объект исключения если применимо. Некоторые встроенные ошибки обеспечивают строку качестве объекта исключения: "abort", "timeout", "No Transport".
  3. dataFilter вызывается немедленно при успешном получении данных ответа. Принимает в качестве параметров возвращенные данные и знчение параметра dataType и должен вернуть (возможно измененные данные) для передачи далее в обработчик success .
  4. success вызывается если запрос выполнен успешно. Принимает данные ответа, строку содержащую код успеха и объект jqXHR .
  5. Promise обработчик — .done() , .fail() , .always() и .then() — выполняются, в том порядке в котором зарегистрированы.
  6. complete вызывается когда запрос закончен, независимо от успеха или неудачи выполнения запроса. Принимает объект jqXHR , отформатированную строку со статусом успеха или ошибки.

Типы данных

Различные типы ответа на вызов $.ajax() подвергаются различным видам предварительной обработки перед передачей обработчика success . Тип предварительной подготовки зависит от указанного в ответе поля заголовка Content-Type , но может быть явно указан при помощи опции dataType . Если параметр dataType задан, то поле заголовка Content-Type будет проигнорирован.

Возможны следующие типы данных: text , html , xml , json , jsonp и script .

Если указан text или html , никакой предварительной обработки не происходит. Данные просто передаются в обработчик success и доступны через свойство responseText объекта jqXHR .

Если указан xml , то ответ парсится при помощи jQuery.parseXML перед передачей в XMLDocument в обработчик success . XML документ доступен через свойство responseXML объекта jqXHR .

Если указан json , то ответ парсится при помощи jQuery.parseJSON перед передачей в объект для обработчика success . Полученный JSON объект доступен через свойство responseJSON объекта jqXHR .

Если указан script , то $.ajax() выполнит JavaScript код который будет принят от сервере перед передачей этого кода как строки в обработчик success .

Если указан jsonp , $.ajax() автоматически добавит в строку URL запроса параметр (по умолчанию) callback=? . Параметры jsonp и jsonpCallback из объекта settings переданных в метод $.ajax() могут быть использованы для указания имени URL-параметра и имени JSONP функции обратного вызова соответственно. Сервер должен вернуть корректный Javascript который будет переда в обработчик JSONP. $.ajax() выполнит возвращенный JavaScript код, вызвыв функцию JSONP по ее имени, перед передачей JSON объекта в обработчик success .

Отправка данных на сервер

По умолчанию, Ajax запросы отправляются при помощи GET HTTP метода. Если POST метод требуется, то метод следует указать в настройках при помощи параметра type . Этот параметр влияет на то как данные из параметра data будут отправлены на сервер. Данные POST запроса всегда будут переданы на сервере в UTF-8 кодировкепо стандарту W3C XMLHTTPRequest.

Параметр data может содержать строку произвольной формы, например сериализованная форма key1=value1&key2=value2 или Javascript объект . Если используется последний вариант, то данные будут преобразованы в строку при помощи метода jQuery.param() перед их отправкой. Эта обработка может быть отключена при помощи указания значения false в параметре processData . Обработка может быть нежелательной, если Вы хотите отправить на сервере XML документ, в этом случае измените параметр contentType с application/x-www-form-urlencoded на более подходящий MIME тип.

Расширенные настройки

Параметр global предотвращает выполнение обработчиков зарегистрированных при помощи методов .ajaxSend() , .ajaxError() и подобных методов. Это может быть полезно, например, для скрытия индикатора загрузки реализованного при помощи .ajaxSend() если запросы выполняются часто и быстро. С кросс-доменными и JSONP запросами, параметр global автоматически устанавливается в значение false .

Если сервер выполняет HTTP аутентификацию перед предоствлением ответа, то имя пользователя и пароль должны быть отправлены при помощи параметров username и password options.

Ajax запросы ограничены по времени, так что ошибки могут быть перехвачены и обработаны, чтобы обеспечить наилучшее взаимодействие с пользователем. Таймауты запроса обычно либо установлены по умолчанию, либо установлены глобально при помощи $.ajaxSetup() вместо того чтобы указывать параметр timeout для каждого отдельного запроса.

По умолчанию, запросы всегда совершаются, но браузер может предоставить ответ из своего кэша. Для запрета на использования кэшированных результатов установите значение параметра cache в false . Для того чтобы вызвать запрос с отчетом об изменении ресурса со времени последнего запроса установите значение параметра ifModified в true .

Параметр scriptCharset разрешает кодировку которая будет явно использована в запросах использующих тэг

Форум

Справочник

логический
логический
функция или массив
логический
объект или строка
функция или массив
логический
логический
логический
строка или функция
логический
функция или массив
логический
Поиск по форуму
Расширенный поиск
К странице.

Введение в Ajax

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

Надеюсь, она будет полезна для понимания, что такое AJAX и с чем его едят.

Что такое AJAX ? Пример реализации.

AJAX, или, более длинно, Asynchronous Javascript And Xml - технология для взаимодействия с сервером без перезагрузки страниц.

За счет этого уменьшается время отклика и веб-приложение по интерактивности больше напоминает десктоп.

Например, при нажатии кнопки голосовать - из браузера на сервер будет отправлено сообщение, а сервер ответит браузеру, что голос принят.

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

Вот код кнопки в примере выше:

При нажатии она вызывает функцию vote , которая отправляет запрос на сервер, ждет ответа, а затем показывает сообщение об этом в div 'е под кнопкой:

Далее мы разберем, как она работает, более подробно.

Для обмена данными с сервером используется специальный объект XmlHttpRequest , который умеет отправлять запрос и получать ответ с сервера. Кроссбраузерно создать такой объект можно, например, так:

Более подробно о деталях реализации AJAX с использованием XmlHttpRequest и других транспортов можно почитать в разделе про общение с сервером.

Здесь мы не будем на этом останавливаться и перейдем сразу к функции vote :

Поток выполнения, использованный vote, довольно типичен и выглядит так:

  1. Функция создает объект XmlHttpRequest
  2. назначает обработчик ответа сервера onreadystatechange
  3. открывает соединение open
  4. отправляет запрос вызовом send (ответ сервера принимается срабатывающей в асинхронном режиме функцией onreadystatechange )
  5. показывает посетителю индикатор состояния процесса


Серверный обработчик, к которому обращен AJAX-запрос (в примере это vote.php) по сути ничем не отличается от обычной страницы. AJAX-запрос, отправляемый XmlHttpRequest , ничем не отличается от обычного запроса.

Просто текст, который возвращает сервер, не показывается как HTML, а читается и обрабатывается функцией onreadystatechange .

Смысл AJAX - в интеграции технологий

Технология AJAX использует комбинацию:

  • (X)HTML, CSS для подачи и стилизации информации
  • DOM-модель, операции над которой производятся javascript на стороне клиента, чтобы обеспечить динамическое отображение и взаимодействие с информацией
  • XMLHttpRequest для асинхронного обмена данными с веб-сервером. В некоторых AJAX-фреймворках и в некоторых ситуациях, вместо XMLHttpRequest используется IFrame, SCRIPT-тег или другой аналогичный транспорт .
  • JSON часто используется для обмена данными, однако любой формат подойдет, включая форматированный HTML, текст, XML и даже какой-нибудь EBML

Типичное AJAX-приложение состоит как минимум из двух частей.

Первая выполняется в браузере и написана, как правило, на JavaScript, а вторая - находится на сервере и написана, например, на Ruby, Java или PHP .

Между этими двумя частями происходит обмен данными через XMLHttpRequest(или другой транспорт).

Что я могу сделать с помощью AJAX ?

Смысл AJAX - в интерактивности и быстром времени отклика.

Небольшие элементы управления

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

Динамическая подгрузка данных с сервера.

Например, дерево, узлы которого подгружаются по мере раскрытия.

Незаметные для пользователя действия.

Например, при редактировании статьи - каждые 10 минут результаты автосохраняются на сервере.

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

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

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

Пример. Google suggest.

Google - одна из первых систем, которая предложила "живой поиск", live search. Пользователь печатает поисковую фразу, а система автодополняет ее, получая
список самых вероятных дополнений с сервера.

Код, который это обеспечивает, работает следующим образом.

  • Активируется примерно при каждом нажатии клавиши
    • Время посылки последнего запроса отслеживается
    • Для "обычной" скорости печати - запрос отсылается при каждом нажатии
    • Для "программистской" скорости - каждые несколько нажатий
  • Создается скрытый DIV, который показывается при начале печати
  • DIV заполняется ответом сервера
    • Текущий результат подсвечен, можно перемещаться и выбирать
    • При нажатии правой стрелки, поиск в подрезультатах
  • Результаты кэшируются
    • при нажатии на "удалить", обращения к серверу не происходит
  • Время на осуществление запроса отслеживается для управления частотой запросов к серверу
    • Обычный модем будет обращаться к серверу меньше,
    • Подключение по выделенной линии - запросы идут чаще.

Пример. Gmail.

Раз уж взялись за Google - рассмотрим почтовый сервис той же компании, http://gmail.com.

На момент его появления он явился единственным открытым почтовым сервисом, использующим AJAX для следующих фич.

    Проверка ошибок ввода формы ДО сабмита

Результат: обширная популярность, высокий спрос на account'ы с момента открытия.

Синхронная модель VS Асинхронная модель

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

Условно говоря, мы действуем так:

  1. закидываем удочку
  2. ждем, когда клюнет
  3. клюнуло - включаем подтяжку спиннинга

При асинхронном подходе мы:

  1. вешаем на удило специальный детектор клева, задаем ему тянуть спиннинг, когда клюнет
  2. закидываем удочку
  3. занимаемся другими делами
  4. детектор клева срабатывает, запуская подтяжку спиннинга

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

В асинхронном варианте - мы сначала задали программу, что делать при клеве, а затем опустили удочку ловить и занялись другими делами.
Например, поставили еще 5 таких удочек.

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

Существуют приемы, облегчающие асинхронное программирование, например, отложенный объект Deferred (Twisted,Dojo,Mochikit), но об этом - в отдельной статье.

Синхронная и асинхронная модель в AJAX

Вернемся к нашим баранам: браузеру, серверу и, скажем, базе данных.

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

Все процессы выполняются последовательно, один за другим.

Сетевые задержки включены во время ожидания, обозначенное на схеме серым цветом.

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

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

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

Пользователь может написать комментарии, заполнить и отослать форму и т.п: Могут производиться новые асинхронные запросы.

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

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

Из-за такого разрыва между действием и реальным результатом приложение становится гораздо более чувствительно к ошибкам.

Особенно в случае нескольких одновременных асинхронных запросов, нужно заботиться об очередности выполнения и ответа (race-conditions) и, в случае ошибки, оставлять приложение в целостном (consistent) состоянии.

Особенности асинхронной модели

  • Сложность в реализации
    • Недостаточные возможности браузера (javascript)
    • Асинхронная модель сложнее для отладки
  • Race conditions
    • Неопределена последовательность выполнения
    • Можно делать много одновременных задач ("удочек"), но задача, начатая первой, может окончиться последней.
  • Реакция тут же, но неизвестно, какой будет результат. Усложнена обработка ошибок
    • Ошибок коммуникации - разрыв связи, и т.п.
    • Пользовательских ошибок - например, не хватило привилегий
  • Контроль целостности (bugproof)
    • Например, редактор отправил асинхронный запрос на удаление ветки дерева. Добавление в нее нужно отключить, пока не придет ответ сервера. Если вдруг не хватило привилегий, то операция не удалась.

  • Интерактивность
  • Быстрый интерфейс

Плюсов всего два, зато какие! Овчинка стоит выделки.

Асинхронный drag'n'drop.

Иногда для асинхронных операций необходимо делать различные "финты ушами". Например, хочется сделать drag'n'drop в дереве, т.е перетаскивать статьи из одного раздела в другой мышкой, и чтобы они на сервере в базе данных меняли родителя.

Drag'n'drop - это "взял мышей объект - положил куда надо - готово". Но в асинхронной модели не может быть все прям сразу "готово".
Надо проверить привилегии на сервере, проверить, существует ли еще объект, вдруг его удалил другой пользователь.

Надо как-то показать, что процесс пошел, но результат "ща будет..". А как? В асинхронной модели указатель мыши не может просто так зависнуть над объектом, превратившись в часики.

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

Stale context, устаревший контекст

В примере с drag'n'drop также затронута проблема "stale context" - устаревшего контекста.

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

Как правило, для преодоления таких казусов используются следующие средства:

Политика редактирования

Это когда все знают кто чего делает и на уровне деления полномочий и личного общения такие удаления согласовывают. Вариант заведомо небезопасный, но обычно работающий.

Локинг и/или версионный контроль

Локинг - блокирование редактируемых документов.

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

Более подробно о локинге и версионности можно почитать, например, в документации к системе версионного контроля Subversion.

Автообновление контекста

Проблема устаревшего контента может быть на 99% решена при помощи мгновенного автообновления.

Браузер держит постоянное соединение с сервером (или делает время от времени корректирующие запросы) - и нужные изменения отсылаются по этому каналу.

Например, в раскрытую ветку дерева иногда подгружаются новые статьи, в открытый почтовый интерфейс - новые письма.

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

Всё это уже знал, но статья так легко и интересно написана что прочел еще раз =) 5+

Все это конечно интересно, но где взять конкретные примеры допустим ajax авторизации?

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

Я знаю для чего нужен Ajax! Вот только не знаю с чего начать его изучение!

А что Вы хотите научиться делать? Поконкретнее, если можно.

Интересует очевидное - считывание блока контента без перезагрузки всей страницы. Начать можно с того, что юзверь клюкнул кнопку меню. На сервант через Post/Get передана сцылка на запрашиваемую страницу. Движок нашел в базе нужный контент. Что далее, если Ajax ?
Можно даже на примере работы этого сайта. Вот например сделать хреф рядом с Антиспам-вопросом с title='не знаю ответа' . Чтобы при нажатии его, с серванта подгружался калькулятор. А на стороне браузера - выводить его в , а то ведь не все помнят математику (ещё бы интегралов понаписали).
ЗЫ Ещё можно отправлять текст модеру сайта, по мере заполнения текстареа свыше 80%, чтобы неуспев дописать вопрос, юзверь получал ответ 😀

в примере, который указан выше есть все ответы.
запрос отсылается на "/ajax_intro/vote.html"
результат req.responseText можно вставлять куда угодно, хоть в statusElem.innerHTML

или Вы не об этом?

1. Содержимое файла "/ajax_intro/vote.html" ?
2. Можно догадаться, что на событии onClick кнопки Submit подвешена функция Vote() . Вот с этого места поподробнее, если можно.
3. Где вообще форма? Или её отменили в Ajax?
Если был источник, пож укажите.

1. По этому адресу находится серверный скрипт, который засчитывает голос и выдает текст ответа. Текст ответа можно получить в responseText.

2. Да, на клик подвешена функция vote. При клике она вызывается, передает голос на сервер и возвращает ответ.

3. Формы никакой нет, и самбита нет. Есть вызов сервера через XmlHttpRequest.

По поводу источника - вы читаете оригинал статьи.

Функция результата голосования возвращает по return значение, которое ПЕРЕДАЁТСЯ в браузер, где присваивается переменной responceText. Потом innеrHТМL передаст его в div, так?
А где задается значение "Ожидается ответ сервера"?

PS. Не спорю, что в Вашем варианте оно работает "без гвоздей". А у меня движок, в котором кое-как сваяли модуль поддержки Ajax.

Не заметил сразу прямую выдачу в div через innerHТМL - прошу прощения

Спасибо, все фукционирует

А например кнопку подгружаемую по условию можно сделать ?

// создать объект для запроса к серверу, функция getXmlHttp будет дана ниже
напишите пожалуйста getXmlHttp. а может я просто неувидел?
заранее спасибо

"Вешаем на удило специальный детектор клева"
Я плачу Браво )))

все прекрасно понятно =)
только вот чего начать изучение?
допустим php . поставь apache+mysql+php = изучай а тут не пойму с чего начинать =( что ставить?

Я так подозреваю, что для самого конкретно AJAX`a вообще ничего ставить не нужно. Просто нужен какой-нить блокнот с подсветкой синтаксиса. Ну а для серверной части подойдёт Denwer, но это как вы уже сказали (apache+mysql+php).

оч клево написано

Класс, изучаю вот. Только если нажать на голосовать второй раз (подождав от первого прилично), то ответ придет от сервера настолько быстро, что в итоге у вас залипает фраза "Ожидаю ответа сервера. ". Это можно решить как-то?

Единственный вариант, который приходит в голову - send(null) вернуло закешированный ответ, который тут же обработался - и все это до 2й строки.. Но это очень странно, получается что запрос обработался фактически синхронно.

Классно всё расписано . а где взять пример аякса для генерации дерева ?

Примеры дерева - в программе Visual DataFlex 16.1 - после установки и загрузки библиотеки AJAX Library 2.3 - есть примеры в директории Examples

Спасибо за статью. Но вот на мне тоже хотелось бы посмотреть на пример дерева. Ну или отпишите плиз коды функций по обавлению и удалению веток дерева.
Заранее спасибо

Классно написано, автору респект!

Хорошая статья мне понравилось и про ajax теперь все ясно стало

Зе бест!
Суть аякса я понял.
теперь думается - нужно разобраться с синтаксисом языка и попробовать сделать замену фрэймов.

Вопрос-уточнение! я нуб! Если я хочу скачать контент с конкретного сайта, используя свою html-форму (то есть ту, которая на моем компе), а не форму этого сайта, то это подпадает под кросс-доменный скриптинг? или это можно закрыть типовым XmlHttpRequest.

Спасибо за статью!
Отлично разжеванный материал, наконец-то мне стало все ясно с этим аяксом

Очень хорошая статья, но у меня возник вопрос, если надо передать не null запрос а например ассоциотивный массив
ну как blablabla.ru/test.php?key1=var1&key2=var2

как тогда строить req.send
?

В данном случае просто делаешь URL: /test.php?key1=var1&key2=var2

Первая выполняется в браузере и написана, как правило, на JavaScript, а вторая - находится на сервере и написана, например, на Ruby, Java или PHP.

А не могли бы написать для примера с голосованием скрипт PHP? Я поняла, что отправка идет методом GET, а вот как это «ловить» на сервере…
Спасибо

Направлять запрос соответствующему скрипту и в нем все делать. Скажем, /ajax/vote.php

То есть используем метод POST или Get указывая скрипт обработки на сервере там он как то преобразовует данные с ajax в php и тут php связываеться с бд. Так получаеться?

Убейся, что ты здесь вообще делаешь??

Чудесная статья . Все понял, кроме одного момента: что на ходится в файле vote.php? Там функция вызывается или что? И как аякс понимает что сервер что то вернул? return или что то другое? Хотелось бы поподробнее.

Присоединяюсь к предыдущему вопросу

Добавил в статью информацию, содержащую ответ на ваш вопрос.

У автора статьи есть чувство юмора)

Спасибо за статью. Все бы так писали. Надо ещё разок почитать. хочется влезть в детали.

А как решать проблему с кодировками? Мне требуется посылать ответ написанный кирилицей. В этом случае браузеры отображают билеберду.

Возможно есть более продвинутые способы, но я в php-скрипте, который возвращал мне ответ, все русские буквы прогонял через функцию iconv и менял кодировку

XmlHttpRequest всегда приходит в UTF. Тут уж ничего не поделаешь - либо переходить на UTF-8, либо перегонять iconv .

В php.ini
default_character_set=cp1251
подобная строчка должна быть где-то в файле.


Все преимущества использования AJAX на лицо. Очень хорошо статья написана.

день добрый, а как можно реализовать прогрузку контента с помощью ajax, если:
Станичка использует фрэймвок mootools.
На ней разные эффекты, соответственно.
Есть, допустим, место -

А туда нужно ajax'oм подгрузить не просто текст, а несколько "виджетов" mootools, которые после подгрузки связались бы с фрэймвоком и стали бы работать.

Передай вместо тек4ста ссылки на виджеты с параметрами

Давно искал пример проверки логина при регистрации без перезагрузки страницы. Нигде не мог найти внятного обьяснения или рабочего примера. Сделал по типу описаного тут голосования, всё заработало. Короч, наманая статья

В чем суть Ajax? Вижу только конструкции явыскрипт и пиашпи!

Отличная статья! Спасибо автору

ajax все больше укрепляет свои позиции в реализации интерактивности сайта
Статья 5+

Скопировал ваш код с кнопкой "Голосовать", на страничку, которая у меня на винчестере. Запустил - надпись "ОК" в теге появилась, но никакой alert не появляется. Стал изучать, оказывается req.status равно нулю. Почему? Что не так?

Я изменил строчку адреса на такую:

Или что я не правильно делаю?

$en ? echo 'privet' : echo 'paka';

У меня вопрос. как изменить кодировку сообщения, приходящего с сервера.
Все вроде бы нормально, но ответ, который потом выдается Alert-ом содержит в себе "Сервер ответил: (тут куча непонятных иероглифов)"

p.s. все файлы сохранены в кодировке Windows-1251

Извиняюсь, так не получится.

Хотя, если посылать заголовок скриптом, то прекрасно работает

всё крута) пасиба) счаЗ буду делать вход на сайт через
Ajax
)
можно сделать кнопку Просмотр в диве через Ajax)

Sniper
внимательно вчитываемся 'частые проблемы > кеширование' на xmlhttprequest.ru
там описан еще один вариант обхода кеша, немного больше кода зато больше эффективности

там же, чуть ниже, можно посмотреть разбор кода

а почему если нажать на кнопку Голосовать в начале статьи ВТОРОЙ раз то логика нарушается: сначала возникает алерт что типа все ок а потом Ожидаю ответа сервера. и тишина.

отвте как увидел позже есть))

Используйте запросы POST, потому что браузер их не кеширует и они более защищены!

Статья самодостаточна! Кратко и в то же время объемно. Теперь ясно, что Ajax - это ни удочка, ни сети, ни гарпун, а только способ пользоваться всем этим барахлом. И очевидно, что этот способ - для профессионалов рыбной ловли 🙂

почему не вылетает alert .

Млин, все же все-равно не понятно как через POST отправить пусть скрипту vote.php данные из формы. Ну например, пусть тоже голосование, только есть еще варианты ответов (то есть есть форма с radio), так вот как скрипту vote.php передать значение одного из radio??

Вы пишете "Браузер держит постоянное соединение с сервером (или делает время от времени корректирующие запросы) - и нужные изменения отсылаются по этому каналу"

Можно поподробнее, что значит "держит постоянное соединение"? Ведь наскольо мне известно браузер сокетное соединение не устанавливает, и все реал-тайм обновление через ajax - это просто запросы, отсылаемые серверу автоматически с некой периодичностью. Или я не прав?

Не понял юмора насчет проблем со "старым контентом". Технологии распределенных баз данных насчитывают уже десятки лет. Неужели пользователи аяхи избавлены от этого накопленного опыта и знаний?

Здравствуйте! Прежде всего, спасибо за крайне полезный цикл статей.

Есть, однако вопрос.
А можно ли через XMLHttpRequest получить с сервера простой текстовый файл (не HTML, XML и пр.) в кодировке cp1251?

До сих пор пробовал -- он его читает, но упорно пытается вернуть в utf8. Соотв., вместо русских букв получается абракадабра.

Как решить проблему с использованием серверных компонент (на сервере крутится ASP) -- примерно представляю. Интересно, решаема ли она без (т.е. исключительно на стороне клиента).

Буду ОЧЕНЬ признателен, если кто подскажет!

Спасибо большое. Перелистав почти десяток "учебников" только на этой статье наконец "въехал" в технологию.

Ам.. не понятно откуда берутся вот эти цифры?

if (req.readyState == 4)
.
if(req.status == 200)

пардон, вопрос снят )) У кого будут такие же глупые вопросы, смотреть http://xmlhttprequest.ru/

Я тоже не понял как отправлять данные методом POST. Точнее понятно, но какой индекс тогда будет у массива $_POST с тем что я отправил? если бы я отправлял кнопкой submit через форму, в которой поле ввода, например с аттрибутом name="test", то в скрипте бы я обратился $_POST["test"]. А с XMLHttpRequest так не работает. ЗЫ только что со страницы http://xmlhttprequest.ru/, там тоже ничего не сказано

Я тоже был на http://xmlhttprequest.ru/
читаем внимательнее:

send()
Отсылает запрос. Аргумент - тело запроса. Например, GET-запроса тела нет, поэтому используется send(null), а для POST-запросов тело содержит параметры запроса.

// Пример с POST
.
var params = 'name=' + encodeURIComponent(name) + '&surname=' + encodeURIComponent(surname)
xmlhttp.open("POST", 'script.php', true)
.
xmlhttp.send(params)

Вопрос только в том остался, что когда я в script.php
выполняю
echo $_POST["name"]
выводится пустая строка .

установи http-заголовок вот так вот: req.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

Есть вопрос, ajax-технология базируется на языке Java Script, что будет если пользователь отключит у себя в браузере Java Script? Я так понимаю ajax-отвалится и весь труд накроется медным тазом( а чтобы такого не случилось надо писать запасной код который сработает в любом случае ). Я правильно понимаю?

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

у меня вот тоже такая же проблема:
вместо vote.php я отправляю запрос some.jsp
В some.jsp у меня запускается exe и ловится все, что он выдает в строку, потом выводится на страничку
( out.print(stroka) )
Первый раз все запускается, а потоооом.
Почемуто ответ приходит моментально и содержит результат предыдущего вызова some.jsp .

Не подскажите,как мне при помощи ajax сделать, чтобы при нажатии ссылки в меню слева(меню новостей например), новость отображалась в главной таблице

Отличная статья! Спасибо!

Автор, большое спасибо за чудесную статью! Всё очень толково разьяснено. Респект

> Пример. Google suggest.
DIV заполняется ответом сервера

  • Текущий результат подсвечен, можно перемещаться и выбирать
  • При нажатии правой стрелки, поиск в подрезультатах

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

Вот у меня такой вопос.

Я все сделал, работает супер! но есть одна фигня. Текст с сервера не выводиться. в вместо него одно слово: undefined.

В сервере содержиться:

Не подскажет, где я ошибся?

Ошибся почти в каждом предложении:

"не выводиться";
"содержиться".

Может сначала в школу, а потом текст с сервера выводить?

помоему респонс текст должен идти со стартом, а не с инком

Отличная статья!
"Смысл AJAX - в интерактивности и быстром времени отклика."
Подскажите пожалуйста, насколько быстро работает AJAX? Можно ли с помощью данной технологии создать динамичную онлайн-игру?

Думаю скомпилированные приложения все равно будут работать быстрее (Flash)

Не работает(((
Скопировал даже код предпредыдущего сообщения, на что IE выдал:
Сведения об ошибке на веб-странице
Сообщение: 'null' - есть null или не является объектом
Строка: 35
Символ: 5
Код: 0

Вот тебе по легче,тоже создаём XMLHttpRequest

А вообще статья чёткая,понравилась 5+

Ramzil_Nixon, я статью еще не доконца прочел, пока разбираюсь. Мне показалось что правильней назначать обработчик перед отправкой запроса:

у Вас:

start.send(null); // Отправляем запрос в сервер
inc.innerHTML = 'Ждем ответа сервера';
start.onreadystatechange = function() .

Мне кажется, лучше так:
start.onreadystatechange = function() .
start.send(null); // Отправляем запрос в сервер
inc.innerHTML = 'Ждем ответа сервера';

Подскажите пожалуйста, не работает в ИЕ8 (у меня такая стоит в других не проверял). В остальных браузерах все нормально.

срабатывает изменение в БД но нет анимации. В шаблоне прописал стили которые проверяют значение в БД и соответственно при нажатии F5 если элемент заблокирован то он остается в полупрозрачном виде. Так вот в ИЕ при нажатии кнопки + потом F5 элемент полувиден, а вот обратно не работает и анимации нет. Спасибо

Илья, сделайте, пожалуйста, учебник по AJAX более подробным, так сказать "для начинающих". После прочтения учебника по JS этот материал кажется слишком сжатым и "не измельченным", непонятным. Стоит добавить больше примеров, расписать более подробно. Например, в каких случаях нужно использовать GET, а в каких POST? Какой вариант транспорта выбрать, если у меня на странице есть форма для выставления рейтинга, а на другой - большая HTML-форма из 50 разных элементов (поля, списки, флажки. ) для загрузки на сервер? Как взаимодействовать с БД, например, с mySQL + php ? На этой странице хотелось бы увидеть пример не с примитивным

а с ветвлением на стороне сервера, например, та же голосовалка: выбираешь "5", сервер возвращает "Вы выбрали 5" и т.д.

Здравствуйте, а как ajax применять в ASP.NET, не MVC? Что служит обработчиком, вместо страница.php?

Доброго времени суток, Илья. Хочу обратиться к Вам за разъяснениями по поводу XMLHttpRequest, т.к. в интернете не нашел ответ на свой опрос (может и не правильно искал).
Суть вопроса такова, примерно:
есть функция, которая возвращает объект xhr (кроссбраузерно). При этом я написал ее таким образом, что если уже есть готовый объект она возвращает его. Но тут возникли проблемы - если первый запрос еще не отработал и создавать второй, то первый абортится (Aborted), печально ((
Решил переделать ф-кцию, чтоб возвращала всегда новый объект XMLHttpRequest, но тут возник вопрос, а не будет ли утекать память. Что происходит с объектом XMLHttpRequest после того как он отработал.
Может, после обработки результата от запроса объект XMLHttpRequest нужно явно удалять при помощи delete?
Буду очень признателен вам за помощь в данном вопросе.


Решил протестировать один пример в денвере с сайта
w3schools.com

И тут такая ситуация: меняю содержимое файла ajax_info.txt
но через браузер раз за разом выдаётся прежнее содержимое. Так и должно быть, и нормально ли, что оно кэшируется? Спасибо заранее.

Ответ нашёл у вас же. Спасибо

Почему когда я делаю вот так

То есть ставлю в событие условие обработки первого состояние запроса, Internet Explorer и FireFox запускают эту функцию два раза.
Помогите мне. Я уже целый день вожусь с этим.

, а я то думаю, что он не сразу реагирует.

Круто, эта функция (XmlHttp) работает даже в телефонах, проверялось на Samsung, Nokia и Apple iPhone 4.
А я сначала думал что ajax только для компов.

Случайно наткнулся на статью. Очень доступно написано! Спасибо автору.

начал изучать AJAX, разбирался с данным кодом. все понял. но код у меня не работает.
метод sleep из рнр запускается. но сообщение из echo не выводится. уже сто раз все пересмотрел и не понимаю в чем проблема.

Спасибо, начал работать с javascript, понадобился ajax , хороший пример.

alert("Ответ сервера: "+req.responseText);
req.responseText - пустая строка, хоть убей!

if (req.readyState == 4) <
alert("Ответ сервера: "+req.responseText);
>

if(req.status == 200) <
// если статус 200 (ОК) - выдать ответ пользователю
alert("Ответ сервера: "+req.responseText);
>
Выводит: "Ответ сервера:"
req.responseText - пусто.
req.status == 4 - мимо проходит

P.S. Как то у вас всё сложно.

Для того чтобы сделать запрос тянешь jquery? Молодец.

Для того чтобы сделать запрос тянешь jquery? Молодец. ответ

хороший текст. спасибо!

Alex'S, возможно в php файле возвращаешь через return, а нужно echo.

Пример: vote.php для примера с голосованием
// span рядом с кнопкой

Асинхронность -- это, конечно, хорошо, но иногда нужно без нее. Ну, например, по результатам одного запроса нужно сделать следующий, а по результатам того -- еще один. Матрешку из обработчиков городить? Существует какой-либо способ вернуться из callback, кроме очевидного и глупого -- гонять в основной программе цикл, ожидая установки флага.

Хорошая должность. Спасибо, что поделился.

Скажите пожалуйста, почему не работает постраничная навигация после ajax запроса

Спасибо за статью. С Ajax имею мало опыта, и Ваша помощь оказалась весьма актуальной.

Еще можно почитать о разработке интересные статьи на eqsash.

Искал эту информацию. Замечательная информация Я проверю для получения дополнительной информации. mobile legend bang bang game

Хорошая должность. Спасибо, что поделился. Домашнее

alert("Ответ сервера: "+req.responseText);
req.responseText - пустая строка, хоть убей!
ado stunt cars 2

Отправить комментарий

Текущий раздел
  • Введение в Ajax
  • Ajax и Rich Client
  • Ajax и клиент-серверная архитектура.
  • Способы общения с сервером
  • COMET
  • Форматы данных для AJAX
  • Обмен данными для документов с разных доменов
  • Обмен данными между доменами. Часть 2.
Поиск по сайту
Содержание

Учебник javascript

Основные элементы языка

Сундучок с инструментами

Интерфейсы

Все об AJAX

Оптимизация

Разное

Последние комментарии
  • Комментарий
    18 часов 21 минута назад
  • A very nice blog, I like the way you.
    2 дня 4 часа назад
  • This is a great thing, I think everyone.
    2 дня 4 часа назад
  • It is wonderful to be here with.
    2 дня 4 часа назад
  • Download and play DOM Level 0 - это.
    2 дня 9 часов назад
  • We are the children
    3 дня 9 часов назад
  • function firstUniqLiter(str) <
    3 дня 17 часов назад
  • Великие посты! Я на самом деле.
    4 дня 11 часов назад
  • artical is really informative and.
    5 дней 1 час назад
  • Вы не можете найти себя, уходя в.
    6 дней 6 часов назад
Последние темы на форуме

Заголовок первого блока

  • Пункт #1 Пункт #1 Пункт #1 Пункт #1 Пункт #1 Пункт #1
  • Пункт #2
  • Пункт #3
  • Пункт #4 Пункт #4 Пункт #4 Пункт #4 Пункт #4 Пункт #4 Пункт #4 Пункт #4 Пункт #4
  • Пункт #5
  • Пункт #6
  • Пункт #7
    • Пункт #7.1
    • Пункт #7.2
    • Пункт #7.3 Пункт #7.3 Пункт #7.3 Пункт #7.3 Пункт #7.3 Пункт #7.3 Пункт #7.3 Пункт #7.3 Пункт #7.3
    • Пункт #7.4
    • Пункт #7.5
  • Пункт #8
    • Пункт #8.1 Пункт #8.1 Пункт #8.1 Пункт #8.1 Пункт #8.1
    • Пункт #8.2
    • Пункт #8.3
  • Пункт #9
  • Пункт #10
  • Пункт #11 Пункт #11 Пункт #11 Пункт #11 Пункт #11
    • Пункт #11.1
    • Пункт #11.2
    • Пункт #11.3
    • Пункт #11.4
    • Пункт #11.5
    • Пункт #11.6
  • Пункт #12 Пункт #12 Пункт #12 Пункт #12 Пункт #12 Пункт #12 Пункт #12 Пункт #12 Пункт #12
  • Пункт #13
  • Пункт #14
  • Пункт #15
  • Пункт #16
  • Пункт #14 Пункт #14 Пункт #14 Пункт #14 Пункт #14 Пункт #14 Пункт #14 Пункт #14 Пункт #14
  • Пункт #15
  • Пункт #16

Заголовок второго блока

Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст

Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст

Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст

Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст

Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст

Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст

Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст

Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст

Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст

Создание Ajax-приложения

Первым шагом надо создать XML-файл с данными. Назовем этот файл data.xml.

Теперь создадим простенькую Web-страничку, содержащую данные для примера. Это страница с JavaScript-ом, и пользователи будут запрашивать ее для того, чтобы увидеть технологию Ajax в действии. Назовем этот файл ajax.html.

Обратите внимание: для пользователей с отключенным JavaScript вставлена ссылка к файлу data.xml. Для пользователей с включенным JavaScript-ом будет вызвана функция ajaxRead.

Теперь напишем скрипт, который и будет получать данные из файла XML. Его надо будет вставить в нашу Web-страницу в области head.

Пример использования для разных браузеров: Получение части данных

У объекта XMLHTTPRequest есть состояние readyState=3, при котором ответ находится в процессе загрузки, и уже полученная часть может быть прочитана в responseText. У большинства браузеров(кроме IE, который изобрел свой объект XDomainRequest) состояние interactive можно использовать для передачи сообщений с сервера не закрывая соединение.

Для IE от версии 8 испольуйте XDomainRequest вместо new ActiveXObject('MSXML2.XMLHTTP'), но этот класс работает несколько иначе, чем XmlHTTPRequest.

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