Подсказки на компьютерную тематику

Можно подсмотреть, если забыли…

Как создать простой пример работы AJAX с JS и PHP

Для чего нужен AJAX

    AJAX – это технология, которая выполняет следующие действия:

  • на языке Javascript отправляет в фоновом режиме данные из определенных HTML тегов страницы на сервер
  • обрабатывает их на серверном языке PHP при необходимости используя базу данных
  • получает и при необходимости обрабатывает ответные данные опять же на Javascript
  • выводит результат в заданном HTML разделе страницы
  • Причем все это может происходить незаметно для пользователя – без перезагрузки страницы сайта!

Способы передать данные в PHP через AJAX

    Для передачи данных из браузера на сервер используется два метода, которые не должны одновременно применяться в одном файле проекта:

  • метод GET
  • var varjs=3;//передаваемое значение
    req.open('GET', 'example.php?var='+varjs, true);//метод, файл обработки, передаваемая переменная со значением
    req.send(null); // отослать запрос
  • метод POST
  • var varjs1=5;//передаваемое значение
    req.open('POST', 'example.php', true);//метод и файл обработки
    req.setRequestHeader('Content-type','application/x-www-form-urlencoded');//передаваемый заголовок
    req.send('blacklist1='+varjs1); // отослать запрос с передаваемой переменной со значением

Реализация работы AJAX и PHP

Пример сайта с асинхронной передачей данных

    Для работы простейшего ресурса, использующего незаметные для пользователя методы отправки и получения данных нужно создать несколько файлов с именами, созданными для образца:

  • index.php – основной файл, который будет виден пользователю
  • ajax.js – файл с функцией создания объекта AJAX
  • example.js – документ на JS, который отправит и получит данные
  • example.php – код на PHP, выполняющий действия на сервере

Пример простого сайта с AJAX

Основной файл index.php, выводимый в браузере


<!DOCTYPE html>
<html>
<head>
<!--Подключение файла с ajax-->
<script src="ajax.js" type="text/javascript"></script>
<!--Подключение файла с кодом JS-->
<script src="example.js" type="text/javascript"></script>
</head>
<body>
<!--Блок в котором появится результат работы ajax-->
<div class='ajaxresult'></div>
<!--Выполнение функции, исполняющей код на JS при загрузке документа-->
<script>onload='functionforajax()';</script>
<!--Исполнение функции, исполняющей код на JS каждые 5 секунд-->
<script>setInterval('functionforajax()',5000);</script>
</body>
</html>


Обязательный файл ajax.js, создающий объект AJAX


