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

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

Как создать простой сайт с технологией AJAX в связке с JS и PHP

Краткое описание AJAX

AJAX – это технология, позволяющая выполнять какой-либо код на серверном языке PHP, затем выводить этот результат в Javascript, обрабатывать при необходимости и выводить в нужном разделе сайта без перезагрузки страницы.

Пример работающего кода для сайта с использованием AJAX с Javascript и PHP

    Структура простейшего сайта с асинхронной технологией обращения к серверу без перезагрузки страницы:

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

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

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


<!DOCTYPE html>
<html>
<head>
<!--Подключение файла с ajax-->
<script src="ajax.js" type="text/javascript"></script>
<!--Подключение файла с кодом JS-->
<script src="jsforajax.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 в файле ajax.js


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;
}

Пример кода на Javascript в файле jsforajax.js для вывода результата


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

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

//код, работающий с PHP
req.onreadystatechange = function() {
if (req.readyState == 4) {
if(req.status == 200) {
// если статус 200 (ОК) - выдать ответ пользователю
//вывести результат в указанный блок
ajaxresult.innerHTML=req.responseText;
}}}
//запрос к файлу PHP с передачей значений переменных методом GET
req.open('GET', 'phpforajax.php?var='+varjs, true);
req.send(null); // отослать запрос
}

Пример кода на PHP в файле phpforajax.php и отправки результата в Javascript


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

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

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

Как создать простой сайт с технологией AJAX в связке с JS и PHP

Краткое описание AJAX

AJAX – это технология, позволяющая выполнять какой-либо код на серверном языке PHP, затем выводить этот результат в Javascript, обрабатывать при необходимости и выводить в нужном разделе сайта без перезагрузки страницы.

Пример работающего кода для сайта с использованием AJAX с Javascript и PHP

    Структура простейшего сайта с асинхронной технологией обращения к серверу без перезагрузки страницы:

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

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

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


<!DOCTYPE html>
<html>
<head>
<!--Подключение файла с ajax-->
<script src="ajax.js" type="text/javascript"></script>
<!--Подключение файла с кодом JS-->
<script src="jsforajax.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 в файле ajax.js


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;
}

Пример кода на Javascript в файле jsforajax.js для вывода результата


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

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

//код, работающий с PHP
req.onreadystatechange = function() {
if (req.readyState == 4) {
if(req.status == 200) {
// если статус 200 (ОК) - выдать ответ пользователю
//вывести результат в указанный блок
ajaxresult.innerHTML=req.responseText;
}}}
//запрос к файлу PHP с передачей значений переменных методом GET
req.open('GET', 'phpforajax.php?var='+varjs, true);
req.send(null); // отослать запрос
}

Пример кода на PHP в файле phpforajax.php и отправки результата в Javascript


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

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

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