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


Автор: Black 19.6.2005, 00:37
Скрипт:

Код

// Скрипт для отправки запросов на сервер без обновления страницы методом POST.
// Author: PHP-DIRECTOR <black@wmtime.ru>
// Протестировано в IE 6.0, FireFox 1.0, Opera 8.01

function createRequestObject()
{
if (window.XMLHttpRequest) { var obj = new XMLHttpRequest(); }
else {
        var obj = new ActiveXObject('Msxml2.XMLHTTP');
        if(!obj) { var obj = new ActiveXObject('Microsoft.XMLHTTP'); }
     }
return obj;
}

function ReLoad(url,data)
{
 var Req = createRequestObject();
 Req.onreadystatechange = function(){if(Req.readyState==4&&Req.status==200) { eval(Req.responseText); }};
 Req.open('POST',url,true);
 Req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
 Req.send(data);
}

setInterval('ReLoad("name.php","name1=value1&name2=value2")', 5000);


Данный код посылает данные методом POST на сервер без перезагрузки страницы.
Причем посылка данных происходит каждые 5 сек через setInterval.

Но это всего лишь пример. Можно и без постоянных обновлений послать запросы.
Вообщем, я показал пример. Ваша задача оклиматизировать его под ваши веб-приложения.

Надеюсь, этот код будет кому-то полезен.

Ответ от сервера должен содержать JavaScript-код который будет выполнен на странице через eval()

Если будете использовать скрипт в ваших проектах желательно сохранять копирайт или хотя бы меня известите.

Работает в MSIE 6.0, FireFox 1.0, Opera 8.01

Автор: Irokez 19.6.2005, 00:50
а если у меня имеется форма и требуется послать все поля из этой формы .. мне как, упаковывать все данные в виде строки: name1=value1&name2=value2?

Автор: Black 19.6.2005, 01:08
Цитата
а если у меня имеется форма и требуется послать все поля из этой формы .. мне как, упаковывать все данные в виде строки: name1=value1&name2=value2?


Да. Каждому элементу формы можно дать id, затем при нажании на опр. кнопку на которую мы повесим функцию, которая пробежит по всем полям формы.

Код

var name1 = document.getElementById(id).value;


а затем сформируем переменную data

Код

url = 'name.php';
data = 'name1='+name1+'&name2='+name2 и т.д.


затем все данные скормим приведенному выше скрипту.

Код

ReLoad(url,data);

Автор: Irokez 19.6.2005, 01:27
Цитата(PHP @ 19.6.2005, 01:08)
Да. Каждому элементу формы можно дать id, затем при нажании на опр. кнопку на которую мы повесим функцию, которая пробежит по всем полям формы.

не вряд ли smile лучше по-другому получить элементы.. через массив form[]
но вопрос в другом: отправятся ли данные если:
а) много полей
б) большой объем информации, например текст (содержащий переход на новую строку)

Автор: Black 19.6.2005, 01:39
Irokez
Цитата
лучше по-другому получить элементы.. через массив form[]

ну это кто во что горазд smile

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

да отправятся.

Цитата
например текст (содержащий переход на новую строку)

необходимо преобразовать в UTF-8, иначе будут глюки.

Необходимо каждое поле формы пропустить через:
encodeURIComponent(element);

а затем сформировать date где все данные скрепить через &
но не надо саму переменную date пропускать через encodeURIComponent(element);

Автор: Irokez 19.6.2005, 02:05
Цитата(PHP @ 19.6.2005, 01:39)
а затем сформировать date где все данные скрепить через &
но не надо саму переменную date пропускать через encodeURIComponent(element);

т.е. data..
а ошибки 414 too long request не будет? smile

Автор: Sardar 19.6.2005, 02:32
Кодом всё сказанное выше:
Код
<form id="test">
<input type="text" name="tt">
<input type="checkbox" name="ch" value="bla bla">
<input type="radio" name="rd" value="r1">
<input type="radio" name="rd" value="r2">
<input type="radio" name="rd" value="r3">

<input type="button" onclick="alert(encodeForm(this.form));" value="test">
</form>
<script type="text/javascript">
<!--
// Скрипт для отправки запросов на сервер без обновления страницы методом POST.
// Author: PHP-DIRECTOR <black@wmtime.ru>
// 
// getInputValue and encodeForm by Sardar <sardar@vingrad.ru>
//
// Протестировано в IE 6.0, FireFox 1.0, Opera 8.01
function createRequestObject() {
  if (window.XMLHttpRequest) return new XMLHttpRequest();
  try {
    return new ActiveXObject('Msxml2.XMLHTTP');
  } catch(e) {
    return new ActiveXObject('Microsoft.XMLHTTP');
  }
}

function ReLoad(url ,data) {
 var Req = createRequestObject();
 Req.onreadystatechange = function(){if(Req.readyState==4&&Req.status==200) { alert(Req.responseText); }};
 Req.open('POST',url,true);
 Req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
 Req.send(data);
}

function encodeForm(form) {
  if(!form||!form.elements) throw "encodeForm: error, argument is not a FORM";
  var ret=[], el;
  for(var i=0; i<form.elements.length; i++) {
    el=form.elements[i];
    if("checkboxradio".indexOf(el.type)>=0) {if(el.checked) ret[ret.length]=getInputValue(el);}
    else if(el.type!="button"&&el.type!="submit") ret[ret.length]=getInputValue(el);
  }
  return ret.join("&");
}

function getInputValue(inp) {
  if(typeof(inp.nodeName)=="undefined") { //collection of radio
    for(var i=0; i<inp.length; i++)
      if(inp[i].checked) return (inp[i].name? encodeURIComponent(inp[i]).name+"=":"") + encodeURIComponent(inp[i].value);
    return "";
  }
  if(inp.type=="select-multiple") {
    var ret=[];
    for(var i=0; i<inp.options.length; i++)
      if(inp.options[i].selected) ret[ret.length]=(inp.options[i].name? encodeURIComponent(inp.options[i].name)+"[]=":"")+encodeURIComponent(inp.options[i].value);
    return ret.join("&");
  } else if(inp.type=="select-one")
     return (inp.selectedIndex>=0)?
       ((inp.options[inp.selectedIndex].name? encodeURIComponent(inp.options[inp.selectedIndex].name)+"=":"")+encodeURIComponent(inp.options[inp.selectedIndex].value)) : "";
  if(inp.type=="image") return (inp.name? encodeURIComponent(inp.name)+"=":"")+encodeURIComponent(inp.src);
  else return (inp.name? encodeURIComponent(inp.name)+"=":"")+encodeURIComponent(inp.value);
}

setInterval('ReLoad("name.php",encodeForm(document.getElementById("test")))', 5000);
//-->
</script>

Добавлено @ 02:32
Цитата(Irokez @ 19.6.2005, 01:05)
а ошибки 414 too long request не будет?

Данные постом идут, там хоть мегабайты.

Автор: Irokez 19.6.2005, 02:45
Sardar то что нужно! спасибо!

Автор: Burrr 4.9.2005, 18:32
Замечательный код. Есть только вопрос насчёт копирайта, о котором говорится в первом посте (я в этой теме не проф, поэтому прошу извинить, если кого-то случайно обидят мои рассуждения).
Насколько я понимаю первый скрипт отличается от обычно-используемого для httpRequest-запросов тем, что в него добавлена строка для Оперы:
var obj = new ActiveXObject('Msxml2.XMLHTTP');
, а также нехитрая функция setInterval().
В чём же такая изюминка этого скрипта, чтобы предупреждать (хоть и желательно) автора об его использовании?
Неужели настолько оригинальная идея?

Автор: Aliance 4.9.2005, 18:38
Burrr
Используй PM http://forum.vingrad.ru/style_images/1/p_pm.gif для задания таких вопросов, IMHO.

Автор: Sardar 4.9.2005, 22:54
Burrr изначальный код это стандартный, везде описываемый пример, можешь написать "с нуля" сам и поставить свой копирайт smile
Доработанный мной код это уже оригинальная идя. Я придумал и реализовал идею, но это не значит что код накладывает какие либо ограничения на использование. Можешь написать по новой сам, либо взять приведённый код. Во втором случае просто добавь имена и мыло тех, кто работал над кодом, просто из уважения.

Автор: Burrr 5.9.2005, 10:06
Ясно, спасиба!
Просто интересно было узнать.

Автор: Guest 17.11.2005, 14:43
стоп...
что то вы меня запутали

Sardar
а в чем разница между громоздким кодом который описан, у Котерова(JSHttpRequest), твоим JSInteractiveRequest или компактным этим?

кроме метода передачи, разницы не вижу...
и там и там обновление страницы...

Автор: Sardar 18.11.2005, 01:19
Цитата(Guest @ 17.11.2005, 13:43)
а в чем разница между громоздким кодом который описан, у Котерова(JSHttpRequest), твоим JSInteractiveRequest или компактным этим?

В поддержке браузерами. Например мой код не будет работать в Opere 8 и Netscape 8, т.к. те категорически отказываються запускать динамически созданные скрипты, вернее запускают, но аргументы убиваються. Это никак не обходиться, только использованием XMLHttpRequest вместо этого. В либе Котерова как раз такой подход реализован, если есть возможность использовать XMLHttpRequest, то он и используеться, иначе альтернативный способ скриптами.

В коде DIRECTOR используеться только XMLHttpRequest.

Как вывод: либа Котерова вобрала в себя оба подхода тем самым может работать почти везде, хотя плата за это немного разбухшим кодом. Все кто спрашивает динамику, советую именно её, т.к. свою никак не добью, нет времени smile

Автор: fregs 18.11.2005, 09:09
Sardar
smile добивай свою...
у Котеровской возникает проблема у пользователей ИЕ5... кодировка

Автор: Иль 18.11.2005, 23:03
Код

var xmlhttp=false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
// JScript gives us Conditional compilation, we can cope with old IE versions.
// and security blocked creation of the objects.
 try {
  xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
 } catch (e) {
  try {
   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (E) {
   xmlhttp = false;
  }
 }
@end @*/
if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
  xmlhttp = new XMLHttpRequest();
}

Здрасте...
Взято тут http://jibbering.com/2002/4/httprequest.html , только обязателно найдите (на этой же странице) условия копирайта и строжайше им следуйте. Только ищите их хорошо.

Автор: Sardar 19.11.2005, 18:49
Цитата
Здрасте...

Иль кусочек кода инициализации XMLHttpRequest приводиться в любой статье, накладывать на такой код копирайт, всё равно что накладывать копирайт на:

Код
var a=new Image(); a.src=...

smile

Цитата(fregs @ 18.11.2005, 08:09)
у Котеровской возникает проблема у пользователей ИЕ5... кодировка


fregs oн пошёл по пути раскодирования %uHHHH мнемоник юникода или отключения его вовсе, что приводит к кракозябрам в определённых ситуациях. Я кодирую текст в UTF-8, затем обычним urlencode, что больше по трафику, но надёжней.

Добью не ранее января, ибо работы не мерянно, да и к тому времени "отточиться" техника XMLHttpRequest под Оперой.

Автор: fregs 24.1.2006, 13:33
2 Sardar

кстати smile время добить не нашлось?

Автор: Sardar 28.1.2006, 00:36
Цитата(fregs @ 24.1.2006, 12:33 Найти цитируемый пост)
кстати smile время добить не нашлось?

[offtop]
Прямо аврал smile
Ещё сессия, у нас она январь-февраль, сдача проекта и начало стажа. На форум на час прибегаю что бы только мусор почистить, в новичкас уже целая страница где я не был ещё smile

Остро не хватает активного комодератора, не то что софтину дописывать. Юзать я её буду не ранее марта, тогда и возрожу. Пожалуйста используйте JSHttpRequest от Котерова, хороший проверенный софт.
[/offtop]

Автор: Greendrake 10.2.2006, 11:53
Кто-нить в курсе как отправить input-поле типа file методом POST через XMLHttpRequest ?

Автор: 12345c 10.2.2006, 13:00
Здесь в форуме ряд тем об этом но ни в одной не достигли успеха, пришли к выводу, что не идёт. Но в Mozilla/XUL что-то получилось, судя по теме в http://xpoint.ru/forums/programming/XUL/thread/27174.xhtml

Автор: Greendrake 23.3.2006, 12:50
Цитата(12345c @ 10.2.2006, 13:00)
Здесь в форуме ряд тем об этом но ни в одной не достигли успеха, пришли к выводу, что не идёт.

Увидел что это реализовано на eBay при загрузке изображений. Загружаются без обновления страницы. Работает и в IE, и в Лисе, и в Опере. Буду разбираться как это сделано...

Автор: 12345c 23.3.2006, 13:19
Через фреймы, иначе бы не работало.

Автор: 244760100 26.3.2006, 15:16
я очень начинающий по JavaScript, и могу покозаться не ламером.....гы.. но будте бодры ответить мне на следующее...>>>
а что нжно изменить в коде (сообщение 1) , что бы он грузил мой файл, который мне нужен? и еще... какие-то там переменные name1, name2 , value1 & value2??? одним словом, мне нужен код чтоб делал все то, что по этой ссылке >> http://forum.vingrad.ru/index.php?act=ST&f=10&t=89026&unread=1

Автор: Aliance 27.3.2006, 00:03
В работу. Тут не коды пишут, а помогают ВАМ их написать.

Автор: 244760100 27.3.2006, 13:00
ну значит, если не трудно, помогите....

Автор: CyClon 28.3.2006, 20:03
Афтор, зачОт! Давно меня волновал этот вопрос. Но тут у меня еще несколько-ко вопросов.

Какой код будет для запроса страницы, не отправляю POST. Просто я только вчера начал изучать JS, переделываю скрипт слоев, посему не очень соображаю, особенно в этих новых технологиях ;)

P.S. Не интересуют ответы типо "Ничего не пиши в POST" и т.д. Меня интересует более компактный код.

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