Контакты

Для связи с нами можно использовать:
irc://irc.chatnet.ru:#gfs
icq://546460
email://cobalt[@]gfs-team.ru

Все материалы предоставлены только с ознакомительной целью
ГлавнаяСтатьиКодингHTA и AJAX
© Cobalt 14.03.2007 статья не оптимизирована

 Эта статья не притендует на то чтобы быть полным мануалом по технологиям HTA,
AJAX и DHTML. В первую очередь это скорее всего введение в эти технологии.
Ниже изложеный материал призван показать вам возможности и цели их применения.
Посему и пример, выбранный для этой статьи, не столь практический, сколь
теоретический. Мы с вами попробуем создать систему мгновенных сообщений. Наша
система конечно во многом будет уступать темже ICQ и MSN, но зато позволит
паказать на примере возможности связки HTA + AJAX + DHTML.

 И так, что будет представлять собой наша Система Мгновенных Сообщений:
1. У нас будет сервер, который будет хранить сообщения.
2. У нас будет клиент реализованый на HTA.
3. Запросы к серверу будут передаваться по средствам AJAX.

С точки зрения пользователья это будит выглядить так: в окне "клиента" набираем
сообщение и нажимаем кнопочку "отправить". На другом компьютере в окне клиента
появится наше сообщение. Как видите, тут нет ни системы контактов, ни истории
сообщений ни прочих наваротов. Для нашей цели они и не нужны. Но ни что не мешает
вам доработать систему, и получить все "навароченые" функции которые вы хотите.

 Начнем с сервера. В принципе это единственная запись в БД. Т.е. некий скрипт,
при получении опеределенного параметра будет заносить эту запись в БД, а
при получении другого параметра выдавать ее на экран. И ВСЕ ! больше ни чего не
требуется. При минимальном знании php или asp.NET написать такое не составит
труда любому. По этому не будем зацикливаться на этом, а перейдем сразу к клиенту.

 Клиент мы будем писать с использованием технологии HTA. HTA - HTML Application.
Т.е. это обычный HTML но который выполняется не в браузере а в отдельном окошке,
как обычное приложение. Так что нам нет необходимости изучать "сложные" языки
програмирования, такие как c++ и delphy =). Чтобы HTML код стал приложением HTA,
необходимо создать файл с расширением .hta и забить в него следущее:

<html>
<head>
<title>Клиентская часть</title>
<HTA:APPLICATION
ID="oHTA"
BORDER="Dialog"
BORDERSTYLE="sunken"
CAPTION="yes"
MAXIMIZEBUTTON="no"
MINIMIZEBUTTON="yes"
SCROLL="no"
ICON="img/info.ico"
SHOWINTASKBAR="yes"
SYSMENU="yes"
NAVIGABLE="yes"
VERSION="2.0"
WINDOWSTATE="normal" />
</head>
<body>
<textarea name=mess id=mess></textarea><br>
<input type=button value=Послать onClick="sendM();">
</body>
</html>

Вот так обычная HTML страница превращается в HTA приложение =). При желании
сюда можно добавить свои стили, картинки и JavaScript.

Теперь наполним наш клиент функциональностью. Для этого реализуем код функции
sendM(). Она у нас будет отсылать введенное сообщение на сервер где оно и будет
храниться. Т.к. в приложении HTA использовать методы форм не представляется
возможным (вернее представляется но вопервых, не отвечает нашим требованиям, а
во вторых не совсем коректно), то мы будем испольдля отправки данных Ajax.

 AJax - это Active JS and XML. Эта технология позволяет обмениваться данными
с сервером без перезагрузки страницы. Для того чтобы его использовать необходимо
создать объект:

function newAJAX(){     // функция для создания объекта AJax
        var request = false;
        try {
          request = new XMLHttpRequest();
        } catch (trymicrosoft) {
          try {
            request = new ActiveXObject("Msxml2.XMLHTTP");
          } catch (othermicrosoft) {
            try {
              request = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (failed) {
              request = false;
            }
          }
        }
        if (!request){
          alert("Error initializing XMLHttpRequest!");
        }
        return(request);
}

var httpAJAX = newAJAX();

 Эта функция вернет нам готовый к применению объект Ajax. Но чтобы его использовать
нам потребуется еще пара функций:

function getAJAX(ajax,ur){

        ajax.open("GET", ur, true);
        ajax.onreadystatechange = updatePage;
        ajax.send(null);
}

 Разберем эту функцию поподробнее. getAJAX получает в качестве аргументов два
параметра. ajax - объект AJAX и url - URL запрашиваемого скрипта.
ajax.open - открывает соединение с сервером и указывает используемый метод GET.
ajax.onreadystatechange - указывает какая функция будет вызываться когда
будут готовы данные. Так что создаем эту функцию:

function updatePage(){
 if (httpAJAX.readyState == 4) {       // если готов ответ
   if (httpAJAX.status == 404) alert("AJAX: Request URL does not exist");
   if (httpAJAX.status != 200) alert("AJAX: status code is " + httpAJAX.status);
   var response = httpAJAX.responseText;
   var textar=document.getElementById('mess');  // наш элемент textarea
   textar.value=response;
 }
}

 Ну м как вы наверно уже догадались, реализация самой sendM() довольно проста:
вызвать getAjax с нужными параметрами. Для примера наш скрипт на сайте реализован
на php и выглядит примерно так:

<?
 if($_GET["send"]){
   // заносим в базу значение $_GET["send"]
   // и выводим на экран значение из базы
 }elseif($_GET["put"]){
   // выводим на экран значение из базы
 }
?>

Тогда функция будет выглядить так:

function sendM(){
   var url="http://server/script.php?send="+document.getElementById('mess').value;
   getAJAX(httpAJAX,url);
}

 Ну вот и остается только чтобы наша страница через определенные интервалы
времени вызывала через AJAX наш скрипт с параметром put чтобы получать сообщения
от других пользователей.
 В принципе при желании сюда можно добавить систему контактов и возможность
хранения истории сообщений на сервере... Но пусть это будет вашим домашним
заданием =).




© Cobalt 14.03.2007 статья не оптимизирована

e-Commerce Partners Network
domov0y написал:

собрал файл методом "копировать вставить" (до этого пытался написать свое). НЕ РАБОТАЕТ. точнее работает только если скрипт сформирован, как ответ сервера. Причем именно того куда смотрят все адреса аякс. т.е. если подменить страницу полученую с 127.0.0.1 то и обратиться можно только к нему

Ник:

Текст:
P Br B I Qute



Код: обновить
Последние комментарии
18.11.2017 18:42:56 ViktorTap написал:
Zof edifam Weque ...
Пишем guestbook
18.11.2017 14:18:50 EvseyEdich написал:
groomma st plazoni ...
Пишем guestbook
18.11.2017 12:08:52 IrineyVep написал:
Seew pere Inoguic ...
Пишем guestbook
Реклама

Тут должна была быть ваша реклама, но мы потеряли глиняную табличку с ее текстом. SapeId: 665044

Rambler's Top100