Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
КЛ_СЯП_защ.doc
Скачиваний:
7
Добавлен:
01.03.2025
Размер:
2.68 Mб
Скачать

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

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

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

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

Ajax можно использовать прямо сейчас

Нет ничего нового, что требует изучения.

Технология AJAX основывается на открытых стандартах. Эти стандарты использовались множеством разработчиков многие годы.

Большинство существующих Web-приложений можно легко переписать с помощью технологии AJAX вместо традиционных форм HTML.

Ajax использует xml и запросы http

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

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

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

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

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

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

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

Пример AJAX

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

Описание примера

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

Форма HTML

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

<form>

Имя:

<input type="text" id="txt1"

onkeyup="showHint(this.value)">

</form>

<p>Советуем: <span id="txtHint"></span></p>

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

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

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

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

Функция showHint()

Функция showHint() является очень простой функцией JavaScript, помещенной в раздел заголовка <head> страницы 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.

Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]