AJAX для новичков / Хабрахабр. Сейчас в сети Интернет наблюдается очень активное развитие (и даже использование) новых технологий. Одна из таких технологий — AJAX. Что такое AJAX? AJAX — это аббревиатура, которая означает Asynchronous Javascript and XML. На самом деле, AJAX не является новой технологией, так как и Javascript, и XML существуют уже довольно продолжительное время, а AJAX — это синтез обозначенных технологий. При использовании технологии AJAX, JavaScript код делает запрос к URL на сервере. Код также может отправить данные вместе с запросом. Затем JavaScript код обрабатывает ответ сервера и действует соответствующим образом. Ведь AJAX - это Asynchronous Javascript and XML, то есть всё, что относится непосредственно к обработке данных и есть AJAX, мне так кажется. С помощью нашего учебника Вы научитесь использовать AJAX в очень сжатые сроки. AJAX расшифровывается Asynchronous JavaScript And XML. AJAX чаще всего ассоцириуется с термином Web 2. Web- приложение. При использовании AJAX нет необходимости обновлять каждый раз всю страницу, так как обновляется только ее конкретная часть. Это намного удобнее, так как не приходится долго ждать, и экономичнее, так как не все обладают безлимитным интернетом. Правда в этом случае, разработчику необходимо следить, чтобы пользователь был в курсе того, что происходит на странице. Это можно реализовать с использованием индикаторов загрузки, текстовых сообщений о том, что идёт обмен данными с сервером. Необходимо также понимать, что не все браузеры поддерживают AJAX (старые версии браузеров и текстовые браузеры). Плюс Javascript может быть отключен пользователем. Поэтому, не следует злоупотреблять использованием технологии и прибегать к альтернативным методам представления информации на Web- сайте. Обобщим достоинства AJAX: Возможность создания удобного Web- интерфейса. Активное взаимодействие с пользователем. Частичная перезагрузка страницы, вместо полной. Удобство использования. AJAX использует два метода работы с веб- страницей: изменение Web- страницы не перезагружая её, и динамическое обращение к серверу. Второе может осуществляться несколькими способами, в частности, XMLHttp. Request, о чем мы и будем говорить, и использование техники скрытого фрейма. Современные средства для обмена данными с сервером и смежные аспекты. Введение в AJAX и COMET · Node.JS для решения задач . В этой главе мы «обзорно», на уровне возможностей и примеров рассмотрим технологию AJAX. Пока что с минимумом технических деталей. Обмен данными. Для того, чтобы осуществлять обмен данными, на странице должен быть создан объект XMLHttp. Request, который является своеобразным посредником между Браузером пользователя и сервером (рис. С помощью XMLHttp. Request можно отправить запрос на сервер, а также получить ответ в виде различного рода данных. Обмениваться данными с сервером можно двумя способами. Первый способ — это GET- запрос. В этом запросе вы обращаетесь к документу на сервере, передавая ему аргументы через сам URL. При этом на стороне клиента будет логично использовать функция Javascript`а escape для того, чтобы некоторые данные не прервали запрос. Не рекомендуется делать GET- запросы к серверу с большими объемами данных. Для этого существует POST- запрос. Клиент часть, написанная на Javascript, должна обеспечивать необходимую функциональность для безопасного обмена с сервером и предоставлять методы для обмена данными любым из вышеперечисленных способов. Серверная часть должна обрабатывать входные данные, и на основе их генерировать новую информацию (например, работая с базой данных), и отдавать ее обратно клиенту. Например, для запроса информации с сервера можно использовать обычный GET- запрос с передачей нескольких и небольших по размеру параметров, а для обновления информации, или добавления новой информации потребуется использовать уже POST- запрос, так как он позволяет передавать большие объемы данных. Как уже было сказано, AJAX использует асинхронную передачу данных. Это значит, что пока идёт передача данных, пользователь может совершать другие, необходимые ему действия. В это время следует оповестить пользователя о том, что идёт какой- либо обмен данными, иначе пользователь подумает, что произошло что- то не то и может покинуть сайт, или повторно вызвать «зависшую», по его мнению, функцию. Индикация во время обмена данными в приложении Web 2. Ответ от сервера может быть не только XML, как следует из названия технологии. Помимо XML, можно получить ответ в виде обычного текста, или же JSON (Javascript Object Notation). Если ответ был получен простым текстом, то его можно сразу вывести в контейнер на странице. При получении ответа в виде XML, обычно происходит обработка полученного XML документа на стороне клиента и преобразование данных к (X)HTML. При получении ответа в формате JSON клиент должен лишь выполнить полученный код (функция Javascript`а eval) для получения полноценного объекта Javascript. Но здесь нужно быть осторожным и учитывать тот факт, что с использованием этой технологии может быть передан вредоносный код, поэтому перед выполнением полученного с сервера кода следует его тщательно проверить и обработать. Существует такая практика, как «холостой» запрос, при котором никакой ответ от сервера не приходит, лишь изменяются данные на стороне сервера. В разных браузерах данный объект обладает разными свойствами, но в целом он совпадает. Методы объекта XMLHttp. Request. Заметьте, что названия методов записаны в том же стиле (Camel- style), что и другие функции Javascript. Будьте внимательны при их использовании. All. Response. Headers() — получить все заголовки ответа от сервера. Response. Header(«имя. Тип запроса и URL — обязательные параметры. Третий аргумент — булево значение. Обычно всегда указывается true или не указывается вообще (по умолчанию — true). Четвертый и пятый аргументы используются для аутентификации (это очень небезопасно, хранить данные об аутентификации в скрипте, так как скрипт может посмотреть любой пользователь). HTTP запрос на сервер и получить ответ. Request. Header(«имя. С помощью этого свойства задаётся обработчик, который вызывается всякий раз при смене статуса объекта. State — число, обозначающее статус объекта. Text — представление ответа сервера в виде обычного текста (строки). XML — объект документа, совместимый с DOM, полученного от сервера. Text — текстовое представление состояния ответа от сервера. Следует подробнее расммотреть свойство ready. State: 0 — Объект не инициализирован. Объект загружает данные. Объект загрузил свои данные. Объек не полностью загружен, но может взаимодействовать с пользователем. Объект полностью инициализирован; получен ответ от сервера. Но создать объект можно в разных местах. Если создать его глобально, то в определенный момент времени возможен будет только один запрос к серверу. Можно создавать объект всякий раз, как происходит запрос к серверу (это почти полностью решит проблему). Запрос к серверу. Алгоритм запроса к серверу выглядит так: Проверка существования XMLHttp. Request. Инициализация соединения с сервером. Посылка запрса серверу. Обработка полученных данных. Для примера напишем функцию, которая будет получать содержимое файла на сервере и выводить его в контейнер. Но она, по сути, небезопасна, так как мы не обрабатываем состояния объекта и состояния ответа от сервера. Дополним наш код, чтобы он смог выводить визуальное оповещение о процессе загрузки. Воспользуемся этой возможностью. При получении данных в виде XML вы должны обработать данные с помощью DOM- функций, и представить результат с помощью HTML. JSON — это объектная нотация Javascript. С ее помощью можно представить объект в виде строки (здесь можно привести аналогию с функцией сериализации). При получении JSON- данных вы должны выполнить их, чтобы получить полноценный объект Javascript и произвести с ним необходимые операции. Помните, что такая передача данных и выполнение их не являются безопасными. Вы должны следить за тем, что поступает на исполнение. Пример кода JSON. Для примеров я возьму PHP в качестве серверного языка. В клиентской части ничего не изменилось, но серверная часть теперь представлена PHP- файлом. По традиции, начнем с приветствия нашему замечательному миру. Как вы понимаете, это представляет широчайшие возможности для построения приложений. На основе передачи аргументов при вызове сервера с помощью XMLHttp. Request можно сделать параметризацию вывода, тем самым обеспечив обширную функциональность Web- приложения. Помимо PHP, можно использовать любой другой серверный язык программирования. Литература по теме. Статья написана с целью рассказать новичкам о работе AJAX изнутри. Если Вам кажется, что что- то написано неточно или неверно, поправляйте, пожалуйста, меня, для того, чтобы создать достойную статью вместе. Конечно, если есть возможность, стоит использовать существующие фреймворки, я считаю. Но знать «как оно работает» всё- же необходимо.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. Archives
November 2016
Categories |