Главная / Мой вордпресс / AJAX это просто. Часть 3

AJAX это просто. Часть 3

AJAX это просто. Часть 3Сегодня как и обещал, выйдет последняя и заключительная статья из цикла AJAX это просто. В прошлой статье мы разобрали основные принципы работы с AJAX и рассмотрели код необходимый для создания приложения с использованием этой технологии. Сегодня я рассмотрю пример простейшего AJAX приложения, дам основные комментарии и ещё раз повторю некоторые нюансы.

Ну что же, давайте посмотрим, что у нас должно получиться в итоге

Выглядит не сложно, не так ли? А теперь давайте рассмотрим, что собою представляет код данного приложения.

Файл ajax.html

<script type="text/javascript" src="http://kirilqasblog.ru/upload/ajax.js"></script>
<div style="float: left; margin: 10px 10px 10px 10px">
  <div id="printdivsinh">Проголосуйте пожалуйста</div>
  <input type="submit" id="but1" value="Голосовать" onClick="document.getElementById(printdivsinh).innerHTML = Ожидается ответ от сервера;
makeSinhRequest(http://kirilqasblog.ru/upload/ajax.php,par=sinh);">
</div>
<div style="float: left; margin: 10px 10px 10px 10px"">
  <div id="printdivasinh">Проголосуйте пожалуйста</div>
  <input type="submit" id="but2" value="Голосовать" onClick="makeASinhRequest(http://kirilqasblog.ru/upload/ajax.php,par=asinh);
document.getElementById(printdivasinh).innerHTML = Ожидается ответ от сервера;">
</div>

В этом файле мы создаем два дива, для вывода и две кнопки, у которых на событие onClick подвешиваем две функции makeSinhRequest и makeASinhRequest из файла ajax.js. Эти функции выполняют синхронный и асинхронный запросы соответственно. Так же хочу заметить, что в первом варианте я сначала вывожу текст Ожидается ответ от сервера и только потом делаю запрос, когда во втором сначала делается запрос и потом выводиться текст. Это сделано в виду того, что если бы в первом варианте был сделан сначала запрос, а потом только вывелся текст, то мы бы не увидели того, что нам ответил скрипт. Т.к. сначала бы выполнился синхронный запрос и только потом вывелся наш текст, перекрыв ответ от сервера. Во втором же случае такого не происходит, потому что получение запроса производиться независимо(асинхронно) от вывода текста.

Файл ajax.js

 function getXmlHttp(){
  var xmlhttp;
  try {
  xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (e) {
  try {
  xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (E) {
  xmlhttp = false;
  }
  }
  if (!xmlhttp && typeof XMLHttpRequest!=undefined) {
  xmlhttp = new XMLHttpRequest();
  }
  return xmlhttp;
 }
 
 function makeSinhRequest(url,par) {
  http_request = false;
  
  http_request = getXmlHttp();

  if (!http_request) {
  alert(Giving up :(  Cannot create an XMLHTTP instance);
  return false;
  }
  
  http_request.open(POST, url, false);
  http_request.setRequestHeader(Content-Type, application/x-www-form-urlencoded);
  http_request.send(par);
  
  if (http_request.status == 200) {
  document.getElementById(printdivsinh).innerHTML = http_request.responseText;
  } else {
  alert(There was a problem with the request.);
  }
 }
 
 function makeASinhRequest(url,par) {
  http_request = false;
  
  http_request = getXmlHttp();

  if (!http_request) {
  alert(Giving up :(  Cannot create an XMLHTTP instance);
  return false;
  }
  
  http_request.onreadystatechange = alertContents;
  http_request.open(POST, url, true);
  http_request.setRequestHeader(Content-Type, application/x-www-form-urlencoded);
  http_request.send(par);
 }
 
 function alertContents() {
  if (http_request.readyState == 4) {
  if (http_request.status == 200) {
  document.getElementById(printdivasinh).innerHTML = http_request.responseText;
  } else {
  alert(There was a problem with the request.);
  }
  }
 }

Здесь мы создаем 4 функции, давайте рассмотрим каждую из них в общих чертах.

getXmlHttp() создает объект необходимый для отправки запросов.

makeSinhRequest(url,par) функция выполняющая синхронный запрос на адрес url с параметрами par.

makeASinhRequest(url,par) функция выполняющая асинхронный запрос на адрес url с параметрами par.

И функция alertContents() предназначенная для обработки ответа сервера при асинхронном запросе.

Ну и непосредственно сам скрипт, отвечающий на запрос.

Файл ajax.php

<?php
 sleep(3);
 if ($_POST[par] == sinh) echo Ваш голос учтен синхронно;
 if ($_POST[par] == asinh) echo Ваш голос учтен асинхронно;
?>

Этот скрипт очень прост, он выполняет задержку sleep(3), для имитации задержки при отправление запроса на сервер (это делать не обязательно! Повторюсь ещё раз, это сделанно исключительно для имитации). И после этого проверяет параметр, переданный ему, и в зависимости от этого возвращает определенный ответ.

Вот в целом и все. Как я и говорил, не чего сложного. Если остались вопросы, то я всегда рад ответить в комментариях. Так же чуть ниже по тексту выложу исходник данного примера. А на сегодня все, до скорых или не очень встреч.

Оставить комментарий

Ваш email нигде не будет показанОбязательные для заполнения поля помечены *

*