Ajax запрос в jQuery. Часть 3. Метод load


Содержание материала:

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 более компактен, и во многих случаях с ним проще работать.

Топ-пост этого месяца:  Урок 12. Создание чата на NodeJS, SocketIO и VueJS. Деплой и тест чата в Heroku

Возвращаемый объект 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().

jQuery — AJAX Метод load()

jQuery метод load() является простым, но мощным методом AJAX.

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

jQuery Метод load()

Необходимый параметр URL определяет адрес URL, который Вы хотите загрузить.

Дополнительный параметр данные определяет строку запроса в виде пар ключ/значение, чтобы передать ее наряду с запросом.

Дополнительный параметр обратного вызова — имя функции, которая будет выполняться после того, как метод load() завершается.

Вот контент нашего файла в качестве примера: «demo_test.txt»:

jQuery и AJAX — это КРУТО.

Это некоторый текст в параграфе.

Следующий пример загружает контент файла «demo_test.txt» в определенный элемент

Пример

Также можно добавить селектор jQuery к параметру URL.

Следующий пример загружает контент элемента с идентификатором «p1» в файле «demo_test.txt», в определенный элемент

Пример

Дополнительный параметр обратного вызова определяет функцию обратного вызова, которая будет вызвана, когда метод load() завершается. У функции обратного вызова могут быть различные параметры:

  • responseTxt — содержит результирующий контент, если вызов успешен
  • statusTxt — содержит состояние вызова
  • xhr — содержит объект XMLHttpRequest

Следующий пример выводит на экран окно предупреждения после того, как метод load() завершается. Если метод load() завершился успешно, он выводит на экран «Внешний контент загружен успешно!», и если метод дал сбой, он выводит на экран сообщение об ошибке:

jQuery — AJAX load() Method

метод загрузки jQuery ()

Метод jQuery Load () является простым, но мощным методом AJAX.

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

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

Необязательный параметр data указывает набор пар ключ/значение строки запроса для отправки вместе с запросом.

Необязательный параметр обратного вызова — это имя функции, которая должна быть выполнена после завершения метода Load ().

Вот содержание нашего примера файла: «demo_test.txt»:

jQuery and AJAX is FUN.

This is some text in a paragraph.

The following example loads the content of the file «demo_test.txt» into a specific

Пример

Также можно добавить селектор jQuery к параметру URL.

В следующем примере загружается содержимое элемента с идентификатором = «P1», внутри файла «demo_test.txt», в конкретный элемент

Пример

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

  • responseTxt — содержит результирующее содержимое, если вызов завершается успешно
  • statusTxt — содержит состояние вызова
  • xhr — содержит объект XMLHttpRequest

В следующем примере отображается окно оповещения после завершения метода Load (). Если метод Load () успешно, он отображает «внешнее содержимое загружено успешно!», и если он завершается ошибкой, выводится сообщение об ошибке:

Пример

Справочник jQuery AJAX

Для полного обзора всех JQuery Ajax методы, пожалуйста, перейдите к нашей jQuery AJAX справка.

Пример использования

Метод load позволяет загрузить данные с удаленного сервера и вставить их в содержимое выбранного элемента.

Вы можете отфильтровать полученные в результате запроса данные указав необходимый селектор в запрашиваемом URL (отделив его пробелом). К примеру если Вы хотите получить только абзацы со страницы example.html необходимо вызвать метод load со следующим url: example.html p.

Обратите внимание: если Вы передаете данные серверу как строку (например «x=4&y=5») будет использован GET запрос, если Вы передаете данные как объект (например ) будет использован запрос POST.

Синтаксис

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

Топ-пост этого месяца:  Каталог WordPress.org — Плагин

url (обязательный параметр) Указывает URL, на который будет отправлен запрос.

данные (необязательный параметр) Указывает данные, которые будут отправлены на сервер вместе с запросом.

function (необязательный параметр) Функция, код которой будет выполнен если запрос будет успешно совершен.

ответ (необязательный параметр функции) Содержит ответ сервера.

статус (необязательный параметр функции) Содержит статус выполнения запроса.

