Ajax изнутри ajax – это акроним, раскрывающийся как Asynchronous JavaScript And xml



Скачать 345.55 Kb.
Дата26.07.2014
Размер345.55 Kb.
ТипДокументы
AJAX

  1. AJAX изнутри

  2. Фреймворк JQuery

  3. Формирование и разбор данных в формате XML

  4. Фреймворк JForm

  5. Селекторы

  6. Передача данных в формате JSON




  1. AJAX изнутри

AJAX – это акроним, раскрывающийся как Asynchronous JavaScript And XML и означающий асинхронный JavaScript и XML. AJAX – это технология, включающая сценарии JavaScript в документе HTML, которые по мере необходимости в фоновом режиме выполняют запросы к серверу (серверным сценарием на каком либо языке web-программирования), и получают необходимые данные, обновляя отдельные части документа и тем самым исключая необходимость его повторной загрузки или загрузки другого документа.

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

Составные части технологии AJAX уже реализованы во всех современных браузерах, таких как Mozilla FireFox, Internet Explorer или Opera. Таким образом клиенту не требуется установка дополнительных модулей для взаимодействия с сайтами, построенными с применением технологии AJAX. В состав AJAX входят следующие компоненты:


  • JavaScript – основной ингредиент AJAX, реализующий функциональность на стороне клиента. В функциях JavaScript для манипулирования отдельными частями документа задействуется объектная модель документа (DOM).

  • Объект XMLHttpRequest (встроенный в браузер) позволяет из JavaScriptорганизовать асинхронный доступ к серверу, благодаря чему пользователь имеет возможность продолжать работу с документом, в то время как она выполняет некоторые действия. Под доступом к серверу подразумеваются простые запросы HTTP на выполнение сценариев, размещенный на сервере.

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

Сценарий на стороне клиента, написанный на JavaScript, обеспечивает обращение к серверу посредством объекта XMLHttpRequest и передает данные в виде пары имя-значение с помощью методов GET или POST. Сценарий на стороне сервера отправляет свой ответ по протоколу HTTP, но ответ должен иметь такой формат, который может быть разобран кодом сценария JavaScript на стороне клиента. Традиционно используется формат XML, но можно использовать и другой формат, даже простой текст. Наиболее популярная альтернатива XML – JavaScript Object Notation (JSON), представление объектов в JavaScript.

Применяя AJAX необходимо помнить, что на стороне клиента JavaScript может быть отключен, что сделает приложения AJAX нефункциональными.

Вначале рассмотрим применение объекта XMLHttpRequest.

Для этого создадим простой пример. Он состоит из HTML-формы, содержащей текстовое поле, файла сценариев JavaScript и файла на PHP, который будет формировать ответ клиенту, зависящий от содержимого текстового поля. Для того, чтобы отобразить ответ, не требуется повторной загрузки HTML-страницы, даже несмотря на то, что за получением ответа необходимо обращаться к серверу. Без помощи AJAX достигнуть такого эффекта крайне сложно, и в этом его основное преимущество.

Приведем содержимое перечисленных файлов.



Index.html



AJAX+PHP - start script







What is your name?





По окончании загрузки страницы запускается функция 'process() , размещенная в файле Start.js. Ответ сервера отображается в теге

.



Start.js

var xmlHttp=createXmlHttpRequestObject();

function createXmlHttpRequestObject()

{

var xmlHttp;



if (window.ActiveXObject)

{

try { xmlHttp=new ActiveXObject("Microsoft XMLHTTP");



}

catch (e) {xmlHttp=false;}

if(!xmlHttp) xmlHttp= new ActiveXObject("Msxml2.XMLHTTP.5.0");

}

else



{

try {xmlHttp=new XMLHttpRequest();

}

catch (e) {xmlHttp=false; }



}
if(!xmlHttp) alert("Ошибка создания объекта XMLHttpRequest");

else { return xmlHttp;alert(xmlHttp);}


}

function process()

{

if (xmlHttp.readyState==4||xmlHttp.readyState==0)



{

name=encodeURIComponent(document.getElementById("name").value);

xmlHttp.open('GET',"start.php?name="+name,true);

xmlHttp.onreadystatechange=handleServerResponse;

xmlHttp.send(null);

}

else setTimeout('process()',1000);



}

function handleServerResponse()

{

if(xmlHttp.readyState==4)



{

if(xmlHttp.status==200)

{

helloMessage=xmlHttp.responseXML.documentElement.firstChild.data;//documentElement;



document.getElementById("divMessage").innerHTML=""+helloMessage+"";

setTimeout('process()',1000);

}

else alert("Проблема при обращении к серверу: "+xmlHttp.statusText);



}

return ;


}

