ресурс для начинающих веб-разработчиков
комплексные веб-услуги по созданию сайтов

Справочный материал по основным языкам программирования и верстки сайтов.

Готовая методика создания простых и сложных динамичных сайтов, с использованием PHP и MySQL.

Использование веб-редактора Adobe Dreamweaver в разработке сайтов.

Использование графических редакторов Adobe Flash, Adobe Photoshop, Adobe Fireworks в подготовке веб-графики.

Разработка веб-сайтов под "ключ".

Разработка отдельных фрагментов сайтов, консультации по вопросам верстки веб-страниц и веб-программирования.

Высокоуровневые методы создания Ajax запросов и обработки данных с сервера

Обработка данных полученных с сервера

Технология Ajax - это улица с двусторонним движением. Программа JavaScript посылает данные на сервер, а тот, в свою очередь, возвращает ответные сведения программе JavaScript, которая может использовать их для обновления страницы. Ранее мы изучили, как форматировать данные и посылать их на сервер, используя функции get() и post(). Сейчас вы узнаете, как получать и обрабатывать ответ сервера.

Но передавать данные на сервер и получать их обратно, можно не только с помощью функций get() и post(), а и более простым способом. Рассмотрим его.

В примере ниже мы пересылаем скрипту test72.php переменную x со значением 8 и переменную y со значением 14. Скрипт в свою очередь принимает эти переменные, производит их сложение и отправляет результат обратно.

Скрипт test72.php имеет следующий код:

sleep(1);
$x = $_REQUEST['x'];
$y = $_REQUEST['y'];
if(!empty($y)&&!empty($x)){
echo "Сумма слагаемых равна  ".$x+=$y; 
}else{
	echo "Ошибка в отправлении запроса";
}

Код js скрипта и файлов следующий:


$(document).ready(function(){

$("#but1").click(function(){
$("#par1").load("test72.php","x=8&y=14");
})

})
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Простейший пример обработки полученных данных с сервера</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

$("#but1").click(function(){
$("#par1").load("test72.php","x=8&y=14");
})

});
</script>
</head>
<p id="par1">После нажатия на кнопку в данном поле будет отображен результат выполнения скрипта test72.php.</p>
<input id="but1" type="button" value="Передать данные скрипту" />
</body>
</html>

В этом примере функция load("test72.php","x=8&y=14") передает данные серверному файлу test72.php и тут же возвращает их обратно в уже обработанном виде.

Попробуем несколько усложнить задачу.Возьмем пример с отправкой данных на сервер через HTML-форму. Регистрация пользователей на сайте является типичным явлением и мы будем рассматривать именно этот случай. Для примера возьмем самую простую форму регистрации пользователей.

 <form  id="form" >
<label for="login">Ваш логин:</label><br>
<input name="login" type="text" id="login" required placeholder="Введите логин"><br><br>
<label for="password">Ваш пароль:</label><br>
<input name="password" type="password" id="password" required placeholder="Введите пароль"><br><br>
<input id="sub" type="submit" value="Передать данные скрипту" >
</form>

Как вы заметили в теге <form> отсутствуют самые важные параметры: action и method, без которых в классическом случае не возможно было бы передать данные на сервер. Но мы использум технологию Ajax и потому все данные будут переданы, а сервер обработает их и вернет назад.

Данные пользователей будут храниться в базе данных test в таблице user_test. Структура таблицы представлена ниже:

CREATE TABLE IF NOT EXISTS `user_test` (
  `id` int(11) NOT NULL,
  `login` varchar(15) NOT NULL,
  `password` varchar(255) NOT NULL,
  `date` datetime NOT NULL
) ENGINE=InnoDB AUTO_INCREMENT=41 DEFAULT CHARSET=utf8;

Обработка формы будет происходить в файле login1.php. Его код представлен ниже. В обработчике проверяется одна позиция - login. Если в БД уже существуе логин с таким же названием, то предлагается ввести другое имя и повторить проверку. Если все нормально, данные пользователя заносятся в БД и результат возвращается на страницу с формой.