xhr (необязательный параметр функции) Содержит объект XMLHttpRequest.

Ajax-запрос к серверу через jQuery

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

Запрос html-данных с помощью функции Load

Это самый простой ajax-запрос через jQuery с получением html-данных и их вставкой в dom-элемент с (содержимое элемента заменяется):

Более продвинутый вариант использования load:

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

Ajax-запросы функциями GET и POST

Эти функции осуществляют отправку ajax запроса http-методами get и post. Приведу пару примеров их использования.

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

Тип получаемых от сервера данных можно указать, добавив dataType (см.ниже) — по-умолчанию определяется автоматически.

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

На самом деле, функции get и post являются сокращенными вариантами функции ajax, которую рассмотрю ниже.

Получение json-данных с помощью getJSON

getJSON — укороченный вариант ajax-запроса методом GET и получением данных в виде json. Способ удобен, например, для получения какого-то массива с данными и последующей работы с ним.

На стороне сервера программа формирует массив и преобразовывает его в json-строку, например, так:

Точно так же можно передать с сервера и объекты stdClass, преобразовав их в json-строку.

Простой ajax-запрос через jQuery с помощью функции AJAX

Теперь приведу пример простого get запроса функцией ajax и получением html-данных.

Запрос к серверу происходит get-методом, т.к. параметр, отвечающий за тип запроса, type по-умолчанию равен GET.

Более сложный пример ajax-запроса через jQuery

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

Кнопка отправки данных:

В приведенном примере при нажатии на кнопку button, сначала меняется состояние кнопки (текст на ней меняется на «Отправка. » и она становится не активной), что делается при помощи параметра beforeSend. Затем происходит отправка запроса с передачей нужных данных. После того, как получен ответ от сервера состояние кнопки возвращается в прежнее (текст меняется на «Отправить», становится активной). Ответ получается в виде json-данных.

Коротко опишу параметры отправки ajax-запроса, которые чаще всего могут пригодиться:

url Адрес отправки ajax-запроса
type Способ отправки запроса GET или POST
data Отправляемые серверу данные. Может быть строка с параметрами и их значениями в формате par1=val1&par2=val2&. объект jQuery, например, $(‘input[type=»text»]’) или другие данные.
dataType Тип получаемых от сервера данных. Может быть html, json, text, script и xml.
cache Кэширование браузером запроса (false — не кэшировать).
async Асинхронное выполнение запроса, т.е. программа продолжает выполняться не дожидаясь ответа сервера. Если указать false, то запрос будет выполнен синхронно, при этом страница не будет ни на что реагировать, пока не будет получен ответ от сервера.
processData Преобразование отправляемых данных в url-формат. Если нужно чтобы данные не преобразовывались, установить в false. Например, при отправке изображения на сервер или xml-данных.
contentType Тип передаваемых данных, по умолчанию «application/x-www-form-urlencoded; charset=UTF-8». Если указать false, то в заголовке не будет передаваться тип, что может быть необходимо, например, при отправке изображения на сервер.
beforeSend Функция, выполняемая перед отправкой ajax-запроса.
complete Функция, выполняемая после получения ответа от сервера (любого, успешного или нет).
success Функция, выполняемая при удачном выполнении запроса.
error Функция, выполняемая в случае ошибки.

Ниже приведу еще несколько примеров использования ajax-запросов.

Отправка формы со всеми данными ajax-запросом через jQuery

Примерный код html-формы:

Для того чтобы страница не перезагружалась при нажатии на кнопку «submit», сначала отменяем стандартые действия браузера использовав e.preventDefaults() .

В параметре data мы передаем все поля формы использовав $(this).serialize() — эта функция преобразует все input-ы и select-ы в строку, пригодную для отправки на сервер.

Так же, здесь использован параметр async: false , чтобы пока форма не отправится на сервер больше ничего нельзя было нажать или сделать.

Отправка изображения или файла ajax-запросом через jQuery

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

html-код будет такой:

