[ главная ]   [ рейтинг статей ]   [ справочник радиолюбителя ]   [ новости мира ИТ ]



Ответов: 0
25-02-12 07:01







   Web - программирование
PHP


ASP






XML



CSS

SSI





   Программирование под ОС











   Web - технологии








   Базы Данных









   Графика






Данные




Web - программирование / AJAX /

«Hello, закладки!» - Добавить в закладки на AJAX

Источник: http://ajax.nnm.ru/

Давайте обсудим более рациональные и эффективные функции для нашего любимого сайта. Начнем с самой простой вещи - кнопки "Добавить в закладки". По моему, это самое наболевшее место, которое так и просится чтобы его Ajax’стили. Вместо того. Чтобы использовать уже готовые движки, мы попытаемся создать свой легкий код сами. Немного теории было в предыдущей новости, а теперь – за дело.

Техзадание для Ajax’тикации кнопки «Добавить в закладки»
Внизу с правой стороны каждой новости зарегистрированным пользователям предоставлена возможность создать логическую ссылку такой новости и поместить ее в свой персональный раздел «Закладки».

1. Пользователь щелкает на кнопку
2. Без перезагрузки страницы посылается запрос на сервер
3. Сервер начинает обработку запроса
4. Пользователь может не дожидаться ответа от сервера и продолжать навигацию
5. Сервер заканчивает обработку запроса и , если мы пожелаем, то может показать пользователю сообщение, что закладка создана.

Воплщение в жизнь

Интерфейс состоит из следующих частей:

JavaScript код, который диспетчеризует клиентские запросы к серверу и управляем пользовательским интерфейсом. Чтобы весь код не загружать на страницу давайте выделим его в отдельный файл. Который назовем, например, nnmAjax.js.

 

  1. /**
    
  2.  * На HTML странице NoName 
    
  3.  * установите єтот код между тєгами <HEAD> 
    
  4. **/
    
  5. <script type="text/javascript" src="nnmAjax.js"></script>
    


Ajax использует программную модель, при которой пользовательские события (нажатие на кнопку) вызывают определенную JavaScript функцию. Можно достичь высокой степени интерактивности с формами, кнопками и дизайном с помощью DOM, для чего необходимо создать логическое поле с уникальным именем вокруг элемента, с которым мы хотим взаимодействовать. В нашем случае, это будет <DIV name="nnmAjax_bookmarks"> </DIV>

Следуя логике событий мы создадим несколько наших функций:
• nnmAjaxCreate() – создает новый XMLHttpRequest объект
• nnmAjaxGet() – управляет событием отправки запроса к серверу
• nnmAjaxReceive() – передает данные, полученные от сервера

Для того, чтобы послать запрос на сервер с помощью JavaScript, необходимо создать объект XMLHttpRequest, поддерживаемый болшинством современных броузеров, о которых мы говорили в . Так как не существует определенного стандарта между различными броузерами, необходимо выбрать для какого броузера какой тип объекта необходим. IE поддерживает XMLHttpRequest совершенно иначе, чем Safari, Opera или Firefox, основанный на Mozilla, что позволяет нам создать два выбора:

 
  1. /*
    
  2.  *  nnmAjax.js
    
  3.  */ 
    
  4. 
    			
  5. 
    			
  6. /* наша основная переменная,которая удерживает XML HTTP Request объект*/
    
  7. var nnmAjax = null;
    
  8. 
    			
  9. /* создает независимый от типа броузера объект XML HTTP Request */
    
  10. function nnmAjaxInit()
    
  11. {   
    
  12.   if(window.XMLHttpRequest) 
    
  13.   {
    
  14.     /* Этот конструктор для Safari,Opera, Firefox */ 
    
  15.     nnmAjax = new XMLHttpRequest();
    
  16.   } 
    
  17.   else if (window.ActiveXObject)  
    
  18.   {
    
  19.     /* Этот конструктор для Internet Explorer */
    
  20.     nnmAjax = new ActiveXObject(Microsoft.XMLHTTP); 
    
  21.   }
    
  22. 
    			
  23.   /* Создаем анонимную функцию, чтобы  отслеживать состояние сервера */
    
  24.   nnmAjax.onreadystatechange = function()
    
  25.   { 
    
  26.     /* Состояние 4 обозначает, что сервер закончил обработку запроса */
    
  27.     if(nnmAjax.readyState == 4)
    
  28.     {
    
  29.        /* Статус 200 обозначает успешное завершение, 
    
  30.         * или возвращает одну из ошибок, например 404 (страница не обнаружена) */
    
  31.       if(nnmAjax.status == 200) {
    
  32.              ..запускаем нашу функцию, которая обработает ответ сервера
    
  33.              nnmAjaxReceive(nnmAjax.responseText);
    
  34.        } else {
    
  35.              alert("Error code " + nnmAjax.status);
    
  36.        }
    
  37.     }
    
  38.   };
    
  39. } 
    