function getXmlHttp(){
var Request = false;
if (window.XMLHttpRequest)
{
//Gecko-совместимые браузеры, Safari, Konqueror
Request = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
//Internet explorer
try
{
Request = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (CatchException)
{
Request = new ActiveXObject("Msxml2.XMLHTTP");
}
}
if (!Request)
{
alert("Невозможно создать XMLHttpRequest");
}
return Request;
}


Документ на JS example.js, работающий с сервером

function functionforajax(){
//создать объект для запроса к серверу
var req = getXmlHttp();

//указать блок в который будет выводиться результат
var ajaxresult= document.getElementsByClassName('ajaxresult')[0];

//код, работающий с PHP
req.onreadystatechange = function() {
if (req.readyState == 4) {
if(req.status == 200) {
// если статус 200 (ОК) - выдать ответ пользователю
//вывести результат в указанный блок
ajaxresult.innerHTML=req.responseText;
}}}

//В одном файле рекомендуется одновременно использовать только один из запросов GET или POST!

//1 метод GET
//запрос к файлу PHP с передачей значений переменных методом GET
//указать значение переменной, которое будет передано на сервер
var varjs=3;
req.open('GET', 'example.php?var='+varjs, true);
req.send(null); // отослать запрос

//2 метод POST
//запрос к файлу PHP с передачей значений переменных методом POST
//указать значение переменной, которое будет передано на сервер
var varjs1=5;
req.open('POST', 'example.php', true);
req.setRequestHeader('Content-type','application/x-www-form-urlencoded');
req.send('blacklist1='+varjs1); // отослать запрос
}


Файл на сервере example.php, работающий с запросами от JS

<?php
//получение переменной из JS файла
$varphp=$_GET['var'];
echo "3=".$varphp;

//получение переменной из JS файла
$varphp1=$_POST['blacklist1'];
echo "5=".$varphp1;

//проведение вычислений
$resultphp=$varphp*$varphp1;

//вывод результата вычислений
echo "3*5=".$resultphp;
?>

Как создать простой пример работы AJAX с JS и PHP

Для чего нужен AJAX

    AJAX – это технология, которая выполняет следующие действия:

  • на языке Javascript отправляет в фоновом режиме данные из определенных HTML тегов страницы на сервер
  • обрабатывает их на серверном языке PHP при необходимости используя базу данных
  • получает и при необходимости обрабатывает ответные данные опять же на Javascript
  • выводит результат в заданном HTML разделе страницы
  • Причем все это может происходить незаметно для пользователя – без перезагрузки страницы сайта!

Способы передать данные в PHP через AJAX

    Для передачи данных из браузера на сервер используется два метода, которые не должны одновременно применяться в одном файле проекта:

  • метод GET
  • var varjs=3;//передаваемое значение
    req.open('GET', 'example.php?var='+varjs, true);//метод, файл обработки, передаваемая переменная со значением
    req.send(null); // отослать запрос
  • метод POST
  • var varjs1=5;//передаваемое значение
    req.open('POST', 'example.php', true);//метод и файл обработки
    req.setRequestHeader('Content-type','application/x-www-form-urlencoded');//передаваемый заголовок
    req.send('blacklist1='+varjs1); // отослать запрос с передаваемой переменной со значением

Реализация работы AJAX и PHP

Пример сайта с асинхронной передачей данных

    Для работы простейшего ресурса, использующего незаметные для пользователя методы отправки и получения данных нужно создать несколько файлов с именами, созданными для образца:

  • index.php – основной файл, который будет виден пользователю
  • ajax.js – файл с функцией создания объекта AJAX
  • example.js – документ на JS, который отправит и получит данные
  • example.php – код на PHP, выполняющий действия на сервере

Пример простого сайта с AJAX

Основной файл index.php, выводимый в браузере


<!DOCTYPE html>
<html>
<head>
<!--Подключение файла с ajax-->
<script src="ajax.js" type="text/javascript"></script>
<!--Подключение файла с кодом JS-->
<script src="example.js" type="text/javascript"></script>
</head>
<body>
<!--Блок в котором появится результат работы ajax-->
<div class='ajaxresult'></div>
<!--Выполнение функции, исполняющей код на JS при загрузке документа-->
<script>onload='functionforajax()';</script>
<!--Исполнение функции, исполняющей код на JS каждые 5 секунд-->
<script>setInterval('functionforajax()',5000);</script>
</body>
</html>


Обязательный файл ajax.js, создающий объект AJAX


function getXmlHttp(){
var Request = false;
if (window.XMLHttpRequest)
{
//Gecko-совместимые браузеры, Safari, Konqueror
Request = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
//Internet explorer
try
{
Request = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (CatchException)
{
Request = new ActiveXObject("Msxml2.XMLHTTP");
}
}
if (!Request)
{
alert("Невозможно создать XMLHttpRequest");
}
return Request;
}


Документ на JS example.js, работающий с сервером

function functionforajax(){
//создать объект для запроса к серверу
var req = getXmlHttp();

//указать блок в который будет выводиться результат
var ajaxresult= document.getElementsByClassName('ajaxresult')[0];

//код, работающий с PHP
req.onreadystatechange = function() {
if (req.readyState == 4) {
if(req.status == 200) {
// если статус 200 (ОК) - выдать ответ пользователю
//вывести результат в указанный блок
ajaxresult.innerHTML=req.responseText;
}}}

//В одном файле рекомендуется одновременно использовать только один из запросов GET или POST!

//1 метод GET
//запрос к файлу PHP с передачей значений переменных методом GET
//указать значение переменной, которое будет передано на сервер
var varjs=3;
req.open('GET', 'example.php?var='+varjs, true);
req.send(null); // отослать запрос

//2 метод POST
//запрос к файлу PHP с передачей значений переменных методом POST
//указать значение переменной, которое будет передано на сервер
var varjs1=5;
req.open('POST', 'example.php', true);
req.setRequestHeader('Content-type','application/x-www-form-urlencoded');
req.send('blacklist1='+varjs1); // отослать запрос
}


Файл на сервере example.php, работающий с запросами от JS

<?php
//получение переменной из JS файла
$varphp=$_GET['var'];
echo "3=".$varphp;

//получение переменной из JS файла
$varphp1=$_POST['blacklist1'];
echo "5=".$varphp1;

//проведение вычислений
$resultphp=$varphp*$varphp1;

//вывод результата вычислений
echo "3*5=".$resultphp;
?>