Что может класс?
- отправка анонимного запроса
- отправка с получением ответа
- получение контента с сервера
т.е класс выполняет ту часть динамической работы что может jQuery.
Как установить?
- записываем в <head><script src=\"путь/ajax.js\"/></head>
Как работает?
- ajax.query([тип запроса (POST или GET),[адрес или URL]]); - отправка анонимного запроса
Пример:
Файл: index.php: в нем будет наша фукнция и форма. функция будет отправлять запрос изнашей формы в файл reg.php
<script>
function ajax_query()
{
nick=document.getElementById(\"nick\"
;if(nick.value==\'\'){alter(\'Введите ник!\');}else{ajax.query(\"POST\",\"/reg.php?nick=\"+nick.value);}
}
</script
<form method=\"post\" osubmit=\"ajax_query();\">
Ник:<br><input id=\"nick\"/><br><input type=\"submit\" value=\"Отправить\"/>
</form>
Файл: reg.php: Регистрируем ник
<?
mysql_query(\'INSERT INTO `users` (`nick`) VALUES (\'\".$_POST[\'nick\'].\"\')\');
?>
Всё наш запрос выполнен, без каких либо обновлений, ник зарегестрирован.
- ajax.dialog([тип запрса (POST или GET)],\'[адрес или (URL)]\',\'[ID элемента]\'); - отправка запрса с ответом
Пример:
<script>
function ajax_test()
{
nick=document.getElementById(nick);
if(nick.value==\'\'){alter(\'Введите ник!\');}else{ajax.dialog(\'POST\',\'/reg.php?nick=\'+nick.value,\'ajax_dialog\');}
}
</script>
<form method=\"post\" onsubmit=\"ajax_test();\">
Ваш ник:<br><input id=\"nick\"/><br><input type=\"submit\" value=\"Отправить\"/>
</form>
<div id=\"ajax_dialog\"></div>
Файл: reg.php: Регистрируем ник
<?
// Делаем задержку в 3 секунды чтобы загрузка появилась
sleep(3);
mysql_query(\'INSERT INTO `users` (`nick`) VALUES (\'\".$_POST[\'nick\'].\"\')\');
?>
Запрос выполнен. От сервера мы получим: eсли всё путём, то появится загрузка, если всё плохо то получим ошибку \"Проблемы с подключение..\"
- ajax.dinamic_dialog(\'[тип запроса (POST/GET),[URL],\'[ID элемента]\']\');
Пример:
Файл index.php
<script>
function ajax_test(ajax.dinamic_dialog(\'POST\',\'/chat.php\',\'chat\')
;setInterval(\'ajax_test();\',1000); // обновляем каждую секунду
</script>
<div id=\'chat\'></div>
Файл: chat.php
<?
$q=mysql_query(\'SELECT * FROM `chat`\');
while($row=mysql_fetch_array($q)){
echo $row[\'text\'].\'<br>\';
}
?>
Всё, наш динамический диалог готов!
Хуу.. если допустил ошибки - ИЗВЕНИТЕ! Ставим +, спрашиваем что непонятно)
var ajax={
xhr:function()
{
var xhr=new XMLHttpRequest();
return xhr;
},
query:function(method,url)
{
var request=ajax.xhr();
request.open(method,url,true);
request.send(null);
},
dialog:function(method,url,elementId)
{
var request=ajax.xhr();
var ei=document.getElementById(elementId);
request.onreadystatechange=function(){
if(request.readyState==4)
{
ei.innerHTML="Проблемы с соеденением..";
if(request.status==200)
{
ei.innerHTML="";
}
}
}
request.open(method,url,true);
request.send(null);
ei.innerHTML="<img src=\'/images/ajax/loading.png\' alt=\'*\'/>";
},
dinamic_dialog:function(method,url,elementId)
{
var request=ajax.xhr();
var ei=document.getElementById(elementId);
request.onreadystatechange=function(){
if(request.readyState==4)
{
ei.innerHTML="Проблемы с соеденением..";
if(request.status==200)
{
ei.innerHTML=request.responseText;
}
}
}
request.open(method,url,true);
request.send(null);
}
}
Адаптированный ajax