Когда сервер отвечает на запрос, то устанавливется значение аттрибута onreadystatechange:
• responseXml, который содержит XML данные
• responseText содержит простой текст
Однако, ответ сервера приходит не сразу, а через какое-то время, причем такой ответ может вернуть всеми любимую Gateway ошибку или любой другой стандартный код статуса сервера

XMLHttpRequest должен послать серверу два метода:
• open(mode, url, boolean) - открывает соединение с сервером
• send(content) - отправляет запрос серверу

mode стандартные методы W3 HTTP заголовка. Довольно распространенными методами являются следующие два: “GET” - используется, когда необходимо взять данные с сервера; “POST” – когда отправляются на сервер данные из формы и особенно в тех случаях, когда размер посылаемого серверу запроса больше чем 512 байт. Другие возможные методы могут быть HEAD, PUT, DELETE, OPTIONS, TRACE, CONNECT (Пишите методы заглавными буквами, согласно спецификации).

url – представляет адрес сайта, куда посылается запрос. В силу безопасности Ajax не имеет возможности запрашивать данные с другого сервера или с другого домена. В нашем случае мы будем идти сюда (соответственно название дока будет соответствующее для каждого свое): http://doci.nnm.ru/ajax/08.03.2006/ajax_na_noname_1_teoriya_/addme.html - Ajax на NoNaMe [2]: «Hello, закладки!»" target="_blank" href="http://doci.nnm.ru/ajax/08.03.2006/ajax_na_noname_1_teoriya_/addme.html"> http://doci.nnm.ru/ajax/08.03.2006/ajax_na_noname_1_teoriya_/addme.html

boolean – Этот аргумент контролирует синхронность или асинхронность процесса, иными словами, позволено ли пользователю шнырять по углам сайта во время того, как сервер обрабатывает наш запрос. По умолчанию аттрибут выставлен в асинхронный метод – true.

content - при POST методе здесь необходимо указать поля в формате поле1=данные1& поле2=данные2 В нашем примере таких полей нет – мы ставим null.

 
  1. /*
    
  2. * запрашиваем сервер
    
  3. */
    
  4. var nnm_url = “http://doci.nnm.ru/ajax/08.03.2006/ajax_na_noname_1_teoriya_/addme.html”
    
  5. 
    			
  6. function nnmAjaxGet () {
    
  7. 	nnmAjaxInit();
    
  8. 	nnmAjax.open("GET", nnm_url, true); 
    
  9. 	nnmAjax.send(null); 
    
  10. }
    


На этом построение Ajax закончено. Дальше – это фантазия дизайнера и программиста. В нашем примере мы просто удаляем иконку (параметр response и alert тут вообще не нужны – это для тестированя страницы я их тут поставил).

 
  1. /*
    
  2. * <DIV name=” nnmAjax_bookmarks ”> Прячем все, что находится внутри этих полей </DIV>
    
  3. */
    
  4. Function nnmAjaxReceive(response) {
    
  5. 	document.getElementById("nnmAjax_bookmarks ").innerHTML = “”;
    
  6.         //alert(response);
    
  7. }
    


Непосредственно сама веб страница – пользовательский интерфейс. Ничего тут особенного не меняется кроме того, что мы просто меняем ссылку на JavaScript код, который отслеживает событие onClick.

 
  1. /**
    
  2.  * NoName Webpage
    
  3.  * Старая страница
    
  4. **/
    
  5. 
    			
  6. <!- start old button ->
    
  7.      <a http://doci.nnm.ru/ajax/08.03.2006/ajax_na_noname_1_teoriya_/addme.html" 
    
  8.            title="Добавить в закладки">
    
  9.      <img src="http://www.nnm.ru/imagez/icons/addme.gif" 
    
  10.             alt="Добавить в закладки" 
    
  11.             style="vertical-align: middle;" border="0">
    
  12.      </a>
    
  13. <!- end old button ->
    


В новом коде нам необходимо определить зону, где находится кнопка, чтобы потом с помощью DOM ее отыскать на странице. Имя этой зоны должно быть уникальным для конкретной страницы. В нашем случае только одна кнопка добавления закладок на странице, поэтомы мы не будем мудрить сложного генерирования уникального имени , а просто назовем: nnmAjax_bookmarks.

 
  1. /**
    
  2.  *  NoName Webpage
    
  3.  * Обновленная страница
    
  4. **/
    
  5. 
    			
  6. <!- start new button ->
    
  7.      <div name=”nnmAjax_bookmarks“>
    
  8.            <a href="#" onClick="nnmAjaxGet ()"
    
  9.                title="Добавить в закладки">
    
  10.                <img src="http://www.nnm.ru/imagez/icons/addme.gif" 
    
  11.                      alt="Добавить в закладки" 
    
  12.                      style="vertical-align: middle;" border="0">
    
  13.            </a>
    
  14.       </div>
    
  15. <!- end new button ->
    
  16. 
    			


Удачи в ваших веб творениях!




Комментарии

 Ваш комментарий к данному материалу будет интересен нам и нашим читателям!



Последние статьи: Web - программирование / AJAX /

Asynchronous JavaScript and XML
06-12-2009   

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

Кол. просмотров: общее - 2963 сегодня - 0

AJAX. Взаимодействие с жизненным циклом страницы
06-12-2009   

Итак, запись в таблице отредактирована, осталось её сохранить. Первое, что приходит на ум - это целиком AJAX решение, когда данные собираются из редактируемой строки DataGrid, отправляются на сервер, и в случае успеха клиентская PostBack функция перерисовывает строку таблицы уже только для просмотра... подробнее

Кол. просмотров: общее - 2941 сегодня - 0

xAJAX: Легкий AJAX в массы
03-12-2009   

Не так давно я говорил, что буду предоставлять информацию относительно PHP и Ajax. На конференции которую я провел на прошлой неделе 10 ноября 2005г. Я также обещал людям что переведу все что я приготовил для публикации на моем блоге (автор так и не перевел все это дело на Голландский, тем самым очень мне облегчил перевод )... подробнее

Кол. просмотров: общее - 3061 сегодня - 0

«Hello, закладки!» - Добавить в закладки на AJAX
03-12-2009   

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

Кол. просмотров: общее - 234566 сегодня - 0

Simple AJAX Code-Kit (SACK) и движок DataLife
03-12-2009   

Рыская в интернете в поисках Ajax-готового новостного движка, я наткнулся на давно всем известный . Хотя этот довольно продвинутый php ресурс и содержит элементы Ajax, они по-моему не до конца раскрыты и используются довольно скупо... подробнее

Кол. просмотров: общее - 3188 сегодня - 0



  WWW.COMPROG.RU - 2009-2012 | Designed and Powered by Zaipov Renat | Projects