Форум PHP программистов > помогите наладить работу AJAX

[ Поиск ] - [ Пользователи ] - [ Календарь ]

Полная Версия: помогите наладить работу AJAX

qpayct

21.01.2010 - 18:08

практикуюсь работать с аяксом и чё то не получается никак. помогите плз.

var req = function () {
if (window.XMLHttpRequest) req = new XMLHttpRequest();
else if (window.ActiveXObject) req = new ActiveXObject("Microsoft.XMLHTTP");
else return;
return req;
}
function runAjax(val, metod) {
if (metod=="GET") Request(val, metod);
else if (metod=="POST") Request(val, metod);
}
function Request(query, metod) {
//alert(query + metod);
if (metod=='GET') url='http://localhost:80/css.php?txt=' + query;
else url='http://localhost:80/css.php';
req.open(metod, url , true );
req.onreadystatechange = Refresh;
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=utf-8");
req.send(query);
}

Спустя 27 минут, 25 секунд (21.01.2010 - 17:35) qpayct написал(а):

немного подправил, но чёто опять упустил... помогите

var req = function () {
if (window.XMLHttpRequest) req = new XMLHttpRequest();
else if (window.ActiveXObject) req = new ActiveXObject("Microsoft.XMLHTTP");
else return;
return req;
}
function runAjax(val, metod) {
if (metod=='GET') getRequest(val, metod);
else if (metod=='POST') postRequest(val, metod);
}
function postRequest(query, metod) {
req.open(metod, 'http://localhost:80/css.php' , true );
req.onreadystatechange = function () {
  if (req.readyState==4) {
    if (req.status!=200) alert("не пашет...\n" +req.statusText + "\n" + req.responseText);
  }
}
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
req.send(query);
}
function getRequest(query, metod) {
var url='http://localhost:80/css.php?' + query;
req.open(metod, url , true );
req.onreadystatechange = function () {
  if (req.readyState==4) {
    if (req.status!=200) alert("не пашет...\n" +req.statusText + "\n" + req.responseText);
  }
}
req.send(null);
}

Спустя 1 час, 24 минуты, 12 секунд (21.01.2010 - 19:00) arlamar написал(а):

и в чём собственно проблема?

и вообще не проще ли использовать, скажем, jQuery?

Спустя 1 час, 2 минуты, 50 секунд (21.01.2010 - 20:02) jetistyum написал(а):

Цитата (arlamar @ 21.01.2010 - 19:00)

и в чём собственно проблема?
и вообще не проще ли использовать, скажем, jQuery?

Как минимум я вижу два позитивных аспекта в этом коде:
1. "своя" библиотека для работы с AJAX будет весить поменьше, чем jQuery, если ничего кроме AJAX не нужно...
2. Человек поймет как там все работает... а непросто будет юзать готовый интерфейс. А перейти на jQery всегда можно.
qpayct
я что - то не очень понимаю как там у тебя что работает

var req = function () {
if (window.XMLHttpRequest) req = new XMLHttpRequest();
else if (window.ActiveXObject) req = new ActiveXObject("Microsoft.XMLHTTP");
else return;
return req;
}

объявляешь переменную req - функцией, но внутри функции присваиваешь ей значение другого объекта. я честно говоря даже не знаю чему оно будет равно потом, предположительно req перестанет быть функцией и станет объектом, но для этого нужно сначала запустить функцию req .. она же сама не запустится.
и всетаки чтобы избежать путаницы рекомендую давать разные имена .... переменным и функциям.

Спустя 23 минуты, 11 секунд (21.01.2010 - 20:26) arlamar написал(а):

Цитата

ну это на первый взгляд да....
а теперь конкретней рассмотрим. если ты делаешь кучу фишек на ява скрипте то без jQuery или ему подобных твой код будет весить(скорее всего, если ты не мега-папа ява скрипта конечно) больше чем jQuery+твой код
да и вообще кого сейчас волнуют 68 килобайт?)

Спустя 2 часа, 28 минут, 26 секунд (21.01.2010 - 22:54) jetistyum написал(а):

