Показано с 1 по 5 из 5
  1. #1
    Юзер
    Регистрация
    06.06.2007
    Сообщений
    4
    Сказал(а) спасибо
    0
    Поблагодарили 0 раз(а) в 0 сообщениях

    По умолчанию Что такое Ajax - полезная статья для начинающих

    Привычная модель взаимодействия пользователя с веб-приложением подразумевает несколько неприятных моментов. Любой, кто заполнял формы на сайтах, сталкивался с тем, что после нажатия кнопки "Submit" приходится ждать ответа от сервера. Связано это с тем, что браузер работает по простой схеме запрос-ответ. Причем между запросом и ответом должно пройти время. К этому добавляется тот факт, что страница должна быть перезагружена.

    Ajax позволяет избежать перезагрузок страницы. Объясняется это тем, что запросы к серверу производятся на заднем плане с помощью объекта языка Java Script, который называется XMLHTTPRequest. Таким образом, достигается асинхронность ("А" в акрониме) взаимодействия клиента и сервера. Остальные буквы акронима означают "Java Script And XML".

    На самом деле этот объект был встроен в браузеры давно, но не использовался широко. После того как разработчики Google Mail применили его для реализации своего проекта, он стал использоваться достаточно широко.

    Термин "Ajax" вошел в словарь разработчиков после публикации статьи Джеси Джеймса Гаррета "Ajax: Новый подход к веб-приложениям" (перевод|оригинал). В статье сформулированы не только новые принципы построения веб-интерфейсов, но и дан подробный список технологий, являющихся составными частями архитектуры. Список следующий:

    XHTML и CSS
    DOM
    XML и XSLT
    XMLHttpRequest
    JavaScript
    Рассмотрение основных методов и свойств объекта XMLHTTPRequest можно провести на примере. Рассмотрим следующий код (для удобства разбора строки примера пронумерованы):

    index.html
    1
    2
    3
    4
    26
    27
    28

    Пример Ajax

    29

    30 onclick = getAjax('http://www.test.ru/test.txt','target')>
    31

    32
    33
    Amat victoria curam.


    34


    35
    36


    Помимо веб-страницы нам понадобится дополнительный текстовый файл, содержимое которого мы будем асинхронно догружать на тестовую страницу. Содержимое файла (назовем его test.txt) может быть следующим:

    Ibi victoria, ubi concordia

    Поставленная перед нами задача выглядит следующим образом. На загруженной странице будет находиться кнопка. После нажатия кнопки первоначальное содержимое слоя с именем target меняется на содержимое текстового файла. Читателю, знакомому с веб-технологиями, этот трюк (замена текста в слове) может показаться не очень-то оригинальным. Такое, в конце концов, можно проделать разными способами. Но суть нашего примера состоит в использовании объекта XMLHTTPRequest, что позволяет нам получить информацию с сервера без перезагрузки страницы.

    Прежде чем подробно разобрать этот пример, следует обсудить некоторые технические подробности. Дело в том, что, будучи загруженным в браузер с локального диска, этот пример работать не будет. Для того чтобы правильно обработать этот пример, браузер должен получить документ с помощью веб-сервера. Неважно, установлен сервер у вас локально или же вы проверяете данный пример на удаленном сервере, но факт остается фактом, объект XMLHTTPRequest обращается к серверу по протоколу HTTP и привычный способ отладки веб-страниц путем запуска их напрямую (с жесткого диска) работать не будет.

    Далее, как уже давно обещано, следует разбор исходного файла. Детально рассмотрены только те строки, которые имеют отношение к рассматриваемой теме.

    Строка 5. Инициализация переменной XMLHTTPRequestObject.
    В этой переменной будет храниться объект XMLHTTPRequest, который будет полностью инициализирован в следующих строках. Значение false присваивается этой переменной, на случай если браузер не поддерживает этот объект.

    Строки 6-10. Создание объекта XMLHTTPRequest.
    В этих строках происходит привычная любому веб-разработчику "война браузеров". В случае с браузерами семейства Internet Explorer необходимо создать объект ActiveX. В случае с остальными браузерами можно просто создать соответствующий объект.

    Как видно из исходного кода страницы (строка 30), на кнопку формы "повешен" обработчик, который вызывает определенную пользователем функцию getAjax с двумя параметрами. Назначение функции и смысл параметров становятся ясными после разбора исходного текста функции.

    Строки 11-24. Основная функция.
    После того как объект XMLHTTPRequest создан, разработчик получает доступ к его методам и свойствам. За полным их перечнем, а также за различиями в реализациях для разных браузеров обращайтесь к специальной литературе (ссылки в конце статьи). Наш пример использует минимальный рабочий набор методов и свойств объекта XMLHTTPRequest.

    В строке 12 происходит проверка того, был ли создан объект. Если нет (допустим, браузер его не поддерживает), то далее никаких действий не происходит. В случае если условие выполнилось, происходит обработка второго параметра, переданного функции. В нашем случае это инициализация переменной obj и помещение в нее (по имени) нашего рабочего слоя с целью в дальнейшем менять его свойства.

    В строке 13 вызывается метод open, который формирует запрос к серверу. На самом деле число параметров этого метода гораздо больше, но мы используем минимальный набор. А именно метод протокола HTTP и URL необходимого нам документа.

    В строке 14 используется свойство onreadystatechange, позволяющее следить за изменением статуса объекта, в то время когда он выполняет свою работу. Здесь создается анонимная функция, которая выполняет работу по проверке двух важных свойств объекта (стоки 17 и 18). Первое (readyState) может по результатам работы объекта содержать значения от 0 до 4 (4 означает, что запрос закончен). Второе(status) содержит код ответа сервера (200 означает, что документ существует). Подробности о возможных значениях этих свойств можно узнать в документации.

    Если оба условия выполнены (строка 19), то значение свойства innerHTML, ранее определенного объекта obj, заменяется на значение, полученное с сервера (свойство responseText).

    В строке 22 происходит собственно запрос. Значение передаваемого параметра null определено методом GET (строка 13). В случае использования метода, отличного от GET, вместо null следует использовать что-нибудь другое.

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



    Карасев Сергей
    Источник - [Только зарегистрированные пользователи могут видеть ссылки. ]

  2. #2
    Местный
    Регистрация
    19.11.2006
    Сообщений
    216
    Сказал(а) спасибо
    0
    Поблагодарили 0 раз(а) в 0 сообщениях

    По умолчанию Re: Что такое Ajax - полезная статья для начинающих

    Хорошая статья. Будем учиться ))

  3. #3
    Продвинутый юзер Аватар для mr_john
    Регистрация
    18.04.2009
    Сообщений
    44
    Сказал(а) спасибо
    0
    Поблагодарили 1 раз в 1 сообщении

    По умолчанию Re: Что такое Ajax - полезная статья для начинающих

    Подскажите что-нибдуь для чайников полезное на ajax, с примерами

  4. #4
    Юзер
    Регистрация
    06.05.2009
    Сообщений
    11
    Сказал(а) спасибо
    1
    Поблагодарили 0 раз(а) в 0 сообщениях

    По умолчанию Re: Что такое Ajax - полезная статья для начинающих

    Вот часть кода работающая без перегрузки страницы с реального сайта.

    <html>
    <head>
    <script>
    //Функции для смены картинки пункта меню
    Скрытый текст
    </script>
    // Далее идет почти стандартный html код
    </head>

    <body>

    //Далее идет код описывающий в слоях мое меню для изменения внешнего вида менюшки (смена картинки и текста)

    Скрытый текст
    // Далее собственно меню

    Скрытый текст

    // Вот эта часть кода должна присутствовать обязательно, это собственно iframe в который все и подгружается

    <iframe name=z id=z width=0 height=0 frameborder=0 src=action.php?id=1></iframe>

    // его наличие так же как и наличие функции которая получает это из файла обязательно. Прошу прощения что привел не полный код страницы, просто ее размер довольно-таки велик.
    // Вот эта часть кода отвечает за подгрузку в ифрэйм без перегрузки страницы нужный нам контент

    onClick="document.getElementById('z').src='news.ph p?id=1';"

    //
    Сама страница (код которой приведен выше) рзделена невидимой таблицей в пропорциональном отношении и часть в которую выводится контент в центре, убрал часть кода для уменьшения размера и большей наглядности.
    В данном случае из файла новостей выбирается по ид первая новость, если мне необходимо из файла выбрать другую новость то я просто меняю номер ид. В файле можно хранить неограниченное количество наших страниц, по которым можно делать выборку. это не принципиально, для удобства редактирования (если вы не делаете админку) проще делать каждый пункт меню в отдельном файле, просто подставляя нужное имя файла. В данном случае файл содержащий контент должен иметь специальный формат, который немного усложняет редактирование такого контента, но эту проблему очень просто решить.

    Приведу часть файла из которого выбирается информация:

    <?
    if($id==50)
    {
    echo '<script>parent.f("<i><font style=font-family:georgia,verdana,arial,sans-serif;font-size:16;color:#222bbb;text-align:center;><center>';
    $d=opendir("images/fotosessii/");
    $files=array();
    while($f=readdir($d))if($f!='.'&&$f!='..')$files[]=$f;
    $c=count($files);
    echo '<center><b>Выберите проект для детального просмотра...</b></center><br>';
    for($i=0;$i<$c;$i++)
    {
    echo '<a href=show.php?id=show&dir='.$files[$i].' target=z><img src=images/fotosessii/'.$files[$i].'/pr/001.jpg></a><br>';
    }
    echo '</center>");</script>';
    }
    ?>
    Наличие

    if($id==50) echo '<script>parent.f(" Ваш текст с хтмл кодом вставками картинок ссылок и т.д. ");</script>';

    if($id==51) echo '<script>parent.f(" Ваш второй текст");</script>';
    Есть одно ограничение, переносов строк не должно быть (перевод строки по энтеру) для переноса строки принудительного нужно использовать хтмл код (форматирование текста)

    Это можно обойти, если сделать с инклудить с помошью рнр другую страницу, даже если в ней будет перевод строки то это не вызовет сбоя в работе скриптов

    Добавлено через 11 минут 17 секунд
    Приемущества такого подхода есть, во первых не приходится каждый раз грузить меню вместе со всеми грузовыми картинками, опятьже если у вас на сайте играет музыка пусть даже потоковая, при выборе любого пункта меню музыка продолжить играть как играла но загрузится необходимая страница. С музыкой у меня реализовано было на этом сайте.
    Второй плюс, сайт грузится (по крайней мере в нашей республике намного быстрее и работает быстрее) на медленном интернете, и опятьже экономится трафик.
    Как описывал создатель темы, это дает много возможностей программисту, которые при желании можно реализовать.
    Последний раз редактировалось GhostAnton; 25.05.2009 в 03:12. Причина: Добавлено сообщение

  5. #5
    Юзер
    Регистрация
    06.05.2009
    Сообщений
    11
    Сказал(а) спасибо
    1
    Поблагодарили 0 раз(а) в 0 сообщениях

    По умолчанию Re: Что такое Ajax - полезная статья для начинающих

    Забыл упомянуть об одном нюансе при построении меню сайта такого типа как я привел части исходного кода:
    1) Все поисковые системы не распознают ссылки на страницы сайта, они проиндексируют только первую страницу сайта.
    2) Для того чтоб все поисковые системы смогли проиндексировать ваши страницы необходимо на каждой странице сделать невидимый слой, в котором содержатся все ссылки на ваши страницы (скрытое меню, невидимое для пользователей)
    3) На каждой странице вашего сайта будет необходимо сделать либо проверку, с какой страницы перешли на нее, если с главной страницы сайта, то просто открываем, иначе вывести предупрждение и ссылку на главную страницу.



Социальные закладки

Социальные закладки

Ваши права

  • Вы не можете создавать новые темы
  • Вы не можете отвечать в темах
  • Вы не можете прикреплять вложения
  • Вы не можете редактировать свои сообщения
  •