Суть идеи в том, что поверх кнопки выводится стандартный input для выбора файла, но он полностью прозрачен и имеет такие же размеры как кнопка. Таким образом, пользователь видит кнопку button, но когда наводит на нее курсор, фактически наводит на input. Соответственно, когда он нажимает на кнопку, на самом деле нажимается input выбора файла. Для того, чтобы не мигал курсор после выбора файла, размер шрифта задан 0px.

Теперь javascript код отправки файла на сервер с отображением прогресса:

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

Пример серверной части на php (по просьбе Евгения):

Информация о загруженном изображении будет содержаться в $_FILES[‘upload’] , т.к. скриптом файл добавлялся так: form.append(‘upload’, files[0]); Соответственно, всё что требуется от php-программы — это проверить что файл соответствует ожидаемым параметрам, перенести файл в нужную папку (в примере в папку files) под нужным именем (в примере newname_image) и вернуть в браузер ответ, который в моем примере просто выводится пользователю командой alert(message);

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

Ajax запрос в jQuery. Часть 3. Метод load

Description: Load data from the server and place the returned HTML into the matched elements.

version added: 1.0 .load( url [, data ] [, complete ] )

Note: Prior to jQuery 3.0, the event handling suite also had a method named .load() . Older versions of jQuery determined which method to fire based on the set of arguments passed to it.

This method is the simplest way to fetch data from the server. It is roughly equivalent to $.get(url, data, success) except that it is a method rather than global function and it has an implicit callback function. When a successful response is detected (i.e. when textStatus is «success» or «notmodified»), .load() sets the HTML contents of the matched elements to the returned data. This means that most uses of the method can be quite simple:

If no element is matched by the selector — in this case, if the document does not contain an element with — the Ajax request will not be sent.

Callback Function

If a «complete» callback is provided, it is executed after post-processing and HTML insertion has been performed. The callback is fired once for each element in the jQuery collection, and this is set to each DOM element in turn.

In the two examples above, if the current document does not contain an element with an ID of «result,» the .load() method is not executed.

Request Method

The POST method is used if data is provided as an object; otherwise, GET is assumed.

Loading Page Fragments

The .load() method, unlike $.get() , allows us to specify a portion of the remote document to be inserted. This is achieved with a special syntax for the url parameter. If one or more space characters are included in the string, the portion of the string following the first space is assumed to be a jQuery selector that determines the content to be loaded.

We could modify the example above to use only part of the document that is fetched:

When this method executes, it retrieves the content of ajax/test.html , but then jQuery parses the returned document to find the element with an ID of container . This element, along with its contents, is inserted into the element with an ID of result , and the rest of the retrieved document is discarded.

jQuery uses the browser’s .innerHTML property to parse the retrieved document and insert it into the current document. During this process, browsers often filter elements from the document such as , , or elements. As a result, the elements retrieved by .load() may not be exactly the same as if the document were retrieved directly by the browser.

Script Execution

When calling .load() using a URL without a suffixed selector expression, the content is passed to .html() prior to scripts being removed. This executes the script blocks before they are discarded. If .load() is called with a selector expression appended to the URL, however, the scripts are stripped out prior to the DOM being updated, and thus are not executed. An example of both cases can be seen below:

Here, any JavaScript loaded into #a as a part of the document will successfully execute.

However, in the following case, script blocks in the document being loaded into #b are stripped out and not executed:

Additional Notes:

  • Due to browser security restrictions, most «Ajax» requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain, subdomain, port, or protocol.

Examples:

Load another page’s list items into an ordered list.

Примеры отправки 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.

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

Знакомство с укороченными Ajax методами jQuery

Ajax – одна из самых популярных клиентских методологий, помогающих в создании асинхронных веб-сайтов и веб-приложений.

Конечно, можно исполнять Ajax вызовы посредством сырого JavaScript, при этом, однако, одновременная работа с разными частями кода может показаться витиеватой и сложной (особенно когда приходиться поддерживать какой-нибудь доисторический браузер типа IE6).

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

За исключением $.ajax() , все методы имеют одну общую черту: они оперируют не с набором элементов, а вызываются непосредственно из jQuery объекта. Поэтому, вместо утверждения вида:

jQuery

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

jQuery

В данной статье мы рассмотрим три наиболее популярных укороченных ajax метода: load() , $.post() , и $.get() .

