Ajax; — подгрузка блоков на jsjqueryajax

Содержание

Web Press

Статьи Вебмастеру

Web Press

Подгрузка контента jQuery.ajax()

Категория

Приложение

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

Параметры функции $.ajax()

Здесь options – это объект, содержащий передаваемые функции параметры, которые представлены ниже.

url – строка, URL-адрес запрашиваемого сценария.

type – метод запроса, POST или GET, по умолчанию используется GET;

cache – логическое значение указывает браузеру кэшировать (true) или не кэшировать (false) полученные данные.

data – объект, свойства которого служат параметрами запроса. При выполнении запроса GET параметры передаются в виде строки запроса, если запрос типа POST то параметры передаются в теле запроса.

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

  • xml – ответ анализируется и обрабатывается как XML, в функцию обратного вызова передается дерево DOM;
  • html – ответ передается функции обратного вызова без обработки, все сценарии находящиеся в блоках Подгрузить

Динамическая подгрузка скриптов при помощи jQuery

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

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

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

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

Как видно в вышеприведенном коде, у нас имеется событие click, привязанное к кнопке .showDisqus, и внутри него мы используем jQuery-метод .ajax() , который совершает GET-запрос скрипта встраивания Disqus в ваше приложение.

Ajax-метод обычно используется для того, чтобы делать обычные HTTP-запросы к скрипту на стороне сервера и для возврата контента скрипта. В данном случае мы совершаем GET-запрос и устанавливаем dataType на скрипт. Это сообщает jQuery о необходимости вернуть контент, будто мы включаем новый javascript-файл. Это отключит кэширование в браузере для скрипта, и добавит параметр timestamp в конце скрипта.

Если вы хотите включить кэширование скрипта, то вам нужно включить параметр cache: true.

Еще один вариант получения скрипта посредством GET ajax заключается в том, чтобы использовать метод getScript() – это просто оболочка для вышеприведенного ajax-метода.

Это позволит вам сократить объем кода, который вы используете.

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

Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ajax подгрузка контента на jQuery

Иногда стоит задача реализовать AJAX загрузку контента с сервера без перезагрузки страницы. Например, обновить комментарии или подгрузить полный текст статьи при клике на кнопку «Подробнее». Для этого в jQuery есть удобный метод jQuery load(). Он делает асинхронный запрос на сервер и вставляет полученные данные (HTML разметку) в указанный элемент.

Вторым аргументом можно передавать параметры запроса

Давайте посмотрим как он работает.

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

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

где data- — это id страницы новости. У каждой новости он будет свой.

А сам контент полной новости выводится в блок div, который расположен в конце страницы.

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

Шаг 1. Контроллер для AJAX запросов

Создадим файл, на который будем отправлять AJAX запрос и который будет возвращать контент указанной страницы. Назовем его ajax.php и положим в папку assets.

ajax.php (кликните, чтобы раскрыть)

Шаг 2. Скрипт обработки

Теперь нам нужно сделать так, чтобы по клику на ссылку «Подробнее» на наш коннектор пошёл AJAX запрос. Сделаем это с помощью jQuery. Создадим файл скрипта и подключим его на странице.

Вот и всё. Если запрос прошел успешно, то в блок с вставится содержание, которое возвращается из коннектора.

Пример для модального окна

Давайте на практике попробуем использовать данный прием для вывода контента в модальное окно. Опять же воспользуемся фреймворком Bootstrap. В нём уже есть модальные окна.

Добавим в футер разметку модального окна

Открывать модальное окно мы будем при условии, что контент новости не пустой, т.е. что-то вернётся. А проверять наличие контента мы будем с помощью третьего агрумента функции .load(url, data, complete) . Javascript код будет выглядеть так

Напоследок

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

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().

JQuery / Ajax загрузка изображений с анимированным индикатором выполнения

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

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

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

HTML-форма с загрузкой файла изображения

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

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

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

Для отправки данных формы с помощью AJAX используется библиотека jQuery Form. Функция ajaxForm() применяет для отправки в PHP файлов с изображениями.

Ход загрузки отображается с помощью индикатора в функции обратного вызова uploadProgress. Также для создания эффекта прогресса вызывается jQuery-метод animate().