//login1.php
// Устанавливаем соединение с базой данных
$db = new mysqli("localhost","root","root","test");
function test_input($data) {//функция проверки переменных формы
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
sleep(1);
if(!empty($_REQUEST["login"])&&!empty($_REQUEST["password"])){
$login=test_input($_REQUEST["login"]);
$password=test_input(md5($_REQUEST["password"]));
$result = $db->query("SELECT * FROM user_test WHERE login='$login'");
$myrow =$result->fetch_array();
if($_REQUEST['login']!==$myrow['login']){
echo "Авторизация прошла успешно, ваш логин: <strong>" .$_REQUEST['login']. "</strong>, ваш пароль: <strong>" .$_REQUEST['password']."</strong>";
$result = $db->query("INSERT INTO user_test(id, login, password, date) VALUES(NULL,'$login','$password', NOW())") or die("Ошибка регистрации");

}else{

echo "Это имя <strong>".$_REQUEST['login']. "</strong> уже существует - вернитесь на форму регистрации и выберите другое имя";
}
}else{
exit( "Ошибка в передаче данных");
}

Теперь рассмотрим JavaScript-код, который будет использован для выполнения поставленной задачи. При нажатии на кнопку submit данные должны уйти на серверную страницу. Это мы будем осуществлять через функцию load(), входящуюю в библиотеку jQuery.

   $("#form").submit(function(){
	   var formData = $(this).serialize();
      $("#main").load("login1.php", formData);
      return false;	 
   }

Как вы поняли функция serialize() извлекает значения login и password и далее с помощью метода load() передает их серверному сценарию файла login1.php и тут же извлекает уже обработанные данные серверного файла и передает в файл с формой.

На этом можно было бы и закончить, но код сценария предусматривает какое-то время на обработку данных на сервере. В этот томительный промежуток и вступает еще один сценарий Ajax - ajaxSend(), определяющий функцию, код которой будет выполнен перед отправлением AJAX запроса на сервер.

   $(document).ajaxSend(function(){
      $("#img").css("display","block");
   }

Этот код делает видимым анимированный gif-файл loader.gif. Как только сценарий передачи данных будет выполнен, вступает в работу другой метод ajaxComplete(), определяющий функцию, код которой будет выполнен когда AJAX запрос совершен.

    $(document).ajaxComplete(function(){
      $("#img").css("display","none");
   })

Данный скрипт опять делает невидимым gif-файл loader.gif.

О том, что Ajax запрос выполнен успешно нам сообщит диалоговое окно. А поможет нам в этом метод ajaxSuccess(),определяющий функцию, код которой будет выполнен если AJAX запрос совершен успешно.

  $(document).ajaxSuccess(function(){
	  var formData = $("#form").serialize();	 
      alert("AJAX запрос успешно выполнен!" + formData);
   });

Если в сценарии допущена ошибка, то сценарием предусмотрен еще один метод Ajax - ajaxError(), определяющий функцию, код которой будет выполнен если во время выполнения AJAX запроса произойдет ошибка. Об этом нам опять же сообщит диалоговое окно.

   $(document).ajaxError(function(){
      alert("Выполнение AJAX запроса завершено с ошибкой.\nПроверьте Ваш запрос на наличие ошибок и попробуйте отправить его еще раз.");
   });

Протестируем наш сценарий.


$(document).ready(function(){
$(document).ajaxSend(function(){
$("#img").css("display","block");
})
$(document).ajaxComplete(function(){
$("#img").css("display","none");
})
$(document).ajaxError(function(){
alert("Выполнение AJAX запроса завершено с ошибкой.\nПроверьте Ваш запрос на наличие ошибок и попробуйте отправить его еще раз.");
});
$(document).ajaxSuccess(function(){
var formData = $("#form").serialize();
alert("AJAX запрос успешно выполнен!" + formData);
});
$("#form").submit(function(){
var formData = $(this).serialize();
$("#main").load("login1.php", formData);
return false;
})

});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Простой способ обработки данных полученных с сервера с помощью Ajax</title>
<style>
#img
{
display:none;
position:absolute;
top:150px;
left: 70px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(document).ajaxSend(function(){
$("#img").css("display","block");
})
$(document).ajaxComplete(function(){
$("#img").css("display","none");
})
$(document).ajaxError(function(){
alert("Выполнение AJAX запроса завершено с ошибкой.\nПроверьте Ваш запрос на наличие ошибок и попробуйте отправить его еще раз.");
});
$(document).ajaxSuccess(function(){
var formData = $("#form").serialize();
alert("AJAX запрос успешно выполнен!" + formData);
});
$("#form").submit(function(){
var formData = $(this).serialize();
$("#main").load("login1.php", formData);
return false;
})

});
</script>
</head>
<body>
<div id="main"></div>
<form id="form" >
<label for="login">Ваш логин:</label><br>
<input name="login" type="text" id="login" required placeholder="Введите логин"><br><br>
<label for="password">Ваш пароль:</label><br>
<input name="password" type="password" id="password" required placeholder="Введите пароль"><br><br>
<input id="sub" type="submit" value="Передать данные скрипту" >
</form>

<p id="img"> <img src="../../images/loader.gif" />Пожалуйста, подождите, файл находится в обработке.</p>

</body>
</html>