Адресная книга на ajax (xml версия)


Содержание

Форум

Справочник

Поиск по форуму
Расширенный поиск
К странице.

Форматы данных для AJAX

Существует несколько распространенных форматов общения с сервером.

В самом простом случае — ответом на AJAX-запрос является кусок HTML:

Этот кусок можно показать пользователю, записав внутрь тага:

  • Не требует дополнительной обработки
  • Разметка может давать большой объем
  • Ограниченное применение. Это часть документа, а не данные
  • Иногда возникают проблемы с формами, создаваемыми через innerHTML (не отсылаются, некорректно показываются и т.п.)

Сервер возвращает XML document типа:

На клиенте XML может либо анализироваться через javascript, либо преобразовываться XSL-шаблоном типа:

На практике, поддержка XSLT в браузерах очень ограничена и различается в деталях. Завязавшись на обработку XML при помощи client-side XSLT, рано или поздно придется все же использовать javascript из-за ограничений XSLT.
Также браузером не поддерживается EXSLT.

Плюсом XSLT является быстрота метода, по сравнению с javascript, но это актуально лишь на больших документах.

  • Работа с DOM/XSLT/XPath
  • Давно известный и широко используемый формат:огромное количество стандартных сервисов и известных классов отдают информацию в XML-формате
  • Большие ограничения XSLT
  • Обязателен дополнительный фреймворк для кросс-браузерного XSLT
  • XPath — не во всех браузерах

JSON (JavaScript Object Notation)

Этот формат, как правило, самый оптимальный. Сервер возвращает JavaScript-объект:

Чтобы десериализовать объект, клиент просто пропускает текст через встроенный парсер, добавив скобки

Затем HTML может быть сформирован средствами JavaScript, собственной шаблонной системой и т.п.

Конечно же, eval позволяет не только десериализовать JSON-объекты, но и выполнять произвольный JS-код.

Если есть подозрения, что данные с сервера(например, вызов внешнего вебсервиса) могут быть небезопасны, то их можно проверить на соответствие JSON регулярным выражением:

  • Формат самый неудобочитаемый, сложно заметить ошибку на глаз
  • Существуют парсеры/сериализаторы, для php есть pear-класс и pecl-extension.
  • Менее избыточен, по сравнению с XML и HTML
  • eval(), как правило, работает достаточно быстро

Какой формат выбирать?

Надеюсь, будут полезны наблюдения:

  • Для небольшого внедрения AJAX в существующее приложение удобен HTML-формат. Известные библиотеки (jpspan, sajax, xajax. ) делают работу с ним очень простой. Кроме того, HTML не требует клиентского кода.
  • XML является стандартом де-факто для множества приложений.
    Так что работать с ним, вполне возможно, придется вне зависимости от пристрастий разработчиков.
  • XML может быть намного проще, чем JavaScript-объекты, так как доступны сложные XPath-выборки. Для JavaScript менее мощные способы выборки есть во фреймворках: dojo,jQuery и т.п.
  • JSON удобен, когда нужно переслать данные, и непосредственная переработка данных в HTML не нужна.
  • При выборке-отображении большого количества данных (начиная с десятков записей) XML+XSLT может работать быстрее. Например, это может быть существенно для больших таблиц.

Вообще,в разных частях веб-приложения вполне можно использовать несколько форматов. Например:

  1. XML для AJAX-подгрузки ленты новостей
  2. JSON для работы с узлами JavaScript-дерева
  3. HTML для модулей, которые слабо адаптированы под работу в режиме сервиса

В общем, спасибо за статью — довольно познавательно.
Я давно уже пишу для веб, но только не давно решил разобраться в новых технологиях, и ajax — первая из них (тем более что и так давненько читал про нее)

Да, сайт полезный! Особенно порадовали тесты.

Присоединяюсь к благодарностям!
Нельзя ли осветить еще вариант SOAP?

SOAP — надстройка над XML. Никаких встроенных языковых средств для его обработки нет.. Да и вообще, не популярен он на клиент-сайде.

Vladi, дата: 5 августа, 2009 — 15:18

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

Значит я сделал правельный выбор:)

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

Добавьте, пожалуйста экранирование в регулярку-проверку json, кажется, его порезало.

Помогите, пожалуйста, есть скрипт, который принимает JSON с сервера, сам JSON приходит в таком виде:
[<"id":"1","body":"sometext">,<"id":"2","body":"sometext2">]
Делаю
JSON.parse(здесь_пришедший_JSON) или eval(‘(‘+здесь_пришедший_JSON+’)’)
И браузер начинает выводить
[object Object],[object Object]
Объясните, пожалуйста, как вставить значения body разных записей в html код? Заранее спасибо!

Попробуй на сервере сформировать массив вида [<"id":"body","id1":"body1" и т.д.>]
и парсь

eval( ‘(‘ +request.responseText+ ‘)’ )
Для чего нужны эти скобки?
Без них не работает, но почему?

Выполнение такого кода, конечно, приведёт к ошибке.

А если eval получает выражение в скобках ( . ), то интерпретатор точно знает, что блока кода внутри быть не может, значит это объект.


Пожалуйста, если не затруднит.
Приведите пример перевода минут в часы, в формате HH:MM на JS.
Для Adobe Acrobat.
Я чайник и впервые столкнулся с подобной задачей.
Огромное спасибо!

Чтение XML

Задача

Прочитать xml-файл находящийся на сервере.

Теория

Javascript — язык для создания динамических сценариев на клиентской стороне. Т.е. напрямую работать с файлами, находящимися на сервере (да и на компьютере пользователя) он не может. Обычно для таких целей используются серверные языки (php, asp т.п.). Но бывают ситуации, когда нужно (удобней, проще) прочитать файл с помощью javascript, не прибегая к помощи серверных скриптов.

Допустим на сервере имеется файл data.xml, содержимое которого нужно прочитать и вставить в HTML страницу. data.xml:

Решение

Для решения этой задачи воспользуемся функцией jQuery.ajax() для асинхронного обращения к данным на сервере:

Заметка

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

JSON: основы использования

Наверняка вы когда-нибудь слышали о JSON. Что же это такое? Что он может и как его использовать?

В данном уроке мы расскажем об основах JSON и раскроем следующие пункты:

  • Что такое JSON?
  • Для чего используется JSON?
  • Как создать строку JSON?
  • Простой пример строки JSON.
  • Сравним JSON и XML.
  • Как работать с JSON в JavaScript и PHP?

Что такое JSON?

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

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

JSON имеет следующие преимущества:

  • Он компактен.
  • Его предложения легко читаются и составляются как человеком, так и компьютером.
  • Его легко преобразовать в структуру данных для большинства языков программирования (числа, строки, логические переменные, массивы и так далее)
  • Многие языки программирования имеют функции и библиотеки для чтения и создания структур JSON.

Название JSON означает JavaScript Object Notation (представление объектов JavaScript). Как и представляет имя, он основан на способе определения объектов (очень похоже на создание ассоциативных массивов в других языках) и массивов.

Для чего используется JSON?

Наиболее частое распространенное использование JSON — пересылка данных от сервера к браузеру. Обычно данные JSON доставляются с помощью AJAX, который позволяет обмениваться данными браузеру и серверу без необходимости перезагружать страницу.

  1. Пользователь нажимает миниатюру продукта в онлайн магазине.
  2. JavaScript, выполняющийся на браузере, генерирует запрос AJAX к скрипту PHP, запущенному на сервере, передавая ID выбранного продукта.
  3. Скрипт PHP получает название продукта, описание, цену и другую информацию из базы данных. Затем составляет из данных строку JSON и отсылает ее браузеру.
  4. JavaScript, выполняющийся на браузере, получает строку JSON, декодирует ее и выводит информацию о продукте на странице для пользователя.
Илон Маск рекомендует:  Что такое код gmp_random

Также можно использовать JSON для отправки данных от браузера на сервер, передавая строку JSON в качестве параметра запросов GET или POST. Но данный метод имеет меньшее распространение, так как передача данных через запросы AJAX может быть упрощена. Например, ID продукта может быть включен в адрес URL как часть запроса GET.

Библиотека jQuery имеет несколько методов, например, getJSON() и parseJSON() , которые упрощают получение данных с помощью JSON через запросы AJAX.

Как создать строку JSON?

Есть несколько основных правил для создания строки JSON:

  • Строка JSON содержит либо массив значений, либо объект (ассоциативный массив пар имя/значение).
  • Массив заключается в квадратные скобки ( [ и ] ) и содержит разделенный запятой список значений.
  • Объект заключается в фигурные скобки ( < и >) и содержит разделенный запятой список пар имя/значение.
  • Пара имя/значение состоит из имени поля, заключенного в двойные кавычки, за которым следует двоеточие ( : ) и значение поля.
  • Значение в массиве или объекте может быть:
    • Числом (целым или с плавающей точкой)
    • Строкой (в двойных кавычках)
    • Логическим значением ( true или false )
    • Другим массивом (заключенным в квадратные скобки)
    • Другой объект (заключенный в фигурные скобки)
    • Значение null

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

Простой пример строки JSON

Ниже приводится пример оформления заказа в формате JSON:

Рассмотрим строку подробно:

  • Мы создаем объект с помощью фигурных скобок ( < и >).
  • В объекте есть несколько пар имя/значение: «orderID»: 12345 Свойство с именем «orderId» и целочисленным значением 12345 «shopperName»: «Ваня Иванов» свойство с именем «shopperName» и строковым значением «Ваня Иванов» «shopperEmail»: «johnsmith@example.com» Свойство с именем «shopperEmail» и строковым значением «ivanov@example.com» «contents»: [ . ] Свойство с именем «contents» , значение которого является массивом «orderCompleted»: true Свойство с именем «orderCompleted» и логическим значением true
  • В массиве «contents» есть 2 объекта, представляющие отдельные позиции в заказе. Каждый объект содержит 3 свойства: productID , productName , и quantity .

Кстати, так как JSON основан на объявлении объектов JavaScript, то вы можете быстро и просто сделать выше приведенную строку JSON объектом JavaScript:

Сравнение JSON и XML

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


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

Вот как будет выглядеть выше приведенный пример объекта на XML:

Версия XML имеет существенно больший размер. В действительности она имеет длину 1128 символов, а вариант JSON — только 323 символа. Версию XML также достаточно трудно воспринимать.

Конечно, это радикальный пример. И возможно создать более компактную запись XML. Но даже она будет существенно длиннее эквивалента на JSON.

Работаем со строкой JSON в JavaScript

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

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

Создаем строку JSON из переменной

JavaScript имеет встроенный метод JSON.stringify() , который берет переменную и возвращает строку JSON, представляющую ее содержание. Например, создадим объект JavaScript, который содержит сведения о заказе из нашего примера, а затем создадим из него строку JSON:

Данный код выдаст:

Обратите внимание, что метод JSON.stringify() возвращает строку JSON без пробелов. Ее сложнее читать, но зато она более компактна для передачи через сеть.

Создаем переменную из строки JSON

Существует несколько способов разобрать строку JSON в JavaScript, но самый безопасный и надежный — использовать встроенный метод JSON.parse() . Он получает строку JSON и возвращает объект или массив JavaScript, который содержит данные. Например:

Мы создали переменную jsonString , которая содержит строку JSON нашего примера с заказом. Затем мы передаем данную строку методу JSON.parse() , который создает объект, содержащий данные JSON и сохраняет его в переменной cart . Остается только осуществить проверку, выведя свойства объекта shopperEmail и productName массива contents .

В результате мы получим следующий вывод:

В реальном приложении ваш JavaScript код будет получать заказ в виде строки JSON в AJAX ответе от скрипта сервера, передавать строку методу JSON.parse() , а затем использовать данные для отображения на странице пользователя.

JSON.stringify() и JSON.parse() имеют другие возможности, такие как использование возвратных функций для пользовательской конвертации определённых данных. Такие опции очень удобны для конвертации различных данных в правильные объекты JavaScript.

Работаем со строкой JSON в PHP

PHP, как и JavaScript, имеет встроенные функции для работы с JSON строками.

Создаем строку JSON из переменной PHP

Функция json_encode() принимает переменную PHP и возвращает строку JSON, представляющую содержание переменной. Вот наш пример с заказом, написанный на PHP:

Данный код возвращает абсолютно такую же строку JSON, как и в примере с JavaScript:

В реальном приложении ваш скрипт PHP пришлет данную строку JSON как часть AJAX ответа браузеру, где JavaScript код с помощью метода JSON.parse() преобразует ее обратно в переменную для вывода на странице пользователя.

Вы может передавать различные флаги в качестве второго аргумента функции json_encode() . С их помощью можно изменять принципы кодирования содержания переменных в строку JSON.

Создаем переменную из строки JSON

Для преобразования строки JSON в переменную PHP используется метод json_decode() . Заменим наш пример для JavaScript с методом JSON.parse() на код PHP:

Как и для JavaScript данный код выдаст:

По умолчанию функция json_decode() возвращает объекты JSON как объекты PHP. Существуют обобщенные объекты PHP класса stdClass . Поэтому мы используем -> для доступа к свойствам объекта в примере выше.

Если вам нужен объект JSON в виде ассоциированного массива PHP, нужно передать true в качестве второго аргумента функции json_decode() . Например:

Данный код выдаст такой же вывод:

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

Заключение

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

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.elated.com/articles/json-basics/
Перевел: Сергей Фастунов
Урок создан: 12 Августа 2011
Просмотров: 443304
Правила перепечатки

5 последних уроков рубрики «Разное»

Как разместить свой сайт на хостинге? Правильно выбранный хороший хостинг — это будущее Ваших сайтов

Проект готов, Все проверено на локальном сервере OpenServer и можно переносить сайт на хостинг. Вот только какую компанию выбрать? Предлагаю рассмотреть хостинг fornex.com. Отличное место для твоего проекта с перспективами бурного роста.

Разработка веб-сайтов с помощью онлайн платформы Wrike

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

20 ресурсов для прототипирования

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

Топ 10 бесплатных хостингов

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

Быстрая заметка: массовый UPDATE в MySQL


Ни для кого не секрет как в MySQL реализовать массовый INSERT, а вот с UPDATE-ом могут возникнуть сложности. Чтобы не прибегать к манипуляциям события ON_DUPLICATE можно воспользоваться специальной конструкцией CASE … WHEN … THEN.

Адресная книга на ajax (xml версия)

Я поначалу совсем не хотел останавливаться на том, что такое XML, но все-таки несколько слов сказать придется, чтобы те, кто про него услышали первый раз, прочитав эти строки, были в курсе основных идей.
По сути XML представляет собой обычный текст, который разделяется на логические группы с помощью специальных меток, которые называют “тэг”.
Тэг представляет собой слово, которое заключено в угловые скобки — например вот так:

Для того, чтобы начать группу вы указывает просто слово в скобках — еще раз повторим
Для окончание группы вы указываете такой же тэг, но слово предваряется символом “/”. Вот так:

В итоге группа внутри тэга test выглядит вот так:
Группа символов для тестирования

Тэги могу вкладываться один в другой — например вот так:

Группа символов для тестирования 01
Группа символов для тестирования 02
Группа символов для тестирования 03

Кроме вложений текста в тэгах можно указывать атрибуты — вот так:

Группа символов для тестирования 01

Илон Маск рекомендует:  Что такое код asp cpulimitlogevent

Назначение тэгов очень простое — надо отметить/выделить/сгруппировать какую-то информацию для того, чтобы потом ее можно было использовать. Это может быть список имен, список книг, список фирм, список вакансий и т.д.
Например, я хочу написать список контактов, с указанием имени, фамилии и e-mail. Можно сделать это так (но можно и по-другому — здесь все зависит от вашей фантазии и требований задачи):

Василий
Курочкин
vas@pisem.net

Георгий
Папанов
geogr@gmail.com

Семен
Баринов
barinov@yandex.ru

Не ищите тайного смысла — я просто сделал строку, в которой выделил нужные мне части — контакт (тэг contact) и внутри определил имя, фамилию и e-mail (тэги firstName, lastName, email). Также с помощью атрибута type я определи тип контакта — друг, коллега, однокурсник. Теперь просматривая строку я могу выделить нужные мне части информации. Это удобно и ничего более. Причем здесь больше удобства даже не для визуального восприятия (это спорно), а для программной обработки — достаточно несложно написать программу, которая найдет конкретные кусочки.

Теперь новичкам надо посмотреть какой-нибудь XML, чтобы увидеть больше примеров и убедиться, что в главном я прав �� (хотя все в мире относительно).

Работа с XML

В первую очередь я хотел бы высказать свою позицию по поводу самого XML и уже на основе этого продолжать повествование.
Для меня XML — очень мощная технология, которая позволяет хранить, передавать и обрабатывать сложноструктурированные данные. Т.е. если я хочу иметь: список фирм с их телефонами и счетами, каталог книг с авторами и отзывами, описание структуры страниц сайта с комментариями, состояние всех автобусов в городе с их координатами, водителями, номерами и прочая — все это может быть удобно сохранено в виде XML и, что крайне важно и удобно, может быть передано в любую систему, которая написана на любой платформе — на .NET, PHP, Object C, Delphi, C++.
Проведите мысленный эксперимент — попробуйте написать строку, в которой передать информацию о своих контактах (где у одной персоны может быть несколько телефонов, e-mail, любимые книги, места работы, места учебы и … да хватит пока). Что важно — это должна быть обычная строка (несколько строк), которая позволяет разбирать эту информацию в ту структуру, которую я описал — класс Java. Там надо предусмотреть какие-то разделители, информацию об именах полей (группах полей). Попробуйте — и вы придете к чему-то подобному XML.

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

Итак, после всего вышесказанного мы видим, что нам приходит строковое представление чего-то важного в какой-то определенной структуре, которая требует наличия достаточно важных функций — нам же надо как-то работать с этой информацией. Не лежать же ей мертвым грузом. Функции достаточно очевидны:

  1. Разбор. Надо уметь разобрать строку на что-то более удобное для обработки — пытаться вставить внутрь строки или находить какое-то поле определенной записи из строки — это достаточно неудобно. Значит нам надо иметь некоторый набор классов для представления нашей строки в виде структуры объектов.
  2. Поиск. По структуре данных надо уметь что-то искать. Причем не подстроку, а какую-то группу полей, которые относятся к определенному объекту — например полная информация о книге — наименование, авторы, отзывы. Или список контактов с фамилией “Сидоров”.
  3. Проверка. Данные должны быть корректными, т.е. там должны быть только определенные поля, с определенным наполнением и они должны быть правильно скомпанованы в нашей строке.
  4. Преобразование. Хоть XML достаточно удобно описывает структурированные данные, это не значит, что его удобно просматривать обычному человеку или всегда удобно обрабатывать. Нередко для решения этого вопроса требуется преобразовать XML в какое-либо другое текстовое представление — например в тот же HTML (который является частным воплощением XML). Или даже в обычный текст.

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

Разбор — Parsing

В слэнге программистов часто используется слова “парсинг”, который и обозначает разбор строки (или еще чего-нибудь) в какую-то структуру. Здесь надо выделить два момента:

  1. Разбор строки определенным алгоритмом
  2. Сохранение результатов разбора в какую-то структуру вместо строки — ибо со строкой многие операции делать просто неудобно.

Что касается второго пункта, то на сегодня существует по сути одна унифицированная структура, которая называется Document Object Model (DOM).
DOM представляет собой набор интерфейсов (и их реализаций), которые являются специализированными объектами для хранения “узлов” (node) XML-документа. По сути каждый тэг — это “узел” (нода — я буду использовать этот термин, т.к. очень привык). Информация внутри тэга — тоже нода. По сути любой разобранный XML — это набор элементов типа Node и еще более специализированных, построенных в дерево.
Почему дерево ? Да потому что у каждой ноды может быть список дочерних нод и у каждой из них тоже может быть “детки”. Так и строится дерево. Если вам сложно это увидеть, то советую посмотреть какую-либо классическую книгу по алгоритмам и структурам данных — можно старого доброго Никлауса Вирта «Алгоритмы и структуры данных». Книгу можно найти в интернете, ну или купить.

Давайте рассмотрим загрузку файла и редактирование построенного дерева на примере. Наша программа считывает XML-файл со списком книг и печатает их свойства. Сам XML-файл выглядит вот так:

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

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

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

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

Что такое AJAX?

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

Илон Маск рекомендует:  Что такое код virtual

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

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

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

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

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

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

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

Адресная книга на ajax (xml версия)

Детальное описание примера AJAX запроса в формате XML

XML формат

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

Реализация AJAX запроса в XML формате

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

Укажите свое имя:
Укажите фамилию:
Ваш возраст:

Скрипты, используемые при AJAX XML запросе

Изменений по сравнению с примером предыдущей статьи немного. Добавился скрипт по преобразованию данных в XML формат, а в запросе произошли небольшие, но существенные изменения. Данные на сервер отправляются методом POST, о чем и указано в методе xmlHttp.open, кроме того, в методе xmlHttp.setRequestHeader мы сообщаем серверу, что отправляем данные в XML формате и указываем кодировкку символов. Поскольку данные отправляются не через адресную строку, а в теле запроса, у нас изменился вид метода xmlHttp.send(xmlstr), ему в параметрах надо передать XML строку для отправки на сервер.

Полный текст примера AJAX запроса c использованием формата XML можно скопировать в конце Web страницы открыв ее исходный код.

Опубликовано: 12.08.2011 в рубрике Об AJAX почти все

Чтение XML файла в Java средствами DOM XML

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

Если коротко, то библиотека DOM XML строит DOM модель XML документа (своего рода иерархическое дерево), по которой можно «гулять» и получать доступ к нужным фрагментам данных.

В XML все является узлом (нодой, node). Подробное описание механизма узлов можно найти, например, здесь .

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

Пример программы, в которой мы загружаем в память XML документ и получаем нужный нам узел по его «имени».

shamarinov.com

Корпоративная адресная книга [2007-2012]

Возможности

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

Установка

Информацию по установке и настройке адресной книги можно прочесть в прикрепленном файле cab_manual.pdf

Среда разработки: PHP+MySQL+JavaScript+Html

Фишки: использование технологиии AJAX, jQuery

Адресная книга на ajax (xml версия)

Пример AJAX приложения — Телефонная книга (сервер)

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

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

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

Суть технологии AJAX заключается в динамическом обращении к серверу и получение ответа от него с использованием объекта XMLHttpRequest. В качестве формата для передачи данных обычно применяют JSON или XML.

На самом деле объект XMLHttpRequest, чтоб вы знали, далеко не новая разработка. Впервые он появился в компоненте Outlook Web Access программного продукта Microsoft Exchange Server еще в далеком 2000 году.
Тогда он был назван IXMLHTTPRequest.


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

Суть его такова:

Имеется форма с текстовым полем в которое можно вводить данные. В нашем конкретном случае это цифры или буквы. То есть имена и номера телефонов.

Я не стал «заморачиваться» с базами данных, или текстовыми файлами, а просто сформировал эти номера с именами в скрипте PHP в виде ассоциативного массива.

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

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

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

Пример телефонной книги на AJAX

Давайте разберем как это работает.

А осуществил я это с помощью всего двух файлов. find.php — который отвечает за серверную часть и index.html — отвечающий за клиентскую часть, то есть за то, что происходит на стороне клиента (браузера).

Вот первый из них — скрипт find.php:

Сначала я посылаю заголовки header() которые определяют кодировку в которой будет отображаться информация в браузере. Затем в целях безопасности с помощью функции strip_tags() удаляю HTML и PHP тэги из строки полученной методом POST, и выделяю из нее первые 11 символов — функция substr().

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

И если не пустое — empty() полученное методом POST значение $num, то в цикле foreach, действие которого подробно описано в статье «Определяем имена и значения всех элементов формы с помощью массива $_Request» я перебираю элементы массива $phone содержащего нашу импровизированную телефонную книгу.

Если число вхождений подстроки $num в имя или номер больше 0 (т.е. было такое вхождение ) увеличиваю (конкатенирую) результирующую строку $string на соответстующее имя и значение, добавляя в конце символ «\n».

Позже вы узнаете для чего он нужен.

В противном случае пропускаю итерацию цикла continue.

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

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

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

Надеюсь на скорую встречу с вами. Будет интересно!

Что такое JSON?

JSON расшифровывается JavaScript Object Notation.

Формат JSON может использоваться с AJAX вместо XML. Поддержка формата JSON встроена в JavaScript.

Многие сервисы предоставляют свои услуги через JSON интерфейс, к примеру Flickr.com предоставляет API, с помощью которого Вы сможете отображать на Вашем сайте картинки имеющиеся у них.

JSON или XML?

Каждый формат имеет свои недостатки и преимущества:

  • Простота использования;
  • Упрощенный синтаксис обеспечивающий легкость прочтения кода.
  • XML поддерживается почти всеми языками программирования;
  • XML расширяем.

Синтаксис JSON

JSON включает в себя следующие структуры:

Массив

Массив — это список упорядоченных значений. Массив в JSON обозначается квадратными скобками [].

Массив в JSON может содержать неограниченное количество значений.

Объект

Объект может содержать неограниченное количество пар имя/значения. Каждое из значений само может являться объектом или массивом. Такие объекты или массивы называются вложенными.

Литералы

Объекты и массивы в JSON являются конструкциями, а литералы непосредственно данными, которые группируются этими конструкциями.

Литералы JSON:

  • Строка;
  • Число;
  • Логическое значение;
  • Значение null.

Сравнение файлов XML и JSON

Файл JSON должен иметь расширение .json.

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL