Компьютерный форум NoWa.cc

Приветствую всех тех кому эта статья поможет решить определенную задачу, и всех тех критиков кому эта статья покажется банальщиной. Эта статья расчитана для тех кто впервые услышал слово AJAX!

А чтобы умные люди не считали что зря потратили время открыв данную статью, рекомендую полазить по данному форуму, много чего интересного!

И так, все те кто остался ! Еще раз здравствуйте!

Что такое AJAX - Asynchronous Javascript And XML. AJAX - технология возникшая довольно-таки давно и одним из первых кто интенсивно начал ее использование - это gmail.com.AJAX позволяет создавать странички которые не перегружаются для отображения измененного содержания, или обновления базы данных. Другими словами, с помощью AJAX можно довольно-таки не сложно создавать Веб-Страницы напоминающие своим использованием обычные программы. В данной статье мы с вами создадим 4проекта:

1. Страничка с ссылками которая будет менять содержимое определенной области по нажатию на ссылку. (что-то похожее окна с фреймами)

2. Страничку входа в сайт, которая проверит валидность имени и пароля и выдаст сообщение об ошибке или переведет на другую страницу.

3. По просьбе одного читателя форума, 3 динамически заполняемых списка, учитывая что списки каждого следующего будут зависить от выбранного элемента в данном списке.

4. Отправка сообщения на E-mail с сайта.

Для освоения данной статьи требуется не высокий уровень знания JavaScript и PHP. Я не буду углубляться в синтаксис и описание команд PHP, а буду вставлять лишь общий коментарий блока кода. Мы так же не будет создавать свой класс в JavaScript для обработчика AJAX в данной статье. И так, как говориться, вперед!

Проект 1

Страница с динамически обновляемой областью не использую IFRAME и FRAME.

Для начала проекта создадим 4 файла: index.html, news.html, contact.html, services.html.

Файл index.html - будет основным и из него будут подгружаться страницы с статическим содержимым: news.html, contact.html, services.html

Структура файлов news.html, contact.html, services.html будет почти одинаковой, заисключением содержимого тега H1:

Содержимое файла contact.html:

Код:

<h1>Связь</h1>

Содержимое файла services.html:

Код:

<h1>Услуги</h1>

Содержимое файла news.html:

Код:

<h1>Новости</h1>

Структура файла index.html следующая:

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">



<html xmlns="http://www.w3.org/1999/xhtml">

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

    <title>Ajax - Урок 1</title>

                

    <script type="text/javascript">

      // ГЛОБАЛЬНЫЕ ПЕРЕМЕННЫЕ

      // переменная которая содержит в себе обработчик запросов

      var ajax;

                        

      InitAjax();

                        

      // функция инициализации Ajax компонента (XMLHttp)

      function InitAjax()

      {

      // используем структуру try..catch для попытки создать обработчик запросов XMLHTTP

      try

      {

      // пробуем создать компонент XMLHTTP для IE

      ajax = new ActiveXObject("Microsoft.XMLHTTP");

      }

      catch (e)

      {

      // если не получилось создать компонент XMLHTTP для IE прбуем следующий и т.д.

      try

      {

      // пробуем создать компонент XMLHTTP для IE версий 6 и выше

      ajax = new ActiveXObject("Msxml2.XMLHTTP");

      }

      catch (e)

      {

      try

      {

      // пробуем создать компонент XMLHTTP для Mozilla, и остальных

      ajax = new XMLHttpRequest();

      }

      catch (e)

      {

      ajax = 0;

      }

      }

      }

    }

                        

    // функция которая будет запрашивать содержимое новой страницы

    function GetPage(page)

    {

    if (ajax == 0)

    {

    alert(«Ajax не инициализирован»);

    return;

    }

    ajax.onreadystatechange = GotResponse;

    ajax.open("GET", page, true);

    ajax.send(null);

    }

                        

    // функция которая будет обрабатывать (вставлять возвращенный текст в нужную область страницы) ответ

    function GotResponse(v)

    {

    if (ajax.readyState == 4)

    {        

    if (ajax.status == 200)

    {

    var divBody = document.getElementById('Body');

    divBody.innerHTML = ajax.responseText;

    }

    else alert(ajax.status + " - " + ajax.statusText);

                        

    ajax.abort();

    }

    }

  </script>

                

<style type="text/css">

                        div#Header

                        {

                                width: 100%;

                                border-bottom: 2px solid #333333;

                                text-align: center;

                                padding: 20px 0;

                        }

                        

                        div#Menu

                        {

                                width: 200px;

                                float: left;

                        }

                        

                        div#Body

                        {

                                margin-left: 205px;

                        }



                        ul

                        {

                                list-style-type: none;

                                margin: 0;

                                line-height: 1.5em;

                        }

                        

                        h1

                        {

                                text-align: center;

                        }

                </style>

        </head>



        <body>

                <div id="Header">Ajax - Урок 1</div>

                

                <div id="Menu">

                        <ul>

                                <li><a href="javascript: GetPage('news.html');">Новости</a></li>

                                <li><a href="javascript: GetPage('services.html');">Услуги</a></li>

                                <li><a href="javascript: GetPage('contact.html');">Связь</a></li>

                        </ul>

                </div>

                

                <div id="Body">

                        <h1>Главная страница</h1>

                </div>

        </body>

</html>

Прошу обратить внимание на DIV с ID - Body, эта та часть страницы, которая будет обновляться.

Больше всего нас тут интересует часть между тегами <script>:

Код:

<script type="text/javascript">

        var ajax;

                        

        InitAjax();

                        

        function InitAjax()

        {

                try

                {

                        ajax = new ActiveXObject("Microsoft.XMLHTTP");

                }

                catch (e)

                {

                        try

                        {

                                ajax = new ActiveXObject("Msxml2.XMLHTTP");

                        }

                        catch (e)

                        {

                                try

                                {

                                        ajax = new XMLHttpRequest();

                                }

                                catch (e)

                                {

                                        ajax = 0;

                                }

                        }

                }

        }

                        

        function GetPage(page)

        {

                if (ajax == 0)

                {

                        alert(«Ajax не инициализирован»);

                        return;

                }

                ajax.onreadystatechange = GotResponse;

                ajax.open("GET", page, true);

                ajax.send(null);

        }

                        

        function GotResponse(v)

        {

                if (ajax.readyState == 4)

                {        

                        if (ajax.status == 200)

                        {

                                var divBody = document.getElementById('Body');

                                divBody.innerHTML = ajax.responseText;

                        }

                        else alert(ajax.status + " - " + ajax.statusText);

                                        

                        ajax.abort();

                }

        }

</script>

Полетели разбираться в этой куче!

Самое первое

Код:

var ajax;

Глобальная переменная, которая содержит в себе объект запросов XMLHttpRequest или самое ядро AJAXа.

Затем вызываем функцию Init()

Код:

InitAjax();

Данная функция создает нужный Ajax'у объект без которого он дышать бы не с мог. Ниже будем перемывать косточки нашей злополучной функции InitAjax()

Код:

function InitAjax()

{

        try

        {

                        ajax = new ActiveXObject("Microsoft.XMLHTTP");

        }

        catch (e)

        {

                        try

                        {

                                ajax = new ActiveXObject("Msxml2.XMLHTTP");

                        }

                        catch (e)

                        {

                                try

                                {

                                        ajax = new XMLHttpRequest();

                                }

                                catch (e)

                                {

                                        ajax = 0;

                                }

                        }

        }

}

Используя структуру try...catch мы пытаемся создать ну хоть какой-нибудь поддерживаемый обозревателем объект пересылки сообщений. В мире есть 3 объекта такого рода: Microsoft.XMLHTTP, Msxml2.XMLHTTP, XMLHttpRequest.

Microsoft.XMLHTTP - поддерживается всеми версиями Internet Explorer.

Msxml2.XMLHTTP - поддерживается версиями Internet Explorer 6 и выше.

XMLHttpRequest - поддерживается всеми остальными обозревателями (Firefox, Opera, и другие).

Структура try...catch имеет следующий синтаксис.

Код:

try

{

        код который пытаемся выполнить

}

catch (exception)

{

        а тут пишем то что будет если код выше выполнится с ошибкой

}

И так, мы пробуем 3 раза создать объект XMLHttp, ну а если у пользователей какой-нибудь хитро(кхе-кхе-кхе) обозреватель, то не будет им счастья и будет их ajax равняться нулю.

Далее рассмотрим функцию GetPage(). Данная функция будет настраивать наш ajax и посылать запрос.

Код:

function GetPage(page)        

{

        if (ajax == 0)

        {

                        alert(«Ajax не инициализирован»);

                        return;

        }



        ajax.onreadystatechange = GotResponse;

        ajax.open("GET", page, true);

        ajax.send(null);

}

Первая часть - это проверка на инвалидность. Тут все ясно, если ajax равен нулю, то посылаем умное сообщение (примеры: «Упей сипя ап стену», «Вы только что не увидили страницу которая заняла первое место в конкурсе Самые Интересные Страницы Интернета», «В папруйск таварищ», «Теперь вы можете выключить Ваш компьютер нажав на кнопку питания») и вываливаемся из функции.

Ползем дальше

Код:

ajax.onreadystatechange = GotResponse;

компонент ajax имеет переменную onreadystatechange хранящую в себе функцию которая будет вызвана в момент получения ответа или изменения статуса ajax о котором мы поговорим чуть-чуть попозже.

Далее все намного проще:

Код:

ajax.open("GET", page, true);

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

Код:

ajax.send(null);

Здесь все почти ясно, посылаем запрос. Единственный аргумент - это содержимое которое ты хочешь отправить серверу в случае POST запроса.

Фух. Передых на 5 минут! :beer:

Код:

function GotResponse(v)

{

                if (ajax.readyState == 4)

                {        

                        if (ajax.status == 200)

                        {

                                var divBody = document.getElementById('Body');

                                divBody.innerHTML = ajax.responseText;

                        }

                        else alert(ajax.status + " - " + ajax.statusText);

                                        

                        ajax.abort();

                }

}

Функция GotResponse вызывается тогда, когда Ajax меняет свой статус. Статус описывает переменной readyState (НЕ ПУТАТЬ С ПЕРЕМЕННОЙ status). Всего существует 5 статусов:

0 - стоит и курит тихо в углу (ajax только что создали и еще ничего не попросили сделать)
1 - загружаем ajax работкой
2 - загрузили ajax работой
3 - пытается наш ajax все наши просьбы удовлетворить
4 - удовлетворил

Нам нужен будет только статус 4, для этого в функции и стоит проверка:

Код:

if (ajax.readyState == 4) { }

Ладно, справиться, то он - справился, но как? Это нам и покажет переменная status компонента XMLHttp. status - данная переменная содержит в себе HTML код нашего запроса, например: 404 - страница не найдена, 200 - все окей, работаем дальше.
Описание результата работы ajax можно найти в переменной: statusText. Примеры содержимого: Not found или ОК соответственно.

Далее в нашей функции мы и проверяем на то, как ajax справился:

Код:

if (ajax.status == 200)

{

        var divBody = document.getElementById('Body');

        divBody.innerHTML = ajax.responseText;

}

else alert(ajax.status + " - " + ajax.statusText);

Если все хорошо и статус 200, то находим DIV используя функцию JavaScript - getElementById(), посылая в нее ID того тега, который мы хотим найти и вернуть в переменную. Когда делали разметку index.html, мы как раз и назвали один из наших тегов Body. Нашли, вернули, теперь используя переменную innerHTML объекта DIV, мы можем управлять содержимым данного раздела.

Ajax так же имеет переменную responseText, которая содержит ответ сервера на попытку вызова страницы. Проще говоря, мы попросили открыть его определенную страницу и если все прошло хорошо, то содержимое данной страницы (после обработки сервером, если это PHP или Perl, или нечто похожее) будет у нас в переменной responseText.

Ну, а если ajax вернул другой ответ от сервера (не 200), то просим его показать его с описанием ответа.

Код:

ajax.abort();

Последняя строка в данной функции - сбрасывает компонент Ajax, подготавливая его тем самым к новым запросам!

Вот вообщем и все для начала! Это моя первая статья, жду ваших пожеланий, коментариев, и все что хотите мне сказать!

Специально для NoWa.cc от OlegRom aka ::: XD :::