Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Общие вопросы > XMLHttpRequest


Автор: Opik 1.6.2005, 18:19
вот пишу чат, понравилась эта технология, вот только немного не пойму как её присобачить smile
Непонятки именно с обновлением чата. Т.е пользователь пишет мессаку, ждем ок, доюбавляется мессага, и сразу же делается вывод своей + новые. а как сделать автообновление? Обновлять невидимый фрейм? Зачем тогда XMLHttpRequest? Объясните кто нибудь технологию чата с использованием XMLHttpRequest?

Автор: Sardar 1.6.2005, 19:13
Через XMLHttpRequest(или любой другой компонент) ты постоянно опрашиваешь сервер за новыми мессагами. Отправляя инфу(пост, сообщение) ты по прежнему опрашиваешь сервер о новых мессагах. Получив инфу DOM'ом вставляем её в окно чата.

Где конкретно не ясно?

Автор: Opik 1.6.2005, 19:35
Sardar
Автообновление. Раньше оно делалось в невидимом фрейме.
Цитата
Через XMLHttpRequest(или любой другой компонент) ты постоянно опрашиваешь сервер за новыми мессагами.

где его опрашивать!?

Автор: Sardar 1.6.2005, 19:42
Цитата(Opr @ 1.6.2005, 18:35)
Раньше оно делалось в невидимом фрейме.

Угу, а теперь представь что это же автообновление делаеться XMLHttpRequest. Вызывая send, ты опрашиваешь сервер передавая ему параметры GET'ом или POST'ом, в идеали в результате приходит валидный XML, хотя не обязательно. Делаешь запрос( смотри в любом примере, хотя бы в топиках ниже, много раз показывалось), получаешь инфу. Эту инфу показываешь юзеру, попутно форматируя как тебе нравиться. Если пришёл валидный XML, то вообще красота, юзай XPath для выборки того что тебе нужно.

Чую тебе не ясен сам механизм... Посмотри эту софтинку: http://forum.vingrad.ru/index.php?showtopic=53606
Кстати JSInteractiveRequest работать будет и под старыми браузерами.

Автор: Opik 1.6.2005, 22:04
Sardar
Читал. Ты меня немного не понимаешь. Смотри, мне нужно автообновление, так? так. Значит нужно что бы всё таки что то обновлялось. Что?
XMLHttpRequest я хочу прикрутить в тот фрейм, где строка ввода. Но не буду же я обновлять этот фрейм всегда. Я не пойму как сделать автообновление.

Автор: Black 1.6.2005, 22:19
Opr
Вот код из моего чата:

Код

// функция для посылки запросов на сервер
setInterval('LoadData(\"refresh.php\")', 6000);

function LoadData(url)
{
    // для браузера Mozilla, Firefox
    if (window.XMLHttpRequest)
    {
        GetData = new XMLHttpRequest();
        GetData.onreadystatechange = processChange;
        GetData.open('post', url, true);
        GetData.send(null);

    // если браузер IE (проверям наличие ActiveX)
    } else if (window.ActiveXObject)
      {
        GetData = new ActiveXObject('Microsoft.XMLHTTP');
        if (GetData)
            {
            GetData.onreadystatechange = processChange;
            GetData.open('post', url, true);
            GetData.send();
            }
      }
}

// функция следит за изменением статуса запроса и выполняет полученный JavaScript код
function processChange()
{
    // только при состоянии 'complete'
    if (GetData.readyState == 4)
       {
        // для статуса 'OK'
        if (GetData.status == 200)
           {
            // получаем данные ответа сервера
            CodeScript = GetData.responseText;
            // выполняем Java-Script код
            eval(CodeScript);
           }
       }
}


CodeScript - в эту переменную возвращай код скрипта, т.е. как обычно код который допишет при помощи DOM новую строку в чат



Добавлено @ 22:22
Opr

Цитата
начит нужно что бы всё таки что то обновлялось. Что?


ну XMLHttpRequest - это и есть технология которая ничего не обновляет.. ты вероятно ее немного не понял.. все делает эта строка:

Код

setInterval('LoadData(\"refresh.php\")', 6000); 


которая сама обновляет все через 6 сек

причем refresh.php - это есть путь к скрипту который должен отдавать новые сообщения

XMLHttpRequest - посылает скрытые GET или POST запросы без обновления страницы и может получить ответ в ту страницу из которой оно было вызвано. Вообще-то классная технология, все мои скрипты на ней работают

Автор: Sardar 1.6.2005, 22:46
Цитата(Opr @ 1.6.2005, 21:04)
Значит нужно что бы всё таки что то обновлялось. Что?