Первым рассмотрим метод load() . Он позволяет загружать данные с сервера и помещать возвращаемые данные (зачастую это код HTML) в соответствующие элементы набора. Синтаксис метода load :

Значение каждого параметра описано ниже:

  • url : строка, задающая URL ресурса, к которому посылается запрос;
  • data : необязательный параметр, данные, которые будут отправлены на сервер. Они должны быть представлены в форме объекта или в виде отформатированной строки-запроса. Если передается строка – методом запроса будет GET, если объект – POST. При пропуске этого параметра используется метод GET.
  • callback : дополнительная callback-функция, вызываемая по завершении Ajax запроса. Эта функция принимает три параметра: текст ответа, статус запроса и объект jqXHR . Внутри callback-функции контекст ( this ) устанавливается каждому элементу коллекции, по одному за раз.
Топ-пост этого месяца:  3 способа, как сделать верстку сайта для любых целей

Трудно ли применять на практике? Рассмотрим на конкретном примере:

Допустим, ваш веб-сайт содержит элемент с ID main , в котором располагается основное содержимое. Наша задача заключается в реализации асинхронной загрузке главного контента страницы; на контент ведут ссылки, которые расположены в главном меню (ID которого main-menu ). Мы хотим получать содержимое внутри конкретного элемента, так как другие части макета не должны меняться.

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

Используя jQuery и load() метод, мы можем решить поставленную задачу следующим образом:

jQuery

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

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

jQuery

Теперь при извлечение страницы HTML код проходит фильтрацию, при которой выбираются потомки элемента, ID которого — main . Используется универсальный селектор ( * ) для того, чтобы исключить возможность нахождения #main внутри #main .

Callback-функция в load()

Параметр callback может быть использован, для оповещения пользователя о завершении действия. Чтобы проиллюстрировать это, поправим наш код.

Подразумевается, что имеется элемент, ID которого — notification-bar ; он будет использоваться в качестве полосы уведомлений.

jQuery

Демо, с небольшими модификациями, для этого кода приведено ниже:

Иногда действия не ограничиваются вставлением возвращаемого сервером контента в один или несколько элементов. Так, может возникнуть желание сначала извлечь данные, а после извлечения решить, что с ними делать. Сделать это помогут методы $.post() и $.get() .

Принцип работы этих методов одинаков (исполнение запроса к серверу); сигнатуры и принимаемые ими параметры идентичны. Разница заключается лишь в том, что один посылает запрос POST, а другой – GET.

Напомню — POST используется, если запрос потенциально может изменить состояние на серверной стороне, тем самым вызывая различные ответы (реакции). В противном случае используется GET.

Сигнатура метода $.post() следующая:

  • url : строка, задающая URL ресурса, к которому посылается запрос;
  • data : дополнительный параметр, строка или объект, посылаемые как часть запроса POST;
  • callback : callback-функция исполняется, если запрос успешен. Внутри callback-функции контекст ( this ) присваивается объекту, олицетворяющему Ajax параметры, используемые во время вызова.
  • Type : дополнительная строка, определяющая, как интерпретировать тело ответа. Принимаемые значение следующие: html, text, xml, json, script и jsonp . Может быть представлена строкой из нескольких, отделенных друг от друга, значений. В этом случае jQuery конвертирует один тип в другой. Например, если ответ представлен в виде текста, а нужно, чтобы он обрабатывался как XML, то можно написать ‛text xml“. Если этого не сделать, текст ответа передается callback-фннкции без всякой предварительной обработки и оценки, и jQuery пытается угадать нужный формат.

Теперь, зная, что такое $.post() и каковы его параметры, перейдем к написанию кода.

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

Реализуем это на практике методом $.post() :

jQuery

В данном коде запрос POST посылается странице с относительным URL ‛ /user “. Для отсылки серверу имени и значения поля (которое теряет фокус) использован второй параметр — data . Наконец мы используем функцию обратного вызова, чтобы проверить имеет ли свойство status объекта JSON значение error. В этом случае пользователю показывается сообщение об ошибке (оно хранится в свойстве message ).