PHP-код загрузчика файлов

Это обычный PHP-скрипт для загрузки файлов в целевую папку. Переменные файла хранятся в суперглобальном массиве $_FILES. Функция move_uploaded_file() используется для перемещения загруженного файла в целевую папку uploads .

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

Вот как будет выглядеть Ajax-загрузка изображения с индикатором выполнения на основе jQuery-анимации.

Данная публикация представляет собой перевод статьи « jQuery Ajax Image Upload with Animating Progress Bar » , подготовленной дружной командой проекта Интернет-технологии.ру

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

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

Данный скрипт я сделал на основе JS фреймворка jQuery (перейти на сайт) и плагина HashChange (перейти на страницу плагина).

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

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

Вторым шагом я сделал саму функцию «get_page_by_hash»:

В данной функции происходит замена html в тебе body на html, который пришел в ответе на запрос.
1. Метод передачи данных — POST нужен для определения того зашли просто на страницу или это запрос через ajax. Это позволит в шаблоне сделать условие, которое будет скрывать данные не требующие отображения при запросе скриптом:

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

Следующим шагом было выставление хеша страницы который мы отслеживаем с помощью функции выше:

Данная функция позволяет добавить hash в адресную строку браузера, работает во всех браузерах.

Так же все видили, что вконтакте в браузерах Mozilla и Chrome адрес меняется без перезагрузки страницы, чтобы этого добиться нужно сделать еще пару шагов:

1. Нужно определить браузер с помощью этой функции:

2. Теперь нам нужно расширить функцию обновления hash страницы:

С помощью данных скриптов у Вас будет сайт похож (по переходам по страницам) на сайт вконтакте.ру

jQuery — Использование сокращённых AJAX методов (с примерами)

В этой статье познакомимся с сокращёнными AJAX методами jQuery: load, get, getJSON, getScript и post. Эти методы позволяют очень просто осуществлять необходимые AJAX запросы и в отличие от функции ajax, для их написания требуется меньшее количество строчек кода.

jQuery — метод load

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

Метод load имеет следующий синтаксис:

В большинстве случаев для отправки запроса метод load использует GET. Но он также может использовать и метод POST. Это происходит только тогда, когда данные для отправки на сервер указываются не в формате строки, а посредством объекта.

Примеры использования метода load

1. Вставить содержимое файла asidenav.tpl в блок c после загрузки DOM страницы:

2. Загрузить часть файла demo.html в элемент при клике по кнопке, расположенной в нём:

Контент файла demo.html :

3. Загрузить в элемент, имеющий ответ content.php . Данный ответ будет зависеть от значения атрибута data-content , которое имеет кнопка, пославшая AJAX-запрос на сервер.

На сервере (файл content.php ):

4. Рассмотрим вышеприведённый пример, в котором передавать данные будем не в формате строки, а посредством объекта. Кроме этого выведем в консоль браузера дополнительные данные, такие как ответ сервера, статус ответа и объект XMLHTTPRequest.

На сервере (файл content.php ):

jQuery — функция get

Функция get предназначена для загрузки данных с сервера посредством HTTP GET запроса.

Синтаксис функции get :

По умолчанию функция get пытается автоматически определить формат полученных с сервера данных (xml, json, script, text или html). Осуществляет она это на основании MIME-типа ответа.

Например, для того чтобы функция get определила, что формат данных, который она получила с сервера, соответствует JSON, на стороне сервере в скрипте php должен быть установлен соответствующий заголовок:

В jQuery обработать отложенные события AJAX можно также с помощью Promise методов done (при успешном ответе), fail (при ошибке), always (при успешном ответе или при ошибке).

Примеры использования функции get

1. Подгрузим в HTML элемент после загрузки страницы содержимое файла content.tpl :

2. AJAX получение каждые 5 секунд нового изображения (URL) из определённой директории на сервере и отображения её на странице (вместо предыдущей картинки).

Содержимое фала random-image.php :

3. Пример, в котором реализуем AJAX подгрузку контента.

Данные для загрузки представим на сервере в виде массива $contents . Количество загружаемых данных и позицию смещения будем определять соответственно с помощью значений переменных count и offset . Обработку полученных с сервера данных будем осуществлять посредством Promise метода done .