Цитата (arlamar @ 21.01.2010 - 20:26)

если ты делаешь кучу фишек на ява скрипте

если кучу, и если сложных

.. я тоже люблю jQuery и использую его везде и всегда, но ученые доказали что есть javascript и без jQuery

Спустя 2 часа, 24 минуты, 49 секунд (22.01.2010 - 01:19) qpayct написал(а):

обьект-функция создаётся сам и сразу. Другое дело правильно ли работает такая замута... Не уверен. Проверить надо. Я ужой не дома...
У Твина в учебнике видел такой приём создания запроса вне функции и взял на попробывать и в добавок сделал из него функцию на лету. Зачем? Не знаю. Просто попробывал то, что всёвремя вижу, как применяют. По идее получилась созданая в процессе исполнения функция и при проверке алерт её выдавал.. Другое дело, что может это не правильно работает и запрос не создаётся. Не знаю пока.
Насчёт jQuery всему своё время ;-) мне бы сначала с этим разобраться.

Спустя 2 часа, 2 минуты, 11 секунд (22.01.2010 - 03:21) dr_Lev написал(а):

Цитата (qpayct @ 21.01.2010 - 22:19)

обьект-функция создаётся сам и сразу.

В твоей ситуации это не совсем так, это конструктор, и внутренний код сработает только если создать объект какой-то на основе этого конструктора.
Вот, проверь код :

      var A = function (){ // по сути тот же XMLHttpRequest()
        this.name = 'Name A';
      };
      var B = function (){
        B = new A;
        return B;
      }
      alert(B.name);

А теперь этот код :

      var A = function (){ // по сути тот же XMLHttpRequest()
        this.name = 'Name A';
      };
      var B = new function (){
        B = new A;
        return B;
      }
      alert(B.name);

P.S. Да и про имена переменных правильно подметили выше. Либо делай разные имена, либо, если используешь имя внутри функции такое же как и снаружи, но не хочешь "испортить" наружную, в функции поставь var (инициализируй)

Спустя 38 минут, 28 секунд (22.01.2010 - 04:00) qpayct написал(а):

Цитата (dr_Lev @ 22.01.2010 - 02:21)

В твоей ситуации это не совсем так, это конструктор, и внутренний код сработает только если создать объект какой-то на основе этого конструктора.

Спасибо за разьяснение. Теперь понял разницу.

Итак если кому интересно, как правильно вот ответ:

var req = reqObject();
function reqObject() {
if (window.XMLHttpRequest) req = new XMLHttpRequest();
else if (window.ActiveXObject) req = new ActiveXObject("Microsoft.XMLHTTP");
else return;
return req;
}
function runAjax(val, url, metod) {
req.onreadystatechange = function () {
if (req.readyState==4) {
if (req.status==200) document.getElementById('page').innerHTML=req.responseText;
else alert("не пашет...\n" +req.statusText + "\n" + req.responseText);
}
}
if (metod=='GET') getRequest(val, url, metod);
else if (metod=='POST') postRequest(val, url, metod);
}
function postRequest(query, url, metod) {
req.open(metod, url , true);
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
req.send(query);
}
function getRequest(query, url, metod) {
url=url + '?' + query;
req.open(metod, url , true );
req.send(null);
}

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

Спустя 6 часов, 47 минут, 6 секунд (22.01.2010 - 10:47) Michael написал(а):

qpayct в функции reqObject объяви var req; а то неоднозначность какая то есть. Вообще глянь на мою "классическую" схему-шаблон для AJAX:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<?php
header('Content-Type: text/html; charset=windows-1251');
?>
<script language="javascript" type="text/javascript">
function getXmlHttp(){ // получение объекта
  var xmlhttp;
  try {
    xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (e) {
    try {
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (E) {
      xmlhttp = false;
    }
  }
  if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
    xmlhttp = new XMLHttpRequest();
  }
  return xmlhttp;
}


/////////////////////////////
function func1()
{
    
	var dat1=document.form1.text1.value;
	dat1=encodeURIComponent(dat1);
	var query="name="+dat1;
    xmlhttp.open('POST', 'http://localhost/other/ajax/serverotvet/ajax_otv4.php', true);
	xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=utf-8');
	xmlhttp.onreadystatechange=Refresh;
	xmlhttp.send(query); // отправка
}
var xmlhttp = getXmlHttp(); // создание объекта
function Refresh()
{   // объект работает
	if (xmlhttp.readyState == 4) {
        if(xmlhttp.status == 200) {
            alert(xmlhttp.responseText); // - OK (данные получены)
		    document.getElementById('divv1').innerHTML=xmlhttp.responseText;
        } else {alert('ошибка')}
	} else {
	    document.getElementById('divv1').innerHTML='Идет работа...';
	}
}
</script>
<body>
<form name="form1" method="post" action="">
  <input type="button" name="But1" value="Запрос" onClick="func1()">
  <input type="text" name="text1">
</form>
<br><br>
<hr>
<div id="divv1"></div>
</body>
</html>

Спустя 38 минут, 49 секунд (22.01.2010 - 11:25) qpayct написал(а):

Цитата (Michael @ 22.01.2010 - 09:47)

qpayct в функции reqObject объяви var req; а то неоднозначность какая то есть.

а вот этого как раз и не надо этож и есть тот самый обьект.

а также обрати внимание, что у тебя работает только POST и довольно таки не оптимальный код как по мне, а у меня и то и другое как никак на высоте.
зачем? а так просто мало ли

так что стирай свой шаблон и начинай пользоваться моим.

З.Ы. зачем 2 хедера языков выставлять? это такой проф. трюк?

Спустя 3 часа, 8 минут, 48 секунд (22.01.2010 - 14:34) Michael написал(а):

Цитата (qpayct @ 22.01.2010 - 10:25)

Цитата (Michael @ 22.01.2010 - 09:47)

qpayct в функции reqObject объяви var req; а то неоднозначность какая то есть.

а вот этого как раз и не надо этож и есть тот самый обьект.

переменная не объявленная в функции становится свойством объекта window(глобальной) и в твоем коде такая функция работает как процедура, а вызывается как функция...

Цитата

З.Ы. зачем 2 хедера языков выставлять? это такой проф. трюк?

угадал. Один формирует ответ сервера(можно и не делать если норм. настроен, но не помешает), а другой - заголовок AJAX запроса(никак не связан с первым).

Спустя 23 минуты, 25 секунд (22.01.2010 - 14:58) qpayct написал(а):

Цитата (Michael @ 22.01.2010 - 13:34)

к чему ты клонишь?

Спустя 30 минут, 49 секунд (22.01.2010 - 15:29) Michael написал(а):

Цитата (qpayct @ 22.01.2010 - 13:58)

к чему ты клонишь?

твой код рабочий, но в нем есть странность:

var req = reqObject(); // присвоили 2-ой раз
function reqObject() {
if (window.XMLHttpRequest) req = new XMLHttpRequest(); // присвоили 1-ый раз
else if (window.ActiveXObject) req = new ActiveXObject("Microsoft.XMLHTTP"); // присвоили 1-ый раз
else return;
return req;
}

т.е. надо или как я говорил или:

var req = null;
reqObject(); // вот так вызвать, а в нем назначится req .

Насчет создания объекта (то что у тебя покороче) я с этим согласен говорят уже не актуально в try catch. Я делаю также так(но сильно пока не тестил во всех браузерах):

var xhr = typeof XMLHttpRequest == "undefined" ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest;

Спустя 1 час, 10 минут, 21 секунда (22.01.2010 - 16:39) qpayct написал(а):

я вот тоже не тестил, но пока работает, а насчёт обьекта его просто запустить надо и он должен быть типа "паблик" вот потому такая "путаница", хотя на самом деле именно так правильно, а как ты говоришь будет ошибка

+ if else вроде как быстрее

Быстрый ответ:

Здесь расположена полная версия этой страницы.