Главная » Ajax » Ajax+php Начало

Ajax+php Начало

Аякс (AJAX) это довольно просто, на много проще, чем кажется на первый взгляд. Сногсшибательный эффект от его применения повергает многих в уныние - мол мне так никогда не сделать.

 

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

Как это делается.
Сначала отправка данных. Для того, что бы отправить запрос, создадим в JAVASCRIPT объект:

var req = Create();

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://www.mysite.com/ajax.php' , true );
req.onreadystatechange = Refresh;
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=utf-8");
req.send(query);             
}  


Здесь:

 

req.open('post', 'http://www.mysite.com/ajax.php' , true );

это сам запрос. Сначала определяем метод отправки данных. Предпочтительнее POST, так как он не имеет ограничений по количеству передаваемых символов. Дальше адрес приемника, то есть скрипта, которому запрос адресован. Это тоже самое, что action в форме.Следом - true. Это команда продолжать скрипт вне зависимости от того, отправлен запрос или нет.

 

Дальше, вот тут:

 

req.onreadystatechange = Refresh;

мы определяем функцию (Refresh()), которая будет вызвана после отправки запроса. Она и примет ответ сервера.

 

Вот это:

 

req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=utf-8");

отправка заголовка. Браузер всегда отправляет заголовки, прежде чем отправить данные. Для того, что бы сервер знал, что ему ждать и в какой кодировке. Кодировка у аякса должна быть utf-8, иначе могут возникнуть проблемы.

 

Ну а это:

 

req.send(query);


непосредственно сама отправка запроса, то же самое, что кнопка submit в форме. В переменной query должны содержаться данные для сервера.

Формируются они так.

 

Допустим нужно отправить содержимое текстового поля. Получим его в скрипт и сформируем строку запроса:

 

function Pusk()
{ 
var txt = encodeURIComponent(document.getElementById('txt').value);
var query = 'txt='+txt;
Request(query)
}

Запись'txt='+txt обозначает, что POST переменной txt присвоено значение из js переменной txt. То есть содержимое текстового поля, которое мы получили методомgetElementById.

Тут есть маленькая тонкость. Если нужно передать несколько переменных, то их нужно раздеять амперсандом, так же как в URL:
var query = 'txt1='+txt1+'&txt2='+txt2;

но если в тексте попадется амперсанд, то все нарушится. Так же аякс реагирует на + = и кое что еще. Что бы этого избежать, нужно данные перед отправкой закодировать, что мы и сделали:


encodeURIComponent(document.getElementById('txt').value);

Дальше нам нужно принять ответ сервера. Для этого напишем функцию:

 

function Refresh()
{
var a = req.readyState; 
 
if( a == 4 )
{
var b = req.responseText;
document.getElementById('ajax').innerHTML = b;
}
else
{
document.getElementById('ajax').innerHTML = '<img src="prel.gif" />';
}
}


которая будет вызвана после отправки запроса. Мы это уже проходили (см выше)

 

Что тут. Сначала мы смотрим состояние связи. Нас интересует 4, потому что это обозначает - ответ принят и загружен. Получить его можно методом

req.responseText

ну и прописать в какой нибудь приемник, допустим div. А пока ответ не получен, в этот приемник для красоты нарисуем какой нибудь индикатор.

Вот и всё, весь аякс. Осталось на сервере принять запрос, обработать его и выдать результат, все точно так же, как и при обычном взаимодействии.

Вто что у нас получилось:

 

<html>
<head>
<script type="text/javascript" language="javascript">
var req = Create();

function ge(id)
{
    return document.getElementById(id);
}

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', 'ajax.php' , true );
req.onreadystatechange = Refresh;
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=utf-8");
req.send(query); 
} 

function Refresh()
{
    if( req.readyState == 4 )
    ge('ajax').innerHTML = req.responseText;
    else
    ge('ajax').innerHTML = '<img src="prel.gif" />';

}
function Pusk()
{ 
var query; 

    query ='txt='+encodeURIComponent(ge('myid').value);

Request(query);
}
</script>
</head>
<body>
<div id="ajax"></div>

<input type='text'  id='myid' ><br>
<input type="button" value="ТЫРЦ" onClick="Pusk()">
<img src="prel.gif" width="1" height="1" />
</body>
</html>

А на сервере так: (

ajax.php

)


<?php
$txt = isset($_POST['txt'])?$_POST['txt']:NULL;
sleep(3);
echo "<br>";
echo $txt;
?>

То есть мы принимаем данные и отправляем их обратно. Можно их обработать, занести в базу, достать что то другое и так далее, всё как обычно. Тут для наглядности мы усыпили скрипт на 3 секунды. Ну вот и всё, можете убедиться.




Рекомендуем почитать

 

Добавить комментарий


Ваше имя:


Комментарий:


Введите: Картинка