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

Flying · 05.06.2008

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

, над этими строчками изрядно посидел, но никак не пойму в чем дело. Почему оно не работает в моих любимых браузерах? Помогите, кому не лень!

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

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, но дальше не работает...

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

etc · 06.06.2008

Что такое "не работает"?

Flying · 06.06.2008

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

Вот в Internet Explorer работает, а в других - нет, почему

? Вроде бы объект request создается во всех браузерах (функция createRequest() возвращает не null), хотя нужного результата нет

etc · 06.06.2008

Flying сказал(а):
функция createRequest() возвращает не null

Как узнали?

Flying · 06.06.2008

etc сказал(а):
Как узнали?

после строчки

Код:

	request = createRequest();

добавил

Код:

	alert(request);

мозилла показывает алерт с надписью "[Object XMLHttpRequest]"

etc · 06.06.2008

Теперь добавте ее-же перед

Код:

if (request.ReadyState == 4) {

в callback'е что произойдет?

Flying · 06.06.2008

etc сказал(а):
в callback'е что произойдет?

добавлял, везде добавлял... в браузерах, где не работает, до callback-функции вообще не доходит т.к. алерты в ней не срабатывают. Но вот почему в этом скрипте функция updateRandNumber вообще не вызывается, я не пойму...

etc · 06.06.2008

ну вот, пойдем дальше ... раз пока не понимаете, то сразу после

Код:

<script language="Javascript">

вставте вот такое -

Код:

var request = null;

, как изменилось поведение?

Flying · 06.06.2008

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

Код:

	alert(request);
request = createRequest();
alert(request);

сначала request нулл, потом объект... алерты в callback по-прежнему не работают

etc · 06.06.2008

Показывайте весь код.

Flying · 06.06.2008

Код:

<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" назначать абсолютный путь, то это ничего не меняет...

etc · 06.06.2008

Код:

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);

Flying · 06.06.2008

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

Код:

<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 пробовал уже, кстати, сейчас нулл убрать попробую

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

etc · 06.06.2008

Flying сказал(а):
request = null;

где var?

Flying сказал(а):
опять не работает

быть того не может, ошибку пишет или нет?

Flying · 06.06.2008

etc сказал(а):
быть того не может, ошибку пишет или нет?

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

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

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

----
надо заново с ajax начать, по-другому как-нить

etc · 06.06.2008

request.onReadyStateChange = updateRandNumber;
на
request.onreadystatechange = updateRandNumber;

Flying сказал(а):
надо заново с ajax начать, по-другому как-нить

тут не в этом дело, просто во первых это скрипт, во вторых разница в реализаций, ну а в третьих

как правило все пользуют какиенить библиотеки готовые, и поэтому на такие вещи внимание особо не обращаешь.

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

Flying · 06.06.2008

etc сказал(а):
request.onReadyStateChange = updateRandNumber;
на
request.onreadystatechange = updateRandNumber;

омг, помогло в какой-то степени

, теперь в опере вызывается функция updateRandNumber (алерты, расположенные в ней, работают), в моззиле все также, как и было... зато значение request.responseText в опере всегда равно 28

. Ну и ужас, onreadystatechange должно быть в нижнем регистре, а responseText по-верблюжьи, имхо это нелогично

в общем это ужас: в одном браузере так, в другом этак, в третьем вообще свои дебильные "особенности"... уж лучше сразу какой-нить фреймворк осваивать, который работает на 100%, prototype почему-то мне кажется подходящим, по отзывам распространен и доки на русском есть

etc · 07.06.2008

Flying сказал(а):
имхо это нелогично

В программировании вообще, а в "скриптовом" особенно, логику искать весьма проблематично.

Flying сказал(а):
уж лучше сразу какой-нить фреймворк осваивать, который работает на 100%

Ага, советую ajax.asp.net

, только вот 100% никто не гарантирует.

Flying · 08.06.2008

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>

etc сказал(а):
В программировании вообще, а в "скриптовом" особенно, логику искать весьма проблематично.

эт точно:

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 - не работает в мозилле, хотя хз почему так

etc · 09.06.2008

Flying сказал(а):
1. Если request.send(), то не работает в мозилле, с request.send(null) работает

у меня работает request.send() везде.

Flying сказал(а):
то опера будет кэшировать этот запрос

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

etc сказал(а):
request.open("GET", url, true), false - не работает в мозилле, хотя хз почему так

Хм... лень искать, но вроде это именно в мозилле баг, она не умеет работать в асинхронном режиме, за что и отвечает 3 параметер.
По крайней мере опять же у меня работает только с false.

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

Все сервисы Codeby

Поиск

Поиск

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

Flying

etc

Flying

etc

Flying

etc

Flying

etc

Flying

etc

Flying

etc

Flying

etc

Flying

etc

Flying

etc

Flying

etc