Более полное представление о том, как может выглядеть объект JSON, даст следующий пример:

Демо этого кода приведено ниже:

Примечание: для кода на CodePen нужны запросы GET; только в этом случае Ajax будет работать. Принцип тот же.

$.get() – один из предоставляемых jQuery способов для совершения запроса GET. Этот метод инициирует GET запрос к серверу с помощью заданного URL и дополнительных данных. Также после завершения запроса возможно выполнение callback-функции. Его сигнатура:

Параметры те же, что и для $.post() метода; повторно их описывать не будем.

Функция $.get() востребована для тех ситуации, когда сервер возвращает один и тот же результат для заданного набора параметров; а также для ресурсов, результатами от пользования которых пользователи могли бы делиться. Например, GET идеален при пользовании транспортными услугами (при получении расписания поездов), когда разные люди, чьи запросы дат и времени в поиске совпадают, получают один и тот же результат. Кроме того, если страница отвечает на запрос GET, полученным результатом можно поделиться с другом — поможет магия URL.

Заключение

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

Дополнительную информация по этим и другим методам можно найти здесь.

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 происходит в случае любого завершения запроса.

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

Начиная с 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 будет доступен в текстовом виде. Если он содержит скрипты в тегах

Урок - .load()

↑ Ajax
Урок - .load()
← Предыдущий урок

Метод jQuery.load() позволяет получить с сервера HTML-код и вставить в указанное место на странице.

Синтаксиси метода jQuery.load().

.load( url [, data ] [, complete(responseText, textStatus, XMLHttpRequest) ] )

  • url - строка, содержит URL запроса, для отправки данных.
  • data - строка или Plain-объект (ассоциативный массив), данных для отправки на сервер.
  • complete(data, textStatus, jqXHR) - функция обратного вызова, вызывается когда запрос выполнен.

Примечание: При обработке собыйти также есть метод .load(). jQuery определяет разницу в зависимости от набора аргументов.

Метод jQuery.load() является самым простым способом получения данных с сервера. Метод jQuery.load() эквивалентен методу jQuery.get(url, data, success) кроме того, что это метод, а не глобальная функция и имеет не явную функцию обратного вызова. после успешного ответа (т.е. когда textStatus равен "success" или "notmodified") метод jQuery.load() вставляет полученный HTML-код в указанные элементы. Это означает, что в большинстве случаев применение метода может быть довольно простым:

Если элементы указанные в селекторе не найдены на странице (в примере выше это элемент с ), то запрос не будет отправлен.

Функция обратного вызова

Если обратный вызов "complete" определен, то он выполняется после пост-обработки и после вставки HTML-кода. Complete вызывается один раз для каждого элемента в коллекции jQuery и this устанавливается в соответсвии с очередным DOM-элементом.

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

Метод jQuery.load() в отличие от jQuery.get(), позволяет указать какую часть получаемого HTML-документа следует вставить в текущую страницу. Это достигается с помощью специального синтаксиса для параметра URL. Если в строку вклюячены один или несклько пробелов, то значение после первого пробела рассматривается jQuery как селектор который указывает на содержание из получаемого HTML-документа.

Мы можем изменить приведенный выше пример, чтобы использовать только часть HTML-документа:

При получении содержимого HTML-страницы ajax/test.html jQuery анализирует код, чтобы найти элемент с текщей страницы, а остальные данные игнорируются.

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

Выполенение скриптов.

При вызове метода jQuery.load() используя URL без суфикса выражение селктора, содержимое передается в метод jQuery.html() до удаления скриптов. Он выполняет блоки скриптов, до их отключения. Если метод jQuery.load() вызывается с селектором добавленным в URL, то скрипты вырезаются до обновления DOM и следовательно не выполняются. Примеры обоих случаев смотрите ниже:

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

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

Дополнительное примечание.

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

Примеры

Пример: Загрузка подножия главной страницы в список.

Пример: Отобразить сообщение об ошибке, если при Ajax-запросе возникла ошибка.

Пример: Загружаем файл feeds.html в div с .

Пример: Передача данных в видже массива на сервер.

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

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