CreeDo создал дневник Ajax в категории 31 Авг 2013
Сегодня хотел бы законспектировать очень полезную инструкцию в которой будет показано как исполнять php скрипты без перезагрузки самой страницы. Данная технология называется Ajax и очень широко используется при разработке веб проектов. Примеры работы ajax вы можете наблюдать на многих сайтах это добавления комментариев а также разнообразные голосования и опросы. На нашем сайте вы также можете наблюдать работу ajax на странице контакты.
Теперь давайте рассмотрим как переменить технологию ajax на примере. Для начала к нашему документу нужно подключить библиотеку Jquery самый простой способ подключения Jquery смотрим ниже:
1
<sсript language="JavaScript" type="text/javasсript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
2
</sсript>
далее нужно подключить скрипт который будет передовать переменные нашему скрипты и получать ответ
01
var req = Create();
02

03
function ge(id)
04
{
05
return document.getElementById(id);
06
}
07

08
function Create()
09
{
10
if(navigator.appName == "Microsoft Internet Explorer")
11
{
12
req = new ActiveXObject("Microsoft.XMLHTTP");
13
}
14
else
15
{
16
req = new XMLHttpRequest();
17
}
18
return req;
19
}
20

21
function Request(query)
22
{
23
req.open('post', 'полный путь к php скрипту' , true );
24
req.onreadystatechange = Refresh;
25
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=utf-8");
26
req.send(query);
27
}
28

29
function Refresh()
30
{
31
var a = req.readyState;
32

33
if( a == 4 )
34
{
35
var b = req.responseText;
36
document.getElementById('ajax').innerHTML = b;
37
}
38
else
39
{
40
document.getElementById('ajax').innerHTML = '<br><center>Отправка.........</center>';
41

42
}
43
}
44
/////Собераем все элементы формы которые будем отправлять
45
function Pusk()
46
{
47
var query;
48
var txt11 = encodeURIComponent(ge('name').value);
49
var txt22 = encodeURIComponent(ge('email').value);
50
query = 'name='+txt11+'&email='+txt22;
51
Request(query);
52
}
В строке 23 мы прописываем полный путь к php файлу который у нас выступает в роли обработчика, далее строки 48, 49 здесь создаем две переменные txt11, txt22 в которые заносим значения из формы с input id="email" и input id="name" форма отправки выглядит так:
1
<input id="name" type="text" name="firstname">
2

3
<input id="email" type="text" name="email">
4

5
<input type="submit" value="Отправить" onclick="Pusk()">
Далее в строке 50 мы все это передаем нашему скрипту методом post, а передаем следующие переменные name и email. Также нужно создать див контейнер с id="ajax" в котором будет выводится результат работы нашего скрипта.
Сам php скрипт для примера может выглядеть примерно так:
1
$name = isset($_POST['name'])?$_POST['name']:NULL;
2
$email = isset($_POST['email'])?$_POST['email']:NULL;
3

4
echo "Меня зовут $name и мой емейл $email";
Вот такой не хитрый js скрипт который поможет исполнять ваши php скрипты без перезагрузки страницы