«Hello, закладки!» - Добавить в закладки на AJAX : Программирование для всех. Языки программирования, программирование баз данных, технологии. Статьи для програмиста скачать бесплатно учебники книги документация форум : Статьи

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

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

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

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

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

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

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

```
/**
```
```
 * На HTML странице NoName 
```

 * установите єтот код между тєгами <HEAD>

```
**/
```

<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, что позволяет нам создать два выбора:

```
/*
```
```
 *  nnmAjax.js
```
```
 */ 
```

/* наша основная переменная,которая удерживает XML HTTP Request объект*/

```
var nnmAjax = null;
```

/* создает независимый от типа броузера объект XML HTTP Request */

```
function nnmAjaxInit()
```
```
{   
```
```
  if(window.XMLHttpRequest) 
```
```
  {
```

    /* Этот конструктор для Safari,Opera, Firefox */

```
    nnmAjax = new XMLHttpRequest();
```
```
  } 
```
```
  else if (window.ActiveXObject)  
```
```
  {
```

    /* Этот конструктор для Internet Explorer */

    nnmAjax = new ActiveXObject(Microsoft.XMLHTTP);

```
  }
```

  /* Создаем анонимную функцию, чтобы  отслеживать состояние сервера */

  nnmAjax.onreadystatechange = function()

```
  { 
```

    /* Состояние 4 обозначает, что сервер закончил обработку запроса */

```
    if(nnmAjax.readyState == 4)
```
```
    {
```

       /* Статус 200 обозначает успешное завершение,

        * или возвращает одну из ошибок, например 404 (страница не обнаружена) */

```
      if(nnmAjax.status == 200) {
```

             ..запускаем нашу функцию, которая обработает ответ сервера

             nnmAjaxReceive(nnmAjax.responseText);

```
       } else {
```

             alert("Error code " + nnmAjax.status);

```
       }
```
```
    }
```
```
  };
```
```
} 
```

Когда сервер отвечает на запрос, то устанавливется значение аттрибута 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

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

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

```
/*
```
```
* запрашиваем сервер
```
```
*/
```

var nnm_url = “http://doci.nnm.ru/ajax/08.03.2006/ajax_na_noname_1_teoriya_/addme.html”

```
function nnmAjaxGet () {
```
```
	nnmAjaxInit();
```
```
	nnmAjax.open("GET", nnm_url, true); 
```
```
	nnmAjax.send(null); 
```
```
}
```

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

```
/*
```

* <DIV name=” nnmAjax_bookmarks ”> Прячем все, что находится внутри этих полей </DIV>

```
*/
```
```
Function nnmAjaxReceive(response) {
```

	document.getElementById("nnmAjax_bookmarks ").innerHTML = “”;

```
        //alert(response);
```
```
}
```

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

```
/**
```
```
 * NoName Webpage
```
```
 * Старая страница
```
```
**/
```
```
<!- start old button ->
```

     <a http://doci.nnm.ru/ajax/08.03.2006/ajax_na_noname_1_teoriya_/addme.html"

           title="Добавить в закладки">

     <img src="http://www.nnm.ru/imagez/icons/addme.gif"

            alt="Добавить в закладки"

            style="vertical-align: middle;" border="0">

```
     </a>
```
```
<!- end old button ->
```

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

```
/**
```
```
 *  NoName Webpage
```

 * Обновленная страница

```
**/
```
```
<!- start new button ->
```

     <div name=”nnmAjax_bookmarks“>

           <a href="#" onClick="nnmAjaxGet ()"

               title="Добавить в закладки">

               <img src="http://www.nnm.ru/imagez/icons/addme.gif"

                     alt="Добавить в закладки"

                     style="vertical-align: middle;" border="0">

```
           </a>
```
```
      </div>
```
```
<!- end new button ->
```

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

При разработке CMS S.Builder наша команда активно использовала AJAX. Теперь вот решили поделиться накопленным опытом. Начнем с этого хабратопика. Не буду здесь затрагивать различные фреймворки и библиотеки. Свой код всегда роднее. Для работы с AJAX-ом в S.Builder написана библиотека sbAJAX. Можете качать и пользоваться :). В этом файле есть функция sbEvalJS. Для тех, кто не знает, объясню. При подгрузке через AJAX и вставке на страницу HTML-кода, содержащего JavaScript, JavaScript выполняться не будет или полезут баги. Эта функция как раз решает поставленную задачу.

Обзор нового релиза самой мощной Ajax библ....

Хотя наш обзор немного запоздал, оригинальный Dojo 1.2 вышел в релизной версии ещё 6-го октября, но сейчас мы наверстаем упущенное. И так, Dojo Toolkit — это самая мощная и гибкая ajax-библиотека из всех, что есть на рынке, она активно развивается и имеет большое комьюнити. Кстати, это самое комьюнити, совместно с компанией Sitepen, имеет ещё несколько проектов, среди которых и Cometd и некоторые другие, не менее интересные, о которых мы скоро вам расскажем. Сегодня же все внимание на флагманский продукт — Dojo 1.2.

Если вы профессиональный веб-разработчик и постоянно имеете дело с разработкой и отладкой сложных AJAX приложений, то наверняка знаете и используете Firebug — плагин для браузера Firefox, предназначенный для отладки и исследования веб-приложений. Текущая его версия, 1.2х достаточно стабильная и функциональна, чтобы помочь в 99% проблем, которые могут возникнуть при разработке. Но и этот инструмент не лишён если не недостатков, то некоторых фич, которые могли бы облегчить работу. И даже идеальный инструмент можно сделать ещё более идеальным, как бы это не звучало.