1. Основные причины использования Ajax
1. Чтобы добиться лучшего пользовательского опыта с помощью соответствующих приложений Ajax
2. Перенести часть предыдущей работы, отягощенной сервером, клиенту, что полезно для вычислительной мощности клиента в режиме ожидания и снижает производительность сервера; и нагрузку на полосу пропускания, тем самым достигая цели экономии места и затрат на аренду полосы пропускания у интернет-провайдера.
2. Цитата
Джесси Джеймс Гарретт, самый ранний, кто предложил концепцию Ajax, считает, что Ajax — это аббревиатура асинхронного JavaScript и XML. Ajax — это не новый язык или технология. На самом деле это несколько технологий, объединенных определенным образом и выполняющих свои функции в рамках общего взаимодействия. Это включает в себя:
· Использование XHTML и CSS для стандартизации представления
· Использование DOM. Реализация динамического отображения и взаимодействия;
·Использовать XML и XSLT для обмена и обработки данных ·
Использовать XMLHttpRequest для асинхронного чтения данных
·Наконец, использовать JavaScript для связывания и обработки всех данных.
Принцип работы Ajax эквивалентен добавлению среднего уровня для асинхронного выполнения пользовательских операций; и ответы сервера асинхронны. Не все пользовательские запросы передаются на сервер. Некоторая проверка и обработка данных остается на усмотрение самого механизма Ajax. Только когда будет определено, что новые данные необходимо прочитать с сервера, механизм Ajax отправит запрос на сервер. от его имени.
3. Обзор
Хотя Гаррент перечислил семь составляющих технологий Ajax, я лично считаю, что ядром так называемого Ajax являются только JavaScript, XMLHTTPRequest и DOM. Если используется формат данных XML, можно также добавить XML (Ajax запускается со стороны сервера). данные могут быть в формате XML или других форматах, например текстовом).
В старом методе взаимодействия пользователь отправляет HTTP-запрос на сервер, и сервер обрабатывает его, а затем возвращает клиенту новую страницу HTHL. Всякий раз, когда сервер обрабатывает запрос, отправленный клиентом, клиент может только ждать. , и даже если это всего лишь небольшое взаимодействие и нужно получить только простой фрагмент данных с сервера, должна быть возвращена полная HTML-страница, и пользователю придется тратить время и пропускную способность, чтобы каждый раз перечитывать всю страницу. .
После использования Ajax пользователи чувствуют, что почти все операции выполняются быстро, не дожидаясь перезагрузки страницы (белый экран).
1. XMLHTTPRequest
Одной из важнейших особенностей Ajax является то, что он может передавать или читать и записывать данные на сервер без обновления страницы (также известное как обновление страницы без обновления). Эта функция в основном выигрывает от объекта XMLHTTPRequest компонента XMLHTTP. Таким образом, настольное приложение может только обмениваться данными с сервером без необходимости каждый раз обновлять интерфейс или каждый раз отправлять обработку данных на сервер. Это не только снижает нагрузку на сервер, но и ускоряет время обработки. Скорость ответа и сокращение времени ожидания пользователя.
Microsoft была первой, кто применил XMLHTTP. IE (IE5 и выше) расширяет свои функции, позволяя разработчикам использовать компоненты XMLHTTP ActiveX внутри веб-страниц. Разработчики могут напрямую передавать данные на сервер или получать данные с него, не переходя с текущей веб-страницы. . Эта функция важна, поскольку она помогает уменьшить неудобства, связанные с соединениями без сохранения состояния, а также может увеличить скорость процесса, устраняя необходимость загрузки избыточного HTML. Mozilla (Mozilla 1.0 и выше и NetScape 7 и выше) отреагировала на это созданием собственного унаследованного прокси-класса XML: класса XMLHttpRequest. Konqueror (и Safari v1.2, также браузер на основе KHTML) также поддерживает объект XMLHttpRequest, а Opera также будет поддерживать объект XMLHttpRequest в версии v7.6x+ и более поздних версиях. По большей части объект XMLHttpRequest очень похож на компонент XMLHTTP, методы и свойства аналогичны, за исключением того, что небольшое количество свойств не поддерживается.
Применение XMLHttpRequest:
·Применение объекта XMLHttpRequest в JS
var xmlhttp = new XMLHttpRequest()
·Применение компонента Microsoft XMLHTTP в JS
var xmlhttp = new ActiveXObject(Microsoft.XMLHTTP)
;
Метод объекта XMLHttpRequest
/**
* Межбраузерное создание экземпляра XMLHttpRequest.
*/
if (typeof XMLHttpRequest == 'undefined') {
XMLHttpRequest = function () {
var msxmls = ['MSXML3', 'MSXML2', 'Microsoft']
for ( var i=0; i < msxmls.length; i++) {
try {
return new ActiveXObject(msxmls[i]+'.XMLHTTP')
} catch (e) { }
}
throw new Error("Компонент XML не установлен!")
}
}
function createXMLHttpRequest() {
try {
// Попытка создать его «путем Mozilla»
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
}
// Думаю, нет — теперь способом IE
if (window.ActiveXObject ) {
вернуть новый ActiveXObject(getXMLPrefix() + ".XmlHttp"
}
}
catch (ex) {}
return false
};
объекта XMLHttpRequest
| abort | ( |
| ) | прерывает текущий запрос |
| getAllResponseHeaders() | возвращает полные заголовки в виде строки |
| getResponseHeader("headerLabel") | возвращает одну метку заголовка в виде строки |
| open("method","URL"[,asyncFlag[ , "userName"[, "пароль"]]]) | Установите целевой URL-адрес, метод и другие параметры ожидающего запроса |
| send(content) | отправьте запрос |
| setRequestHeader("label", "value") | установите заголовок и отправьте его вместе |
атрибута объекта
| запроса |
| onreadystatechange | , |
| ReadyState | |
| для | изменения состояния |
| Статус объекта (целое): 0 = не инициализировано 1 = Чтение 2 = Чтение 3 = Взаимодействие 4 = Завершить | |
| текстовую версию данных, возвращаемых серверным процессом responseText | . |
| DOM-совместимый объект XML-документа, возвращаемый | серверным процессомresponseXML |
| , | например: 404 = «Файл не найден», 200 =. |
| «Успех» | |
| , возвращаемый сервером | statusText | Текстовая информация
2. JavaScript
JavaScript — это язык программирования, широко используемый в браузерах. В прошлом его считали плохим языком (его действительно скучно использовать), и он часто используется некоторыми. для эффектных гаджетов и розыгрышей или утомительной проверки форм. Но дело в том, что это настоящий язык программирования, имеющий свои стандарты и широко поддерживаемый в различных браузерах.
3. Объектная модель документа DOM
.
DOM — это набор API для файлов HTML и XML. Он обеспечивает структурное представление файла, позволяя изменять его содержимое и видимость. Его суть заключается в установлении моста между веб-страницами и скриптами или языками программирования.
Все свойства, методы и события, которыми WEB-разработчики могут управлять и создавать файлы, представлены объектами (например, документ представляет собой объект «сам файл», объект таблицы представляет объект таблицы HTML и т. д.). Доступ к этим объектам возможен из скрипта в большинстве современных браузеров.
Веб-страницу, созданную с помощью HTML или XHTML, также можно рассматривать как набор структурированных данных. Эти данные заключены в DOM (объектная модель документа). DOM обеспечивает поддержку чтения и записи различных объектов на веб-странице.
4. Расширяемый язык разметки XML
Движок Ajax, упомянутый Джесси Джеймсом Гарреттом, на самом деле представляет собой относительно сложное приложение JavaScript, используемое для обработки пользовательских запросов, серверов чтения и записи, а также изменения содержимого DOM.
Механизм Ajax JavaScript считывает информацию и в интерактивном режиме переписывает DOM. Это позволяет плавно реконструировать веб-страницы, то есть изменять содержимое страницы после ее загрузки. Это то, что мы широко используем с помощью JavaScript и метода DOM. но чтобы сделать веб-страницу по-настоящему динамичной, требуется не только внутреннее взаимодействие, но и получение данных извне. Раньше мы позволяли пользователям вводить данные и изменять содержимое веб-страницы через DOM, но теперь XMLHTTPRequest позволяет это сделать. позволяет нам читать и записывать данные на сервере без перезагрузки страницы, сводя к минимуму ввод данных пользователем.
Сетевая связь на основе XML не нова. Фактически, и FLASH, и JAVA-апплеты хорошо зарекомендовали себя. Теперь этот вид богатого взаимодействия доступен и на веб-страницах. Он основан на стандартизированных и широко поддерживаемых технологиях и не требует дополнительных модулей. или плагины Загрузите апплет.
Ajax — это трансформация традиционных веб-приложений. Раньше сервер каждый раз генерировал HTML-страницу и возвращал ее клиенту (браузеру). На большинстве веб-сайтов по крайней мере 90% страниц одинаковы, например: структура, формат, верхний и нижний колонтитулы, рекламные объявления и т. д. Единственная разница — небольшая часть контента, но каждый раз сервер будет генерировать все возвращаемые страница для клиента является невидимой тратой, будь то время пользователя, пропускная способность, потребление ЦП или пропускная способность и пространство, арендованные интернет-провайдером по высокой цене. Если подсчитать по страницам, то всего лишь несколько тысяч или десятки тысяч могут быть не впечатляющими, но для крупного интернет-провайдера, такого как SINA, который ежедневно генерирует миллионы страниц, это можно назвать огромной потерей. AJAX может служить промежуточным уровнем между клиентом и сервером для обработки запроса клиента и отправки запроса на сервер по мере необходимости. Вы можете получить то, что вы используете, и сколько вы используете, поэтому не будет избыточности и потери данных. . , уменьшая общий объем загружаемых данных, и нет необходимости перезагружать весь контент при обновлении страницы. По сравнению с чисто фоновой обработкой и перезагрузкой, пользователь ждет. время сокращается, а трата ресурсов снижается. Минимизированный, основанный на стандартизированных и широко поддерживаемых технологиях, не требующий плагинов или загружаемых апплетов, Ajax является беспроигрышным вариантом как для пользователей, так и для интернет-провайдеров.
Ajax разделяет интерфейс и приложение в WEB (также можно сказать, что он разделяет данные и представление). В прошлом между ними не было четкой границы. Разделение данных и представления способствует разделению труда и сотрудничеству. уменьшает необходимость взаимодействия со страницей нетехнического персонала. Модификация вызывает ошибки WEB-приложений, повышает эффективность и больше подходит для текущей системы публикации. Вы также можете передать часть предыдущей работы, отягощенной сервером, клиенту, что полезно для вычислительной мощности клиента в режиме ожидания.
4.
Появление применения концепции Ajax открыло прелюдию к эпохе обновления страниц без обновления и имеет тенденцию к замене использования представления формы (формы) в традиционной веб-разработке для обновления веб-страниц, что можно рассматривать как как веха. Но Ajax применим не везде, и сфера его применения определяется его характеристиками.
Пример приложения — Ajax-приложение для каскадных меню.
Наша предыдущая обработка каскадных меню заключалась в следующем:
Чтобы избежать перезагрузки страницы, вызванной каждой операцией в меню, мы не использовали метод вызова фона каждый раз, а считывали все данные каскадного меню сразу. выводится и записывается в массив, а затем с помощью JavaScript управляет представлением своего подмножества элементов на основе операций пользователя. Это решает проблему скорости ответа на операцию, не перезагружая страницу и избегая частых запросов к серверу, но если. пользователь не реагирует на меню. Если вы работаете или работаете только с частью меню, часть считанных данных станет избыточными данными и приведет к пустой трате ресурсов пользователя, особенно когда структура меню сложна и объем данных велик ( например, в меню много уровней, и на каждом уровне сотни пунктов), этот недостаток еще более заметен.
Если в этом случае применить Ajax, результат улучшится:
при инициализации страницы мы только считываем все данные первого уровня и отображаем их. При работе пользователя с одним из пунктов меню первого уровня результат будет. быть отправлен пользователю через Ajax. Фон запрашивает все данные подменю второго уровня, к которому принадлежит текущий элемент первого уровня. Если он продолжает запрашивать элемент в уже представленном меню второго уровня, он затем запрашивает все. данные всех меню третьего уровня, соответствующие эксплуатируемому пункту меню второго уровня, и так далее... Таким образом, вы сможете получить все, что используете, и столько, сколько вам нужно. Не будет избыточности и растрат. данных, уменьшая общий объем загрузок данных, и нет необходимости перезагружать весь контент при обновлении страницы, просто обновите ту часть, которую необходимо обновить. По сравнению с фоновой обработкой и перезагрузкой это сокращает время ожидания пользователя. и минимизирует трату ресурсов.
Кроме того, поскольку Ajax может вызывать внешние данные, он также может реализовать функцию агрегирования данных (конечно, с соответствующей авторизацией), например, БЕТА-версия онлайн-программы для чтения RSS, только что выпущенная Microsoft 15 марта, также может облегчить эту задачу; разработка некоторых открытых данных. Некоторые собственные приложения, такие как некоторые новые приложения для поиска книг, использующие данные Amazon.
Короче говоря, Ajax подходит для WEB-приложений с большим количеством взаимодействий, частым чтением данных и хорошей классификацией данных.
1. Уменьшите нагрузку на сервер. Поскольку фундаментальной концепцией Ajax является «получение данных по требованию», это может в наибольшей степени снизить нагрузку, вызванную избыточными запросами и воздействием на сервер.
2. Обновлять страницу без обновления, сокращая фактическое и психологическое время ожидания пользователя;
сначала «нажмите». Режим «требуются данные» уменьшает реальный объем считываемых данных. Если провести очень яркую аналогию, если метод перегрузки заключается в возврате в начало координат из одной конечной точки, а затем в другую конечную точку, то в основе Ajax лежит Достигните другой конечной точки,
во-вторых, даже если вы хотите прочитать относительно большие данные, нет необходимости иметь белый экран, такой как RELOAD, поскольку Ajax использует XMLHTTP для отправки запросов на получение данных ответа сервера без перезагрузки. Используйте Javascript для управления DOM и, наконец, обновления страницы, чтобы в процессе чтения данных пользователь видел не белый экран, а исходное состояние страницы (или вы можете добавить окно подсказки ЗАГРУЗКА, чтобы разрешить пользователь понимает статус процесса чтения данных), только когда все данные получены, соответствующая часть контента обновляется, причем это обновление также происходит мгновенно и практически незаметно для пользователя. Короче говоря, пользователи очень чувствительны. Они чувствуют ваше внимание к ним. Хоть это и не принесет немедленных результатов, но их зависимость от сайта постепенно будет накапливаться в сердцах пользователей.
3. Лучший пользовательский опыт
4. Он также может передавать часть предыдущей работы, отягощенной сервером, клиенту, который может использоваться бездействующей вычислительной мощностью клиента, снижая нагрузку на сервер и пропускную способность, а также экономя пространство и пропускную способность. стоимость аренды
5. Ajax может вызывать внешние данные
6. Он основан на стандартизированной и широко поддерживаемой технологии и не требует плагинов или скачиваемых апплетов
7. Ajax разделяет интерфейс и приложение в WEB (также может быть); сказано разделить данные и представление)
8. Это беспроигрышная ситуация для пользователей и интернет-провайдеров;
6. Проблемы с Ajax
1. Некоторые портативные устройства (например, мобильные телефоны, КПК и т. д.) еще плохо поддерживают Ajax.
2. Движки Ajax, созданные с использованием JavaScript, совместимости с JavaScript и DeBugs, являются головной болью.
3. Ajax не обновляется; перезагрузка, поскольку изменения страницы не так очевидны, как перезагрузка обновления, поэтому пользователям легко доставить неприятности — пользователи не уверены, являются ли текущие данные новыми или были обновлены. Существующие решения включают в себя: соответствующие подсказки о местоположении и обновление данных; области сделаны более очевидными, и пользователи получают подсказки после обновления данных и т. д.
4. Поддержка потокового мультимедиа не так хороша, как FLASH и Java Applet;