Этот файл требует ряда комментариев, поясняющих его работу. Он содержит 3 функции: createXmlHttpRequestObject() – для создания объекта XmlHttpRequest, process() – для чтения содержимого текстового поля формы и отправки данных серверу, handleServerResponse() – для получения ответа сервера, его разбора и вывода в документ HTML. Первая функция создает объект XmlHttpRequest одним из трех методов, в зависимости от браузера, в котором открыт документ. Вторая функция анализирует готовность этого объекта, в случае готовности читает содержимое текстового поля формы, формирует строку запроса к серверному сценарию с передачей ему содержимого текстового поля, определяет метод, который будет обрабатывать ответ сервера (функция handleServerResponse()), и отправляет асинхронный запрос серверу методом xmlHttp.send(null). Если соединение с сервером занято, функция вызывает саму себя через 1000 миллисекунд. Третья функция определяет наличие ответа сервера, его статус (код ошибки, 200 означает ОК), извлекает из ответа в формате XML содержимое первого вложенного тега, и изменяет содержимое (innerHTML) целевого тега документа, обращаясь к нему по идентификатору (ID), а затем снова, с задержкой в 1000 миллисекунд, вызывает функцию process().



Start.php

header("Content-type: text/xml; charset=utf-8");

echo "";

echo "";

$name=$_GET['name'];

$usernames=array('ANDREW','NICOLAS','DARJA','GUN');

if(in_array(strtoupper($name),$usernames))

echo "Hello, ".htmlentities($name)."!";

else if(trim($name)=='') echo "So, what is your name?";

else echo htmlentities($name). ", I don't know you!-(";

echo "";

?>

