При изучении работы различных яваскриптов столкнулся с такой проблемой - по неизвестным причинам ни один яваскрипт не работает. Поддержка яваскриптов в браузерах включена. Попробовал простейший пример из книги "AJAX и PHP", но он тоже не работает, не могу разобраться в чем дело. Привожу код из книги "AJAX и PHP".
Страница index.php
Полная Версия: Не работает JavaScript.
| PHP |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
Страница quickstart.js
| Код |
| // JavaScript Document var xmlHttp = createXmlHttpRequestObject (); function createXmlHttpRequestObject () { var xmlHttp; if (window.ActiveXObject) { try { xmlHttp = new ActiveObject ("Microsoft.XMLHTTP"); } catch (e) { xmlHttp = false; } } else { try { xmlHttp = new XMLHttpRequest (); } catch (e) { xmlHttp = false; } } if (!xmlHttp) { alert ("Ошибка создания XMLHttpRequest."); } else { return xmlHttp; } } function process (){ if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0) { name = encodeURIComponent (document.GetElementById("myname").value); xmlHttp.open ("GET", "quickstart.php?name=" + name, true); xmlHttp.onreadystatechange = handleServerResponse; xmlHttp.send (null); } else { setTimeout ("process ()", 1000); } } function handleServerResponse () { if (xmlHttp.readyState == 4) { if (xmlHttp.status == 200) { xmlResponse = xmlHttp.responseXML; xmlDocumentElement = xmlResponse.documentElement; helloMassage = xmlDDocumentElement.firstChild.data; document.getElementById("divmassage").innerHTML = "<i> " + helloMassage + " </i>"; setTimeout ("process ()", 1000); } else { alert ("При обращении к серверу возникли проблемы: " + xmlHttp.statusText); } } } |
Страница quickstart.php
| PHP |
<?php |
Помогите разобраться, почему вообще никакой реакции не происходит? Проверил ошибки в коде - вроде все правильно.. Вобщем - голову сломал уже. Тестирую на локальном сервере TopServer.
Спустя 32 минуты, 49 секунд (24.08.2009 - 16:48) Dezigo написал(а):
каждый шаг проверяй с помощью alert("yes");
Спустя 3 часа, 14 минут, 10 секунд (24.08.2009 - 20:02) vegasmoscow написал(а):
Проверил, в коде отметил комментариями места, где сообщение не показывается.
| Код |
| // JavaScript Document var xmlHttp = createXmlHttpRequestObject (); function createXmlHttpRequestObject () { var xmlHttp; if (window.ActiveXObject) { try { xmlHttp = new ActiveObject ("Microsoft.XMLHTTP"); } catch (e) { xmlHttp = false; } } else { try { xmlHttp = new XMLHttpRequest (); } catch (e) { xmlHttp = false; } } if (!xmlHttp) { alert ("Ошибка создания XMLHttpRequest."); } else { return xmlHttp; alert ("Yes!"); // Здесь сообщение не действует! } } function process (){ if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0) { name = encodeURIComponent (document.GetElementById("myname").value); alert ("Yes!"); // Здесь сообщение не действует! xmlHttp.open ("GET", "quickstart.php?name=" + name, true); alert ("Yes!"); xmlHttp.onreadystatechange = handleServerResponse; xmlHttp.send (null); } else { setTimeout ("process ()", 1000); } } |
Что это значит, что скрипт не может получить данные из поля "myname" во втором случае? А в первом случае после "return" сообщение игнорируется? Почему?
Спустя 3 часа, 9 минут, 30 секунд (24.08.2009 - 23:11) vegasmoscow написал(а):
При проверке работы функций "function process ()" и "function handleServerResponse ()" с помощью alert обнаружил две синтаксические ошибки:
1. В строчке
1. В строчке
| Код |
| name = encodeURIComponent (document.GetElementById("myname").value); |
буква G должна быть маленькой.
2. В строчке
| Код |
| helloMassage = xmlDDocumentElement.firstChild.data; |
опечатка - двойная буква D.
После исправления этих ошибок скрипт начал реагировать, но вместо определенных сообщений выводит слово "undefined", какое бы значение не вводилось в поле ввода. Значит ли это, что PHP скрипт не работает или неправильно создан XML документ?
Спустя 14 часов, 38 минут, 24 секунды (25.08.2009 - 13:50) Michael написал(а):
Из справки:
responseXML
Ответ сервера в виде XML, при readyState=4.
Это свойство хранит объект типа XML document, с которым можно обращаться так же, как с обычным document. Например,
var authorElem = xmlhttp.responseXML.getElementById('author')
Чтобы браузер распарсил ответ сервера в свойство responseXML,в ответе должен быть заголовок Content-Type: text/xml.
Иначе свойство responseXML будет равно null.
Еще много приколов с кодировками могут быть - пробуй сначала только английскими буквами.
responseXML
Ответ сервера в виде XML, при readyState=4.
Это свойство хранит объект типа XML document, с которым можно обращаться так же, как с обычным document. Например,
var authorElem = xmlhttp.responseXML.getElementById('author')
Чтобы браузер распарсил ответ сервера в свойство responseXML,в ответе должен быть заголовок Content-Type: text/xml.
Иначе свойство responseXML будет равно null.
Еще много приколов с кодировками могут быть - пробуй сначала только английскими буквами.
Спустя 4 часа, 37 минут, 50 секунд (25.08.2009 - 18:28) vegasmoscow написал(а):
Michael, присутствует такой заголовок
| PHP |
<?php |
Только все равно возвращает "undefined"
P.S. имена использую только английские.
Спустя 20 минут, 28 секунд (25.08.2009 - 18:48) Michael написал(а):
Сам щас этим страдаю, но у меня бока с кодировками(русскими буквами)
Сначала вообще чудило, потом убрал htmlentities лучше стало, завтра буду про объект XMLHttpRequest подробнее читать.
Мои попытки того же примера (с alert):
ajax2.php:
Серверный файл:
ajax_otv2.php:
Сначала вообще чудило, потом убрал htmlentities лучше стало, завтра буду про объект XMLHttpRequest подробнее читать.
Мои попытки того же примера (с alert):
ajax2.php:
Свернутый текст
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Работаем с AJAX</title>
</head>
<?php
header('Content-Type: text/html; charset=utf-8');
?>
<script language="javascript" type="text/javascript">
function Create(){
if(navigator.appName == "Microsoft Internet Explorer"){
req = new ActiveXObject("Microsoft.XMLHTTP");
}else{
req = new XMLHttpRequest();
}
return req;
}
////////
function Request(query)
{
req.open('post', 'http://localhost/other/ajax/serverotvet/ajax_otv2.php' , true );
req.onreadystatechange = Refresh;
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=utf-8");
req.send(query);
}
//////////////////
function Pusk()
{
var txt = encodeURIComponent(document.getElementById('txt').value);
var query = 'txt='+txt;
Request(query)
}
//////////////////
function Refresh()
{
var a = req.readyState;
if( a == 4 )
{
if (req.status==200)
{
text=req.responseText;
alert(text);
/*
xmld=req.responseXML;
doc=xmld.documentElement;
text=doc.firstChild.data;*/
document.getElementById('divMessage').innerHTML ='<i>'+ text+'</i>';
setTimeout('process()',4000);
} else {
alert('Error'+req.statusText);
}
}
}
//////////////////
var req = Create();
function process()
{
//book
if (req.readyState==4||req.readyState==0) {
name=encodeURIComponent(document.getElementById('txt').value);
//name=document.getElementById('txt').value;
req.open('post','http://localhost/other/ajax/serverotvet/ajax_otv2.php',true);
query='name='+name;
req.onreadystatechange = Refresh;
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=utf-8");
alert(query);
req.send(query);
} else {
setTimeout('process()',4000);
}
}
</script>
<body onLoad="process()">
<form name="form1" method="post" action="">
Сервер желает знать ваше имя<input type="text" name="txt" id="txt"><br>
<div id="divMessage"></div>
</form>
<br>
</body>
<!--
<input type="button" name="sss" value="Получить" onClick="Pusk()">
http://localhost/other/AJAX/ajax2.php
-->
</html>
ajax2.php:
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Работаем с AJAX</title>
</head>
<?php
header('Content-Type: text/html; charset=utf-8');
?>
<script language="javascript" type="text/javascript">
function Create(){
if(navigator.appName == "Microsoft Internet Explorer"){
req = new ActiveXObject("Microsoft.XMLHTTP");
}else{
req = new XMLHttpRequest();
}
return req;
}
////////
function Request(query)
{
req.open('post', 'http://localhost/other/ajax/serverotvet/ajax_otv2.php' , true );
req.onreadystatechange = Refresh;
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=utf-8");
req.send(query);
}
//////////////////
function Pusk()
{
var txt = encodeURIComponent(document.getElementById('txt').value);
var query = 'txt='+txt;
Request(query)
}
//////////////////
function Refresh()
{
var a = req.readyState;
if( a == 4 )
{
if (req.status==200)
{
text=req.responseText;
alert(text);
/*
xmld=req.responseXML;
doc=xmld.documentElement;
text=doc.firstChild.data;*/
document.getElementById('divMessage').innerHTML ='<i>'+ text+'</i>';
setTimeout('process()',4000);
} else {
alert('Error'+req.statusText);
}
}
}
//////////////////
var req = Create();
function process()
{
//book
if (req.readyState==4||req.readyState==0) {
name=encodeURIComponent(document.getElementById('txt').value);
//name=document.getElementById('txt').value;
req.open('post','http://localhost/other/ajax/serverotvet/ajax_otv2.php',true);
query='name='+name;
req.onreadystatechange = Refresh;
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=utf-8");
alert(query);
req.send(query);
} else {
setTimeout('process()',4000);
}
}
</script>
<body onLoad="process()">
<form name="form1" method="post" action="">
Сервер желает знать ваше имя<input type="text" name="txt" id="txt"><br>
<div id="divMessage"></div>
</form>
<br>
</body>
<!--
<input type="button" name="sss" value="Получить" onClick="Pusk()">
http://localhost/other/AJAX/ajax2.php
-->
</html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Работаем с AJAX</title>
</head>
<?php
header('Content-Type: text/html; charset=utf-8');
?>
<script language="javascript" type="text/javascript">
function Create(){
if(navigator.appName == "Microsoft Internet Explorer"){
req = new ActiveXObject("Microsoft.XMLHTTP");
}else{
req = new XMLHttpRequest();
}
return req;
}
////////
function Request(query)
{
req.open('post', 'http://localhost/other/ajax/serverotvet/ajax_otv2.php' , true );
req.onreadystatechange = Refresh;
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=utf-8");
req.send(query);
}
//////////////////
function Pusk()
{
var txt = encodeURIComponent(document.getElementById('txt').value);
var query = 'txt='+txt;
Request(query)
}
//////////////////
function Refresh()
{
var a = req.readyState;
if( a == 4 )
{
if (req.status==200)
{
text=req.responseText;
alert(text);
/*
xmld=req.responseXML;
doc=xmld.documentElement;
text=doc.firstChild.data;*/
document.getElementById('divMessage').innerHTML ='<i>'+ text+'</i>';
setTimeout('process()',4000);
} else {
alert('Error'+req.statusText);
}
}
}
//////////////////
var req = Create();
function process()
{
//book
if (req.readyState==4||req.readyState==0) {
name=encodeURIComponent(document.getElementById('txt').value);
//name=document.getElementById('txt').value;
req.open('post','http://localhost/other/ajax/serverotvet/ajax_otv2.php',true);
query='name='+name;
req.onreadystatechange = Refresh;
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=utf-8");
alert(query);
req.send(query);
} else {
setTimeout('process()',4000);
}
}
</script>
<body onLoad="process()">
<form name="form1" method="post" action="">
Сервер желает знать ваше имя<input type="text" name="txt" id="txt"><br>
<div id="divMessage"></div>
</form>
<br>
</body>
<!--
<input type="button" name="sss" value="Получить" onClick="Pusk()">
http://localhost/other/AJAX/ajax2.php
-->
</html>
ajax2.php:
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Работаем с AJAX</title>
</head>
<?php
header('Content-Type: text/html; charset=utf-8');
?>
<script language="javascript" type="text/javascript">
function Create(){
if(navigator.appName == "Microsoft Internet Explorer"){
req = new ActiveXObject("Microsoft.XMLHTTP");
}else{
req = new XMLHttpRequest();
}
return req;
}
////////
function Request(query)
{
req.open('post', 'http://localhost/other/ajax/serverotvet/ajax_otv2.php' , true );
req.onreadystatechange = Refresh;
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=utf-8");
req.send(query);
}
//////////////////
function Pusk()
{
var txt = encodeURIComponent(document.getElementById('txt').value);
var query = 'txt='+txt;
Request(query)
}
//////////////////
function Refresh()
{
var a = req.readyState;
if( a == 4 )
{
if (req.status==200)
{
text=req.responseText;
alert(text);
/*
xmld=req.responseXML;
doc=xmld.documentElement;
text=doc.firstChild.data;*/
document.getElementById('divMessage').innerHTML ='<i>'+ text+'</i>';
setTimeout('process()',4000);
} else {
alert('Error'+req.statusText);
}
}
}
//////////////////
var req = Create();
function process()
{
//book
if (req.readyState==4||req.readyState==0) {
name=encodeURIComponent(document.getElementById('txt').value);
//name=document.getElementById('txt').value;
req.open('post','http://localhost/other/ajax/serverotvet/ajax_otv2.php',true);
query='name='+name;
req.onreadystatechange = Refresh;
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=utf-8");
alert(query);
req.send(query);
} else {
setTimeout('process()',4000);
}
}
</script>
<body onLoad="process()">
<form name="form1" method="post" action="">
Сервер желает знать ваше имя<input type="text" name="txt" id="txt"><br>
<div id="divMessage"></div>
</form>
<br>
</body>
<!--
<input type="button" name="sss" value="Получить" onClick="Pusk()">
http://localhost/other/AJAX/ajax2.php
-->
</html>
Серверный файл:
ajax_otv2.php:
Свернутый текст
<?php
header('Content-Type: text/html; charset=utf-8');
/*
echo '<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>';
*/
//echo '<response>';
$name = isset($_POST['name'])?$_POST['name']:'';
$names=array('Tim','Bob','Bill','Dezmond','Ben','Вова');
/*
echo '<pre>';
print_r($names);
echo '</pre>';
*/
//echo mb_strtoupper($name),'<br>';
if (in_array($name,$names)) {
echo 'Здравствуйте, мистер '.$name.'!';
} else if (trim($name)=='') {
echo 'Скажите как Вас зовут незнакомец';
} else {
echo $name.' - Вы мне не знакомы';
}
//echo '</response>';
?>
header('Content-Type: text/html; charset=utf-8');
/*
echo '<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>';
*/
//echo '<response>';
$name = isset($_POST['name'])?$_POST['name']:'';
$names=array('Tim','Bob','Bill','Dezmond','Ben','Вова');
/*
echo '<pre>';
print_r($names);
echo '</pre>';
*/
//echo mb_strtoupper($name),'<br>';
if (in_array($name,$names)) {
echo 'Здравствуйте, мистер '.$name.'!';
} else if (trim($name)=='') {
echo 'Скажите как Вас зовут незнакомец';
} else {
echo $name.' - Вы мне не знакомы';
}
//echo '</response>';
?>
Спустя 3 часа, 54 минуты, 4 секунды (25.08.2009 - 22:42) vegasmoscow написал(а):
Как все банально оказалось - неправильно указал параметр!
В этой строке
В этой строке
| Код |
| xmlHttp.open ("GET", "quickstart.php?name=" + name, true); |
где формируется URL запроса с параметром и его значением, неправильно указан параметр, поскольку форма имеет идентификатор "myname", вот правильный вариант
| Код |
| xmlHttp.open ("GET", "quickstart.php?myname=" + name, true); |
Теперь все работает как положено.
Вот код всех трех страниц:
Страница "index.php"
Свернутый текст
| HTML |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <title>QuickStart</title> <script type="text/javascript" src="quickstart.js"></script> </head> <body onload="process ()"> Сервер хочет знать ваше имя: <input type="text" id="myname"/> <div id="divmessage" /> </body> </html> |
Страница "quickstart.js"
Свернутый текст
| Код |
| // JavaScript Document var xmlHttp = createXmlHttpRequestObject (); function createXmlHttpRequestObject () { var xmlHttp; if (window.ActiveXObject) { try { xmlHttp = new ActiveObject ("Microsoft.XMLHTTP"); } catch (e) { xmlHttp = false; } } else { try { xmlHttp = new XMLHttpRequest (); } catch (e) { xmlHttp = false; } } if (!xmlHttp) { alert ("Ошибка создания XMLHttpRequest."); } else { return (xmlHttp); } } function process (){ if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0) { name = encodeURIComponent (document.getElementById("myname").value); xmlHttp.open ("GET", "quickstart.php?myname=" + name, true); xmlHttp.onreadystatechange = handleServerResponse; xmlHttp.send (null); } else { setTimeout ("process ()", 1000); } } function handleServerResponse () { if (xmlHttp.readyState == 4) { if (xmlHttp.status == 200) { xmlResponse = xmlHttp.responseXML; xmlDocumentElement = xmlResponse.documentElement; helloMessage = xmlDocumentElement.firstChild.data; document.getElementById("divmessage").innerHTML = "<i> " + helloMessage + " </i>"; setTimeout ("process ()", 1000); } else { alert ("При обращении к серверу возникли проблемы: " + xmlHttp.statusText); } } } |
Страница "quickstart.php"
Свернутый текст
| PHP |
<?php |
P.S. Есть несколько нюансов.
1. Сменил кодировку с "UTF-8" на "windows-1251" (книжка, из которой взят пример заграничная, у них, видимо, по другому все).
2. Имена в массив в $usernames нужно записывать только в верхнем регистре или убрать "strtoupper".
3. Имена нужно вводить только английскими буквами (пока не разбирался с этим вопросом).
Спустя 12 часов, 4 минуты, 6 секунд (26.08.2009 - 10:46) Michael написал(а):
vegasmoscow
Немного подразобрался с кодировками:
Вызывающий файл -ВФ, Скрипт обработки запроса -СОЗ.
1) ВФ и СОЗ в utf-8 сохранены как файлы и заголовки utf для браузеров. Запрос поступает всегда в utf из ВФ в СОЗ - противоречий нет. Только строковые данные будут в utf (strtoupper - нельзя, нужно - mb_strtoupper - у меня не работает, типа не проинсталирована - на форуме сейчас спрошу как добавить).
2)ВФ и СОЗ в cp1251 сохранены как файлы и заголовки cp1251 для браузеров. Запрос поступает всегда в utf из ВФ в СОЗ - надо перевести кодировку:
Немного подразобрался с кодировками:
Вызывающий файл -ВФ, Скрипт обработки запроса -СОЗ.
1) ВФ и СОЗ в utf-8 сохранены как файлы и заголовки utf для браузеров. Запрос поступает всегда в utf из ВФ в СОЗ - противоречий нет. Только строковые данные будут в utf (strtoupper - нельзя, нужно - mb_strtoupper - у меня не работает, типа не проинсталирована
- на форуме сейчас спрошу как добавить).2)ВФ и СОЗ в cp1251 сохранены как файлы и заголовки cp1251 для браузеров. Запрос поступает всегда в utf из ВФ в СОЗ - надо перевести кодировку:
| PHP |
$txt = isset($_POST['name'])?$_POST['name']:''; |
Дальше можно strtoupper над $txt и т.д. возвратится нормально.
Здесь расположена полная версия этой страницы.