Дык ты по интервалу в скунд 5-10 обращаешся к серверу через XMLHttpRequest. Этот обьект обращаеться к серверу, фрейм не перезагружаеться и вообще фрейм не нужен, ну разве как элемент дизайна smile


Смотрим код PHP-DIRECTOR, видим как он каждые 6 секунд опрашивает сервер, загружая некий исходник и кидая его на eval.
Я бы конечно не советовал передавать исходник JS, что мешает отослать нормальный валидный XML? По XML'у на клиенте генерим мессагу с разметкой и показываем юзеру.

Короче механизм такой: фреймы в стороне, они не нужны. Обьект XMLHTtpRequest может делать запросы к серверу(для того он и создавался) и может подгружать вывод сервера. Вывод ты можешь получить и заюзать как угодно. Посылать инфу можно как и в формах GET'ом или POST'ом.
Добавлено @ 22:47
Упс, PHP-DIRECTOR уже залил второй пост smile

Автор: Black 1.6.2005, 22:54
Sardar
а мне кажется что отдавать скрипт выгоднее... это меньше места занимает в Кб.

Например на странице где расположен XMLHttpRequest есть функция которая добавляет мессаги, и мы ее запускаем через eval(). Т.е.

Код

function NewMess(mess,login)
{
ла ла я хожу ищу кота и дописываю сообщения в чат
}


А в eval() отдавать нечто вроде:

mess['','',''] - массив новых сообщений
login['','',''] - массив логинов
NewMess(mess,login) - запускаем функцию для добавления новых месаг в чат.

Вообщем, так мой чат работает smile
Не жалуюсь. Траффик минимальный.

Автор: Sardar 1.6.2005, 23:12
[флейм]

Цитата(PHP @ 1.6.2005, 21:54)
а мне кажется что отдавать скрипт выгоднее... это меньше места занимает в Кб

Угу, но это есть большой "не хорошо" smile Стереотипы.

Я бы отдавал просто массив с инфой, который попробовал бы распарсить... Люблю парсинг smile

[/флейм]

Автор: Opik 1.6.2005, 23:31
Мне нужно было только :
Код

setInterval('LoadData(\"refresh.php\")', 6000);

Добавлено @ 23:31
ТОлько теперь другой вопрос, в чем собственно выигрыш в скорости!?

Автор: Sardar 1.6.2005, 23:46
Не отдаём бродилке рендерить всю получаемую лажу как при загрузке всей страницы. И кстати кто сказал что будет быстрее в скорости? smile Будет незаметно, без щёлчков в ИЕ, плавно подгружаться контент, это удобно.

Автор: Opik 2.6.2005, 00:47
Sardar
http://mysitez.km.ua/Programming/?jshttpsend тут внизу smile
Цитата
Не отдаём бродилке рендерить всю получаемую лажу как при загрузке всей страницы

в том же фрейме можно "выводить" только нужную инфу smile

Автор: Sardar 2.6.2005, 01:06
Цитата(Opr @ 1.6.2005, 23:47)
Sardar
http://mysitez.km.ua/Programming/?jshttpsend тут внизу

Одно и тоже переписываемое почти слово в слово. Новых, не надуманных примеров народ не выкладывает. Допишу свой JSInteractiveRequest, вовзьмусь за общую клиентскую сторону чата(не обещаю в ближайшем будущем).

Цитата(Opr @ 1.6.2005, 23:47)
в том же фрейме можно "выводить" только нужную инфу

От это я и пытался втереть smile А фреймы лучше убрать и использовать слои overflow: auto

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

Автор: Black 2.6.2005, 01:28
Opr

Цитата
в том же фрейме можно "выводить" только нужную инфу


ну не обязательно именно в том фрейме где запускаем XMLHttpRequest через JavaScripts можно залезть и в другие фреймы smile


Цитата
ТОлько теперь другой вопрос, в чем собственно выигрыш в скорости!?


Мы не перезагружаем страницу - экономим траффик, + еще в строке состояния не появляется строка загрузки страницы. Все выглядит так как будто ничего не происходит :-) однако в тени XMLHttpRequest делает свое грязное дело smile

Автор: Opik 2.6.2005, 10:32
PHP-DIRECTOR
А кто сказал, что кто то перегружает страницу? в форме отправки ссылка идет на скрытый фрейм - он и обовляется (То же самое, что и при XMLHttpRequest обноввляется 1 скрипт ). И в том скрипте через JS очищается строка ввода.
Добавлено @ 10:35
Цитата
А фреймы лучше убрать и использовать слои overflow: auto

чем лучше? smile

Автор: Sardar 2.6.2005, 12:47
Opr уговаритать не буду smile smile smile

Цитата(Opr @ 2.6.2005, 09:32)
То же самое, что и при XMLHttpRequest обноввляется 1 скрипт

Никаких скриптов не обновляеться, ты не понял механизма smile

Автор: Black 2.6.2005, 12:57
Цитата
форме отправки ссылка идет на скрытый фрейм - он и обовляется

Ну XMLHttpRequest лучше ифреймов. Он меньше памяти заставляет пожирать браузер и не гадит в history браузера. И нет этих щелчков. Ох как они раздражают если чат обновляется каждые 5 сек smile

А фреймы надо избегать, т.к. они не правильно отображаются разными браузерами. Особенно проблемы с их рамками. Все браузеры рисуют их по разному.

Да и организация W3C рекомендует от них отказаться.

Действительно самый современный чат должен быть на

1) слоях (div) вместо таблиц.
2) Вместо фреймов - overflow: auto
3) Вместо ифреймов - XMLHttpRequest
4) На языке XHTML 1.0

Автор: Opik 2.6.2005, 13:19
PHP-DIRECTOR
Цитата
3) Вместо ифреймов - XMLHttpRequest

А кто сказал, что iframe? =)
Цитата
Никаких скриптов не обновляеться, ты не понял механизма

ну посылается запрос на скрипт, он всё равно скрипт как бы "обновляется" заного smile
Цитата
2) Вместо фреймов - overflow: auto

Юзая фреймы, на примере списка онлайн юзеров, просто обновляем фрейм. Как же быть если там слой? (div, overflow)?
Посылать тот же XMLHttpRequest, только на список пользователей и инсертить в слой?
Цитата
4) На языке XHTML 1.0

в чем отличие?
Добавлено @ 13:22
Цитата
в чем отличие?

задам вопрос подругому: в чем сходство?)))))

Автор: Opik 2.6.2005, 14:11
http://opik.ru/js/frame.html что то типо того что ли?
Код

<?xml version="1.0" encoding="windows-1251"?>
<!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" xml:lang="en-ru" lang="en-ru">
 <head>
    <title>Testing frame</title>
       <style type="text/css">
   html, body 
   { 
        height: 100%; 
        margin: 0; 
        padding: 0;
   } 

   .message
   {
        position: absolute;
        width: 80%;
        height: 93%;
        overflow: auto;
        border: #000000 1px solid;
   } 
   .online
   {
        width: 20%;
        position: absolute;
        top: 0;
        left: 80%;
        overflow: auto;
        height: 93%;
        border: #000000 1px solid;
   }  
   .input
   {
    position: absolute;
        overflow: auto;
        width: 100%;
        height: 7%;
        border-width: thick; 
        border: #000000 1px solid;
    left: 0;
    bottom: 0;
   }   

</style>
 </head>
<body>
<div class="message">message</div><div class="online">online</div>
<div class="input">input</div>
</body>
</html>

Однако, при первой загрузки слои как то съезжают...

Автор: Opik 2.6.2005, 16:42
Вопрос. как прогрукрутить скроллинг вниз у div: overflow : auto?

Автор: Рыжий 2.6.2005, 18:03
Цитата(Opr @ 2.6.2005, 15:42)
Вопрос. как прогрукрутить скроллинг вниз у div: overflow : auto?

Ну например можно в css прописать:

Код

<style type="text/css">
#chatwindow {
  overflow-y: scroll;

©Sardar

chatwindow - это id div'a.

Автор: Aliance 2.6.2005, 18:37
Opr
В новом топике...

Средствами JS?

Автор: Opik 2.6.2005, 18:39
Скроллинг то есть, его нужно прокрутить вниз.

Автор: mickron 3.6.2005, 00:21
кстати, когда пытался писать чат smile) на этом реквесте,
тоже натолкнулся на скроллинг в диве...

Автор: Sardar 3.6.2005, 00:35
Юзаем свойство scrollTop:
Код
<div id="test" style="position: relative; width: 20%; height: 100px; overflow: auto">
text text text text text text text text text text text text text text 
text text text text text text text text text text text text text text 
<br>text text text text text text text text text text text text text text 
<br>text text text text text text text text text text text text text text 
<br>text text text text text text text text text text text text text text 
<br>text text text text text text text text text text text text text text 
<br>text text text text text text text text text text text text text text
</div> 
<script type="text/javascript">
<!--
var d=document.getElementById("test");
var tmr=window.setInterval(function() {
 d.scrollTop+=3;
}, 1000);
//-->
</script>


А теперь офтоп закончили, все вопросы не в тему в новом топе smile

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)