Здесь формируется XML-документ в кодировке UTF-8 (рекомендуемая кодировка XML-документов, документы в других кодировках могут обрабатываться некорректно), извлекается параметр запроса, и в зависимости от его значения формируется один из трех вариантов ответа. Заметим, что данный сценарий отработает при любом обращении к нему, как из приложения AJAX, так и из браузера. Для того, чтобы серверный сценарий отрабатывал только запрос AJAX, рекомендуется добавить проверку клиента через переменную CHI: if($_SERVER["HTTP_X_REQUESTED_WITH"] == "XMLHttpRequest") {



Проверить работу этого примера можно по адресу http://217.71.139.66/ajax/1/

  1. Фреймворк JQuery

Непосредственное применение методов и свойств объекта XMLHttpRequest, равно как и его создание в зависимости от текущего браузера, заметно увеличивает объем кода и затрудняет его разработку. Инструмент (Фреймворк) QJuery существенно упрощает жизнь разработчику приложений AJAX. Рассмотрим основные методы, реализованные в библиотеке jquery-1.2.6.js. Часто для вызова jQuery методов используется сокращенный вариант, функция $ (знак доллара).

jQuery(..).load

Начнем с самого простого - загрузка HTML кода в необходимый нам DOM элемент на странице. Для этой цели нам подойдет метод load. Данный метод может принимать следующие параметры:

url запрашиваемой страницы

передаваемые данные (необязательный параметр)

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

Приведем пример JavaScript кода:

$(document).ready(function(){ // по окончанию загрузки страницы

$('#example-1').click(function(){

// вешаем на клик по элементу с id = example-1

$(this).load('ajax/example.html');

// загрузку HTML кода из файла example.html

})

});



Пример подгружаемых данных (содержимое файла example.html):

Example

Data Loaded By AJAX

Bye-Bye


jQuery.ajax

Это самый основной метод, а все последующие методы лишь обертки для метода jQuery.ajax. У данного метода лишь один входной параметр – объект, включающий в себя все настройки (выделены параметры, которые стоит запомнить):

async - асинхронность запроса, по умолчанию true

cache - вкл/выкл кэширование данных браузером, по умолчанию true

contentType - по умолчанию “application/x-www-form-urlencoded”

data - передаваемые данные - строка иль объект

dataFilter - фильтр для входных данных



dataType - тип данных возвращаемых в callback функцию (xml, html, script, json, text, _default)

global - тригер - отвечает за использование глобальных AJAX Event’ов, по умолчанию true

ifModified – триггер, проверяет были ли изменения в ответе сервера, дабы не слать еще запрос, по умолчанию false

jsonp - переустановить имя callback функции для работы с JSONP (по умолчанию генерируется на лету)

processData - по умолчанию отправляемые данный заворачиваются в объект, и отправляются как “application/x-www-form-urlencoded”, если надо иначе – отключаем.

scriptCharset - кодировка ( актуально для JSONP и подгрузки JavaScript).

timeout - время таймаут в миллисекундах

type - GET либо POST

url - url запрашиваемой страницы

Локальные события AJAX:

beforeSend - срабатывает перед отправкой запроса

error - если произошла ошибка

success - если ошибок не возникло

complete - срабатывает по окончанию запроса

Для организации HTTP авторизации:

username - логин

password - пароль

Пример javaScript:

$.ajax({

url: '/ajax/example.html', // указываем URL и

dataType : "json", // тип загружаемых данных

success: function (data, textStatus) {

// вешаем свой обработчик на функцию success

$.each(data, function(i, val) { // обрабатываем полученные данные

/* ... */

});


}

});


jQuery.get

Загружает страницу, используя для передачи данных GET запрос. Может принимать следующие параметры:

url запрашиваемой страницы

передаваемые данные (необязательный параметр)

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

тип данных возвращаемых в callback функцию (xml, html, script, json, text, _default)

Применение этого метода для решения задачи из первого примера показано ниже.

Файл index.html почти не изменился, лишь кроме своего файла сценария подключаем и библиотеку jquery-1.2.6.js. Файл серверного сценария на PHP не изменяется вовсе. Файл Start.js стал существенно меньше:

function process()

{

name=encodeURIComponent(document.getElementById("name").value);



$.get("start.php?name="+name,function(data)

{

helloMessage=data.documentElement.firstChild.data;



document.getElementById("divMessage").innerHTML=""+helloMessage+"";

setTimeout('process()',1000);

});

return;


}

Как видим, создание объекта XMLHttpRequest и контроль его состояния реализован в библиотеке JQuery. Проверить работу этого примера можно по адресу http://217.71.139.66/ajax/2/



jQuery.post

Данный метод аналогичен предыдущему, лишь передаваемые данные уйдут на сервер методом POST. Может принимать следующие параметры:

url запрашиваемой страницы

передаваемые данные (необязательный параметр)

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

тип данных возвращаемых в callback функцию (xml, html, script, json, text, _default)

JavaScript:

$(document).ready(function(){ // по завершению загрузки страницы

$('#example-3').click(function(){

// вешаем на клик по элементу с id = example-3

$.post('ajax/example.xml', {}, function(xml){

// загрузку XML из файла example.xml

$('#example-3').html('');

$(xml).find('note').each(function(){

// заполняем DOM элемент данными из XML

$('#example-3').append('To:'+$(this).find('to').text() + '


')

.append('From: ' + $(this).find('from').text() + '


')

.append('' + $(this).find('heading').text() + '


')

.append( $(this).find('body').text() + '


');

});


}, 'xml'); // указываем явно тип данных

})

});


Файл example.xml:





Tove

Jani

Reminder

Don't forget me this weekend!

Похожие:

Ajax изнутри ajax – это акроним, раскрывающийся как Asynchronous JavaScript And xml iconТехнология Ajax при построении web-приложений
Термин «Ajax» используется с 2004 года и обозначает «асинхронный JavaScript + xml». Основные особенности
Ajax изнутри ajax – это акроним, раскрывающийся как Asynchronous JavaScript And xml iconAjax расшифровывается как Asynchronous JavaScript and xml
Однако так как эта концепция вносит некоторые изменения в модель взаимодействия клиент-сервер и открывает новые возможности по написанию...
Ajax изнутри ajax – это акроним, раскрывающийся как Asynchronous JavaScript And xml iconЗадания к лабораторной работе №4 по дисциплине "Веб-интерфейсы"
Из этого следует, что такие действия как добавление записи в базу данных или получение списка файлов на сервере при использовании...
Ajax изнутри ajax – это акроним, раскрывающийся как Asynchronous JavaScript And xml iconAjax с помощью jQuery
Большинство современных сайтов используют технологию, которая называется ajax, для быстрого и эффективного взаимодействия с посетителем....
Ajax изнутри ajax – это акроним, раскрывающийся как Asynchronous JavaScript And xml iconРуководство по использованию технологии ajax содержание
Технология ajax в системе «1с-битрикс: Управление сайтом» реализована на двух уровнях
Ajax изнутри ajax – это акроним, раскрывающийся как Asynchronous JavaScript And xml iconОптимизация обработки и обмена данными при помощи технологии ajax
Особенно это важно в сложных распределенных системах работа которых строится на основе web-сервисов. Для решения этой проблемы может...
Ajax изнутри ajax – это акроним, раскрывающийся как Asynchronous JavaScript And xml iconТехнология Silverlight: Ajax и С# для обработки событий элемента управления Silverlight
...
Ajax изнутри ajax – это акроним, раскрывающийся как Asynchronous JavaScript And xml iconAjax генератор форм

Ajax изнутри ajax – это акроним, раскрывающийся как Asynchronous JavaScript And xml iconAjax стал одним из самых больших «открытий» за последний год и успел стать «умным словечком», что-то вроде Web 0

Ajax изнутри ajax – это акроним, раскрывающийся как Asynchronous JavaScript And xml iconЗнакомство с языком JavaScript
Во-первых, это не Java. Тут легко запутаться и решить, что Java и JavaScript — одно и то же. Отнюдь. Java — это язык программирования,...
Разместите кнопку на своём сайте:
ru.convdocs.org


База данных защищена авторским правом ©ru.convdocs.org 2016
обратиться к администрации
ru.convdocs.org