Содержимое файла contents.php :

jQuery — функция getJSON

Функция getJSON предназначена для загрузки JSON-кодированных данных с сервера посредством HTTP GET запроса.

Функция getJSON — идентична get , у которой в качестве значения параметра dataType установлено значение «json».

Синтаксис функции getJSON :

Пример c использованием функции getJSON

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

Содержимое файла pages.json :

jQuery — функция getScript

Функция getScript предназначена для загрузки JavaScript файла с сервера посредством HTTP GET запроса и его последующего выполнения.

Синтаксис функции getScript :

Пример c использованием функции getScript

После загрузки страницы получим с помощью AJAX запроса скрипт и выполним его:

Содержимое скрипта script.js :

jQuery — функция post

Функция post предназначена для загрузки данных с сервера посредством HTTP POST запроса.

Синтаксис функции post :

Применение post ничем не отличается от использования jQuery-функции get . Единственное отличие между ними — это метод, с помощью которого они отправляют данные на сервер. Функция post отправляет данные в составе тела запроса (метод POST), а get — в составе URL (метод GET).

Примеры c использованием функции post

1. Пример, в котором пользователю предложим угадать наш цвет. Для этого ему на выбор предоставим несколько цветов с помощью радиокнопок и кнопку «Угадать». Отправку выбранного цвета на сервер будем осуществлять посредством функции jQuery post . На сервере осуществлять сравнивание «нашего цвета» и цвета, который выбрал пользователь, будем с помощью условия. В зависимости от того равны ли названия цветов, будем возвращать в качестве ответа значение success или error . На клиенте (в браузере) после получения ответа от сервера и в зависимости от его результата, будем выполнять те или иные действия. А именно, при получении ответа success , будем скрывать элементы управления, и выводить сообщение: «Да, вы угадали наш цвет!». В противном случае будем просто выводить текст: «Нет, наш цвет другой!».

Содержимое файла guess-color.php :

2. Пример, в котором реализуем систему приветствия пользователя. Пока пользователь не введёт своё имя, будем приветствовать его как гостя. Определять имеет ли текущий пользователь имя, а также его отправку на сервер будем через AJAX (jQuery функцию post ). На стороне сервера сохранять имя пользователя будем посредством ссесий.

Web Press

Статьи Вебмастеру

Web Press

Подгрузка контента jQuery.ajax()

Категория

Приложение

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

Параметры функции $.ajax()

Здесь options – это объект, содержащий передаваемые функции параметры, которые представлены ниже.

url – строка, URL-адрес запрашиваемого сценария.

type – метод запроса, POST или GET, по умолчанию используется GET;

cache – логическое значение указывает браузеру кэшировать (true) или не кэшировать (false) полученные данные.

data – объект, свойства которого служат параметрами запроса. При выполнении запроса GET параметры передаются в виде строки запроса, если запрос типа POST то параметры передаются в теле запроса.

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

  • xml – ответ анализируется и обрабатывается как XML, в функцию обратного вызова передается дерево DOM;
  • html – ответ передается функции обратного вызова без обработки, все сценарии находящиеся в блоках Подгрузить

JQuery / Ajax загрузка изображений с анимированным индикатором выполнения

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

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

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

HTML-форма с загрузкой файла изображения

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

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

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

Для отправки данных формы с помощью AJAX используется библиотека jQuery Form. Функция ajaxForm() применяет для отправки в PHP файлов с изображениями.

Ход загрузки отображается с помощью индикатора в функции обратного вызова uploadProgress. Также для создания эффекта прогресса вызывается jQuery-метод animate().

PHP-код загрузчика файлов

Это обычный PHP-скрипт для загрузки файлов в целевую папку. Переменные файла хранятся в суперглобальном массиве $_FILES. Функция move_uploaded_file() используется для перемещения загруженного файла в целевую папку uploads .

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

Вот как будет выглядеть Ajax-загрузка изображения с индикатором выполнения на основе jQuery-анимации.

Данная публикация представляет собой перевод статьи « jQuery Ajax Image Upload with Animating Progress Bar » , подготовленной дружной командой проекта Интернет-технологии.ру

Цукерберг рекомендует:  Обучение - помогите сделать выпадающие меню на джейквери
Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих