Технология ajax улучшает приложения Интернет




Скачать 45.47 Kb.
НазваниеТехнология ajax улучшает приложения Интернет
Дата публикации18.03.2013
Размер45.47 Kb.
ТипДокументы
odtdocs.ru > Информатика > Документы

= =

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

AJAX основывается на JavaScript и запросах HTTP.

AJAX = Асинхронный JavaScript и XML


AJAX является сокращением от "Asynchronous JavaScript And XML" (Асинхронный JavaScript и XML).

AJAX использует JavaScript для отправки и получения данных при взаимодействии Web-браузера и Web-сервера.

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

AJAX является технологией браузера


AJAX является технологией, которая выполняется в браузере клиента. Она использует асинхронную передачу данных (запросы HTTP) между браузером и Web-сервером, позволяя Web-страницам запрашивать с сервера небольшие объемы данных вместо целых страниц.

Эта технология позволяет уменьшить объем приложений Интернет, сделать их более быстрыми и более удобными для пользователей.

AJAX является технологией Web-браузера, которая не зависит от программного обеспечения Web-сервера.

AJAX основан на открытых стандартах


AJAX использует следующие открытые стандарты:

JavaScript

XML

HTML

CSS

Используемые в AJAX открытые стандарты строго определены и поддерживаются всеми основными браузерами. Приложения AJAX не зависят от используемых браузеров и платформ.

Технология AJAX улучшает приложения Интернет


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

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

С помощью AJAX приложения Интернет можно сделать богаче (меньше, быстрее, и легче в использовании).

AJAX использует XML и запросы HTTP


Традиционное Web-приложение посылает введенные данные на Web-сервер (используя форму HTML). После обработки данных Web-сервер возвращает пользователю совершенно новую Web-страницу.

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

С помощью AJAX Web-приложения могут посылать и получать данные без перезагрузки всей Web-страницы. Это делается с помощью запросов HTTP, посылаемых на сервер (в фоновом режиме), и модификации только отдельных частей Web-страницы с помощью JavaScript, когда сервер возвращает данные.

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

Как это делается, будет показано далее в этом кратком руководстве.

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


В следующем примере приложения AJAX показано, как Web-страница может оперативно общаться с Web-сервером, когда пользователь вводит данные в Web-форму.
Описание примера

На странице выводится поле ввода с предложением ввести имя. Когда пользователь начинает вводить в этом поле имя, ниже появляются возможные варианты имен.
Форма HTML

Пусть на Web-странице имеется форма HTML со следующим кодом:

Имя:

Советуем:


Как можно видеть, это простая форма HTML с полем ввода с именем "txt1".

Атрибут события этого поля ввода определяет функцию, которая будет запускаться при возникновении события onkeyup.

Параграф ниже формы содержит тег span с именем "txtHint". Тег span используется в качестве поля для подстановки данных, получаемых с Web-сервера.

Когда пользователь вводит данные, выполняется функция с именем "showHint()". Выполнение функции запускается событием "onkeyup". Другими словами, всякий раз, когда пользователь убирает свой палец с клавиатуры внутри поля ввода (отпускает нажатую клавишу), вызывается функция showHint.
Функция showHint()

Функция showHint() является очень простой функцией JavaScript, помещенной в раздел заголовка страницы HTML.

Функция имеет следующий код:

function showHint(str) { if (str.length==0) { document.getElementById("txtHint").innerHTML="" return } xmlHttp=GetXmlHttpObject() if (xmlHttp==null) { alert ("Браузер не поддерживает запросы HTTP") return } var url="gethint.asp" url=url+"?q="+str url=url+"&sid="+Math.random() xmlHttp.onreadystatechange=stateChanged xmlHttp.open("GET",url,true) xmlHttp.send(null) }

Функция выполняется всякий раз, когда в поле ввода вводится символ.

Если имеется какой-то ввод в текстовое поле (str.length > 0), то функция выполняет следующее:

  • Определяет url (имя файла) для отправки на сервер

  • Добавляет к url параметр (q) с содержимым поля ввода

  • Добавляет случайное число, чтобы сервер не использовал кэшированный файл

  • Создает объект XMLHTTP, и приказывает объекту выполнить функцию с именем stateChanged, когда произойдет изменение.

  • Открывает объект XMLHTTP с заданным url.

  • Посылает запрос HTTP на сервер

Если поле ввода будет пустым, то функция просто очищает содержимое поля для подстановки txtHint.
Функция stateChanged()

Функция stateChanged() содержит следующий код:

function stateChanged() { if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") { document.getElementById("txtHint").innerHTML=xmlHttp.responseText }

Функция stateChanged() выполняется всякий раз, когда изменяется состояние объекта XMLHTTP.

Когда состояние будет равно 4 (или "complete"), поле для подстановки txtHint получает содержимое текста пришедшего ответа.
^ Предыдущий пример вызывает функцию с именем GetXmlHttpObject.

Эта функция предназначена для решения проблемы создания различных объектов XMLHTTP для различных браузеров.

Функция имеет следующий код:

function GetXmlHttpObject(handler) { var objXMLHttp=null if (window.XMLHttpRequest) { objXMLHttp=new XMLHttpRequest() } else if (window.ActiveXObject) { objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP") } return objXMLHttp }

XML, JSON или текст


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

Предположим, что создается приложение для управления контактами. Cервер может возвращать информацию о людях. Одни и те же данные можно выразить в форме XML или JSON:

XML:





JSON:

{contacts:[ {"firstname":"Joe", "lastname":"Smith", "phone":"555-1212"}, {"firstname":"Sam", "lastname":"Stevens", "phone":"123-4567"} ]}

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

Нотация JSON выглядит очень похоже на простой JavaScript. JSON означает JavaScript Object Notation и поэтому действительно является обычным JavaScript.

Строки JSON можно преобразовать в JavaScript, используя просто встроенную в JavaScript команду eval(). Однако это можно делать, только если вы полностью доверяете источнику данных. Если это не так (если данные поступают из не вполне известного источника данных), то необходимо пропустить их в целях безопасности через JSON Parser (Анализатор JSON).

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

Что использовать: XML или JSON? Здесь нет больших различий. XML имеет более широко распространенный формат и переносим почти на любую систему. Если создаваемый проект будет работать с внешними источниками, то, вероятно, лучше использовать XML. Однако JSON немного легче для понимания и в общем он быстрее для разработки кода, чем XML. Если эта технология применяется для персонального проекта или в начале нового проекта, которому не нужно взаимодействовать с другими приложениям, то JSON определенно заслуживает рассмотрения.

Добавить документ в свой блог или на сайт

Похожие:

Анкета подключение к сети Интернет органов местного самоуправления поселений
Технология подключения к Интернет (adsl, выделенный канал, иной способ(указать-какой))

Тематическое планирование по предмету «Технология» 5 класс
Вводный инструктаж по технике безопасности, правила поведения в кабинете «Технология». Введение в предмет «Технология»

Конкурс I. «Как вы яхту назовёте, так она и поплывёт»
Педагогические технологии: технология коллективного и группового взаимодействия, проблемное обучение, сюжетно-ролевая игра, диалоговая...

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

1. Презентация дипломного проекта
...

Описание и предметная область
Программа предназначена для ведения учета личных доходов и расходов. Аналогов существует много, обычные "desktop'ные" приложения(Например,...

Реферат по дисциплине «Человеко-машинное взаимодействие» на тему...
Он может быть использован для создания приложения в Web-браузере: например для более простой навигации или для придания интерактивности...

Реферат по дисциплине «Человеко-машинное взаимодействие» на тему...
Он может быть использован для создания приложения в Web-браузере: например для более простой навигации или для придания интерактивности...

1 Основы технологии ajax цель работы
...

Чем отличаются Java-приложения и Java-апплеты?
Что такое первичный класс приложения? Какой обязательный метод он должен содержать?

Вы можете разместить ссылку на наш сайт:
Школьные материалы


При копировании материала укажите ссылку © 2013
контакты
odtdocs.ru
Главная страница