Примеры AJAX
Примеры кода:
<div id="welcome">Сюда результат</div>
<script>
window.addEventListener("load",function()
{
var request=new XMLHttpRequest();//Экземпляр объекта XHR
var params, id=22, name='Гена';//POST данные
params="id="+id+"&name="+name; //POST запрос
request.open('POST','processing.php',true);//POST-запрос к php-файлу, true-асинхронный, false-синхронный
//В заголовке говорим что тип передаваемых данных закодирован.
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.addEventListener('readystatechange', function()
{
if ((request.readyState==4) && (request.status==200))//Статус 4-ответ пришёл, 200-ОК!
{
var welcome=document.getElementById('welcome'); //Элемент c id = welcome
welcome.innerHTML=request.responseText; //Вставить ответ сервера сюда
}
});
request.send(params);
});
</script>
А в processing.php пишем:
<?php
$output="Здравствуйте, Геннадий!<br>";
if ($_SERVER['REMOTE_ADDR'])
{
$output .= 'Ваш IP адрес: '. $_SERVER['REMOTE_ADDR']."<br>";
$output .= 'ID: '. $_POST['id']."<br>";
$output .= 'ИМЯ: '. $_POST['name']."<br>";
$output .= 'ВРЕМЯ: '. date('d.m.y H:i.s')."<br>";
}
else
$output .= 'Ваш IP адрес неизвестен.<br>';
echo $output;
?>
С использованием jQuery
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<button id="kn">Кнопка</button>
<div id="welcome">Сюда результат</div>
<script>
//Клик и запуск AJAX
$('button#kn').click(function(){
$(this).text('Нажал кнопку');
ajax_post('processing.php','id=55&name=Гена',$('#welcome'))
});
//AJAX
function ajax_post(url,post,kuda) // что кликнули, url,post, куда вставить
{
$.ajax({
type: 'POST',
url: url,
data: post,
timeout: 4000, // Ждем сек.
success: function(data) { // Удачно
kuda.html(data);
},
error: function(){ // НЕудачно
kuda.html('НЕТ данных!');
}
});
}
</script>
