Ajax, проблема с "hello, World!"

  • Автор темы Flying
  • Дата начала
F

Flying

#1
Собственно, начал часов 10 назад изучение ajax, написал свое первое аякс-приложени: смена числа на другое случайное число при нажатии на кнопку. Функцию, которая отправляет запрос ксерверному скрипту, содрал из книги "Изучаем Ajax" (Бретт Маклафлин), в этой части всё правильно, своего кода там килобайт-другой... Скрипт этот работает в эксплоере, а вот в опере и мозилле - нет :D, над этими строчками изрядно посидел, но никак не пойму в чем дело. Почему оно не работает в моих любимых браузерах? Помогите, кому не лень!

Вот привожу код:

1) клиентская часть:
Код:
<html>
<head>
<title>Test</title>
<script language="Javascript">
function createRequest() {
request = null
try {
request = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
request = null;
}
}
}

if (request == null) 
alert(" :-( ___ Error creating request object! ");

return request;

}

function refreshRandNumber() {
request = createRequest();
var url = "ajax/randNumber.php";
request.open("GET", url, true);
request.onReadyStateChange = updateRandNumber;
request.send(null);
}

function updateRandNumber() {
if (request.ReadyState == 4) {
document.getElementById("randNum").innerHTML = request.responseText;
}
}
</script>
</head>	
<body>

<br><br><br>
<h1>Random number: <span id="randNum" style="color:red;">still empty!</span></h1>
<input type="button" value="REFRESH!" onclick="refreshRandNumber();">
<br><br><br>

</body>
</html>
2) серверная :)
Код:
<?= rand(0,100); ?>
Создает запрос кроссбраузерная функция, запрос не null, но дальше не работает...


ЗЫ: в подключение фреймворков прошу носом меня не тыкать, т.к. с азами не разобрался
 
F

Flying

#3
"не работает" - это значит, что при нажатии кнопки "REFRESH!" надпись "still empty!" не меняется на случайное число... в Internet Explorer работает ("работает" - значит при нажатии кнопки "REFRESH!" надпись "still empty!" меняется на какое-то число, а при последующих нажатиях в 99% случаев это число меняется на новое число из диапазона от 0 до 100).

Вот в Internet Explorer работает, а в других - нет, почему :) ? Вроде бы объект request создается во всех браузерах (функция createRequest() возвращает не null), хотя нужного результата нет
 
E
#6
Теперь добавте ее-же перед
Код:
if (request.ReadyState == 4) {
в callback'е что произойдет?
 
F

Flying

#7
в callback'е что произойдет?
добавлял, везде добавлял... в браузерах, где не работает, до callback-функции вообще не доходит т.к. алерты в ней не срабатывают. Но вот почему в этом скрипте функция updateRandNumber вообще не вызывается, я не пойму...
 
E
#8
ну вот, пойдем дальше ... раз пока не понимаете, то сразу после
Код:
<script language="Javascript">
вставте вот такое -
Код:
var request = null;
, как изменилось поведение?
 
F

Flying

#9
да вроде никак не изменилось,

Код:
	alert(request);
request = createRequest();
alert(request);
сначала request нулл, потом объект... алерты в callback по-прежнему не работают
 
F

Flying

#11
Код:
<html>
<head>
<title>Test</title>
<script language="Javascript">

var request = null;

function createRequest() {
request = null
try {
request = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
request = null;
}
}
}

if (request == null) 
alert(" :-( ___ Error creating request object! ");

return request;

}

function refreshRandNumber() {
request = createRequest();
var url = "ajax/randNumber.php";
request.open("GET", url, true);
request.onReadyStateChange = updateRandNumber;
request.send(null);
}

function updateRandNumber() {
alert("Yeah!");
if (request.ReadyState == 4) {
document.getElementById("randNum").innerHTML = request.responseText;
}
}
</script>
</head>	
<body>

<br><br><br>
<h1>Random number: <span id="randNum" style="color:red;">still empty!</span></h1>
<input type="button" value="REFRESH!" onclick="refreshRandNumber();">
<br><br><br>

</body>
</html>
вот и весь незамысловатый код

Усли переменной var url = "ajax/randNumber.php" назначать абсолютный путь, то это ничего не меняет...
 
E
#12
Код:
function createRequest() {
if (request != null)
return;

try {
request = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
request = null;
}
}
}

if (request == null) 
alert(" :-( ___ Error creating request object! ");

request.onReadyStateChange = updateRandNumber;
}

function refreshRandNumber() {
createRequest();
var url = "ajax/randNumber.php";
request.open("GET", url, true);
request.send(null);
}
так поменяйте эти методы.

ой а зачем request.send(null);? просто request.send();

и
request.open("GET", url, true);
на
request.open("GET", url, false);
 
F

Flying

#13
вот такое по-прежнему в ИЕ работает, в опере - нет. Может карма не в порядке...

Код:
<html>
<head>
<title>Test</title>
<script language="Javascript">

request = null;

function createRequest() {
if (request != null)
return;

try {
request = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
request = null;
}
}
}

if (request == null) 
alert(" :-( ___ Error creating request object! ");

request.onReadyStateChange = updateRandNumber;
}

function refreshRandNumber() {
createRequest();
var url = "ajax/randNumber.php";
request.open("GET", url, false);
request.send();
}

function updateRandNumber() {
alert("Yeah!");
if (request.ReadyState == 4) {
document.getElementById("randNum").innerHTML = request.responseText;
request = null;
}
}
</script>
</head>	
<body>

<br><br><br>
<h1>Random number: <span id="randNum" style="color:red;">still empty!</span></h1>
<input type="button" value="REFRESH!" onclick="refreshRandNumber();">
<br><br><br>

</body>
</html>
в ИЕ и число меняется, и алерт выдается, в опере - ничего не происходит

ЗЫ: прочитал добавление, сейчас попробую... менять true на false пробовал уже, кстати, сейчас нулл убрать попробую

ЗЗЫ: и опять не работает
 
F

Flying

#15
быть того не может, ошибку пишет или нет?
var добавил, все равно не работает | не работает без ошибок, просто при нажатии на кнопку "РЕФРЕШь!" ничего не происходит

сейчас какой-нить браузер другой поставлю... ХЗ что это...

В еще одной мозилле не работает *wall*
не судьба, звезды не так лягли, луна не в той фазе или тупо руки кривые...

----
надо заново с ajax начать, по-другому как-нить
 
E
#16
request.onReadyStateChange = updateRandNumber;
на
request.onreadystatechange = updateRandNumber;

надо заново с ajax начать, по-другому как-нить
тут не в этом дело, просто во первых это скрипт, во вторых разница в реализаций, ну а в третьих :) как правило все пользуют какиенить библиотеки готовые, и поэтому на такие вещи внимание особо не обращаешь.


Но писать надо сразу правильно, поэтому то, надо и var писать и все вот такие мелочи.
 
F

Flying

#17
request.onReadyStateChange = updateRandNumber;
на
request.onreadystatechange = updateRandNumber;
омг, помогло в какой-то степени :), теперь в опере вызывается функция updateRandNumber (алерты, расположенные в ней, работают), в моззиле все также, как и было... зато значение request.responseText в опере всегда равно 28 ;). Ну и ужас, onreadystatechange должно быть в нижнем регистре, а responseText по-верблюжьи, имхо это нелогично

в общем это ужас: в одном браузере так, в другом этак, в третьем вообще свои дебильные "особенности"... уж лучше сразу какой-нить фреймворк осваивать, который работает на 100%, prototype почему-то мне кажется подходящим, по отзывам распространен и доки на русском есть
 
E
#18
В программировании вообще, а в "скриптовом" особенно, логику искать весьма проблематично. :rolleyes:
уж лучше сразу какой-нить фреймворк осваивать, который работает на 100%
Ага, советую ajax.asp.net ;), только вот 100% никто не гарантирует.
 
F

Flying

#19
etc, спасибо за помощь

Все-таки сделал я, чтоб оно работало в трех браузерах:

Код:
<html>
<head>
<title>Test</title>
<script language="Javascript">

var request = null;

function createRequest() {
if (request != null)
return;

try {
request = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
request = null;
}
}
}

if (request == null) 
alert(" :-( ___ Error creating request object! ");

}

function refreshRandNumber() {
createRequest();
var url = "ajax/randNumber.php?q=1";
request.onreadystatechange = updateRandNumber;
request.open("GET", url, true);
request.send(null);
}

function updateRandNumber() {
if (request.readyState == 4) {
document.getElementById("randNum").innerHTML = request.responseText;
request = null;
}
}
</script>
</head>	
<body>

<br><br><br>
<h1>Random number: <span id="randNum" style="color:red;">still empty!</span></h1>
<input type="button" value="REFRESH!" onclick="refreshRandNumber();">
<br><br><br>

</body>
</html>
В программировании вообще, а в "скриптовом" особенно, логику искать весьма проблематично.
эт точно:

1. Если request.send(), то не работает в мозилле, с request.send(null) работает
2. Если url = "ajax/randNumber.php?q=1" изменить на url = "ajax/randNumber.php", то опера будет кэшировать этот запрос, вообще для 100% пробивания кэша над делать с Date().egtTime()...
3. onreadystatechange должно быть в нижнем ркгистре, иначе в опере и мозилле не работает
4. request.open("GET", url, true), false - не работает в мозилле, хотя хз почему так
 
E
#20
1. Если request.send(), то не работает в мозилле, с request.send(null) работает
у меня работает request.send() везде.
то опера будет кэшировать этот запрос
Все нормальные браузеры будут кэшировать. И вообще кэширование для этого и создано, а вот программист должен смотреть если его функционал должен в любом случае посылать апрос, то надо делать соотв действия. Правда у нас часто делают это когда надо и когда нет.
request.open("GET", url, true), false - не работает в мозилле, хотя хз почему так
Хм... лень искать, но вроде это именно в мозилле баг, она не умеет работать в асинхронном режиме, за что и отвечает 3 параметер.
По крайней мере опять же у меня работает только с false.

Упс ... я имею ввиду под мазилой - FireFox (у меня сейчас 2.0.0.14), а вы?