После дебатов в одном из своих постов начал изучать AJAX, в целом все предельно просто и понятно, но по ходу появляются вопросы, онтветы на которые буду задавать здесь в надежде получить на них ответы, заранее спасибо! 1. вопрос - в материалах звучат такие понятия как объекты, экземпляры, методы и свойства. я так понял это их ООП, кто смог бы на пальцах объяснить что эти поняти означают или дать ссылку на статью, где на пальцах объясняют, что это такое )) 2. вопрос - есть ли универсальный способ вызова объекта XMLHttpRequest, который работает во всех браузерах, пока нашел вото этот: Код (Text): <script language="javascript" type="text/javascript"> var request = false; try { request = new XMLHttpRequest(); } catch (trymicrosoft) { try { request = new ActiveXObject("Msxml2.XMLHTTP"); } catch (othermicrosoft) { try { request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (failed) { request = false; } } } if (!request) alert("Error initializing XMLHttpRequest!"); </script> пока все вызревает ряд вопросов, ограничусь пока этим. в общем начал изучать материал, в целом понятно, что не может не радовать, много надо будет изучить, взял почти готовый код, разобрал что по чем, но возникло ряд вопросов и ошибок, сам код потом вопросы )) Код (Text): <!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" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <title>Изучаем AJAX</title> <script language="javascript" type="text/javascript"> var request = false; try { request = new XMLHttpRequest(); } catch (trymicrosoft) { try { request = new ActiveXObject("Msxml2.XMLHTTP"); } catch (othermicrosoft) { try { request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (failed) { request = false; } } } if (!request) alert("Error initializing XMLHttpRequest!"); function getCustomerInfo() { var phone = document.getElementById("phone").value; var url = "/include/xtr.php?phone=" + escape(phone); request.open("GET", url, true); request.onreadystatechange = updatePage; request.send(null); } function updatePage() { if (request.readyState == 4) { if (request.status == 200) { var response = request.responseText.split("|"); document.getElementById("order").value = response[0]; document.getElementById("address").innerHTML = response[1].replace(/\n/g, " "); } else alert("status is " + request.status); } } </script> </head> <body> <form action="POST"> <p>Enter your phone number: <input type="text" size="14" name="phone" id="phone" onChange="getCustomerInfo();" /> </p> <p>Your order will be delivered to:</p> <div id="address"></div> <p>Type your order in here:</p> <p><textarea name="order" rows="6" cols="50" id="order"></textarea></p> <p><input type="submit" value="Order Pizza" id="submit" /></p> </form> </body> </html> Вопрос 1. не подгружает введенные данные, т.е. не работает, а переходит по ссылке http://xhr/POST?phone=999999999999&order=blablabla в чем может быть ошибка? Вопрос 2. как можно оптимизировать сей код после исправления ошибки? Вопрос 3. где можно глубже изучить метод getElementById() ? Вопрос 4. как происходит в данном случае обмен данными между javascript и php Вопрос 5. как подставляется url в форму? Думаю достаточно, спасибо!
то предлагают изучить xmlhttprequest, оставить в покое jquery, то теперь наоборот ))))) я вот подправил код, страница не перезагружается, но не выводиться данные Код (Text): <!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" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <title>Изучаем AJAX</title> <script language="javascript" type="text/javascript"> var request = false; try { request = new XMLHttpRequest(); } catch (trymicrosoft) { try { request = new ActiveXObject("Msxml2.XMLHTTP"); } catch (othermicrosoft) { try { request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (failed) { request = false; } } } if (!request) alert("Error initializing XMLHttpRequest!"); function getCustomerInfo() { var phone = document.getElementById("phone").value; var url = "/include/xtr.php?phone=" + escape(phone); request.open("GET", url, true); request.onreadystatechange = updatePage; request.send(null); } function updatePage() { if (request.readyState == 4) { if (request.status == 200) { var response = request.responseText.split("|"); document.getElementById("order").value = response[0]; document.getElementById("address").innerHTML = response[1].replace(/\n/g, " "); } else alert("status is " + request.status); } } </script> </head> <body> <form> <p>Enter your phone number: <input type="text" size="14" name="phone" id="phone" onChange="getCustomerInfo();" /> </p> <p>Your order will be delivered to:</p> <div id="address"></div> <p>Type your order in here:</p> <p><textarea name="order" rows="6" cols="50" id="order"></textarea></p> <p><input type="submit" value="Order Pizza" id="submit" /></p> </form> </body> </html>
я им не умею пользоваться, поставил, чисто интуитивно попробую через брейк поинт )) ругается на Код (Text): document.getElementById("address").innerHTML = response[1].replace(/\n/g, " "); response[1] is underfined вот ошибка, как исправить?
перед этой строкой добавь console.log(response); потом открой консоль в фаербаге, смотри что выведется. Также там будет показан запрос на сервер, какие хедеры с ним отправлены и че сервер вернул. Смотри, анализируй.
я имел ввиду долго работает, виснет, поставил 3.0.11 все летает собственно вот что получилось сложно делать выводы, подскажите: Response Headers Date Fri, 03 Jul 2009 19:16:27 GMT Server Apache/2.2.4 (Win32) mod_ssl/2.2.4 OpenSSL/0.9.8d PHP/5.2.4 X-Powered-By PHP/5.2.4 Content-Length 0 Keep-Alive timeout=5, max=100 Connection Keep-Alive Content-Type text/html; charset=windows-1251 Request Headers Host xhr User-Agent Mozilla/5.0 (Windows; U; Windows NT 5.1; ru; rv:1.9.0.11) Gecko/2009060215 MRA 5.5 (build 02746) Firefox /3.0.11 (.NET CLR 3.5.30729) Accept text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Accept-Language ru,en-us;q=0.7,en;q=0.3 Accept-Encoding gzip,deflate Accept-Charset windows-1251,utf-8;q=0.7,*;q=0.7 Keep-Alive 300 Connection keep-alive Referer http://xhr/xhr.html [""] response[1] is undefined updatePage()xhr.html (line 40) [Break on this error] document.getElementById(...rHTML = response[1].replace(/\n/g, " ");
ну он пустой ))) а как передать из него переменную во 2-й элемент массива? в сам ом простом варианте Кос, кстати спасибо большое!!!
Использовать разделение контента. Советую использовать JSON, тем более, что сейчас в РНР встроенная поддержка. Одна функция делаем из массива JSON, потом у клиента это через eval прогоняется и получается объект. Javascript ходит по DOM дереву, ищет id (вроде так), заданный в методе и возвращает объект элемента (тега).