Форум: Форум PHPФорум ApacheФорум Регулярные ВыраженияФорум MySQLHTML+CSS+JavaScriptФорум FlashРазное
Новые темы: 0000000
Самоучитель PHP 5 / 6 (3 издание). Авторы: Кузнецов М.В., Симдянов И.В. MySQL на примерах. Авторы: Кузнецов М.В., Симдянов И.В. MySQL 5. В подлиннике. Авторы: Кузнецов М.В., Симдянов И.В. PHP Puzzles. Авторы: Кузнецов М.В., Симдянов И.В. C++. Мастер-класс в задачах и примерах. Авторы: Кузнецов М.В., Симдянов И.В.
ВСЕ НАШИ КНИГИ
Консультационный центр SoftTime

HTML+CSS+JavaScript

Выбрать другой форум

 

Здравствуйте, Посетитель!

вид форума:
Линейный форум Структурный форум

тема: Типовые решения на AJAX.
 
 автор: Владимир55   (17.06.2009 в 09:28)   письмо автору
 
 

Поискав в сети информацию по запросу «Что такое AJAX», я понял, что это очень полезные, но чрезвычайно сложные методы. Не знаю, часто ли их применяют на практике, но если все же применяют, то наверняка есть типовые решения, позволяющие понять суть дела.

К примеру, как на AJAX будет выглядеть вот такой ввод информации, позволяющий получить ответ без перезагрузки страницы:
<?php

    $forma 
'<form method="post">
    <input type="text" name="im">
    <input type="submit" value="Ввести">
    </form>'
;

    
$im = @$_POST['im'];
    if (!
$im)
    {
          echo 
"<br>$forma";
          die();        
// Остановка скрипта
    
}


    if (
$im == "Вова") echo "Верно!";
    else echo 
"Попробуйте ещё раз.";

  Ответить  
 
 автор: Zeper   (17.06.2009 в 15:34)   письмо автору
 
   для: Владимир55   (17.06.2009 в 09:28)
 

Не знаю, зачем тут использовать AJAX, все на Javascript легко и хорошо делается...

  Ответить  
 
 автор: Владимир55   (17.06.2009 в 16:05)   письмо автору
 
   для: Zeper   (17.06.2009 в 15:34)
 

А на AJAX сложно и плохо?

  Ответить  
 
 автор: Zeper   (17.06.2009 в 16:25)   письмо автору
 
   для: Владимир55   (17.06.2009 в 16:05)
 

Насколько я понял, вам нужно что-то вывести на экран, в зависимости от содержимого формы. Так зачем догружать страничку, если можно на стороне клиента все сделать, чем занимается javascript. Доступ к содержимому инпута можно получить так: document.имя формы.имя inputa.value

  Ответить  
 
 автор: Владимир55   (17.06.2009 в 17:49)   письмо автору
 
   для: Zeper   (17.06.2009 в 16:25)
 

Нет, Zeper, мне обязательно нужно взаимодействие с сервером.
Я написал для примера самое простейшее, чтобы высветить алгоритм. А в реале обработка результатов ввода более сложна и требует рнр. Вот по этой причине я хочу освоить такой тип взаимодействия, как AJAX.

Вы сами владеете AJAX?

  Ответить  
 
 автор: Zeper   (17.06.2009 в 18:40)   письмо автору
 
   для: Владимир55   (17.06.2009 в 17:49)
 

Да, владею. Я не так понял, что вы хотели. Чтобы взаимодействовать с сервером без перезагрузки страницы нужно использрвать объект XMLHTTPRequest. И еще раз сформулируйте, что именно вы хотите услышать в этой теме? Не совсем понятен смысл приведенного вами выше кода.

  Ответить  
 
 автор: Владимир55   (17.06.2009 в 19:28)   письмо автору
 
   для: Zeper   (17.06.2009 в 18:40)
 

Больше всего мне хотелось бы увидеть в стиле AJAX код, который на клиентской машине дал бы форму (или ее AJAX аналог, если в AJAX форма так не задается):
<form method="post"> 
    <input type="text" name="im"> 
    <input type="submit" value="Ввести"> 
    </form>


Затем какой-то код, который средствами AJAX передаст на сервер переменную $im = $_POST['im'];

И код, который с сервера передаст браузеру результат обработки этого кода (аналог
if ($im == "Вова") echo "Верно!"; 
    else echo "Неверно."; 

выведя слова "Верно/Неверно" в небольшом окошке.

Это сложное дело?

  Ответить  
 
 автор: ddhvvn   (17.06.2009 в 19:41)   письмо автору
 
   для: Владимир55   (17.06.2009 в 19:28)
 

нет, я бы сейчас Вам написал эти несколько строк, но что значит "который на клиентской машине дал бы форму (или ее AJAX аналог, если в AJAX форма так не задается" ?

  Ответить  
 
 автор: Владимир55   (17.06.2009 в 19:51)   письмо автору
 
   для: ddhvvn   (17.06.2009 в 19:41)
 

Ну, в общем, что бы посетитель увидел форму для ввода. Хотя бы с одним окном.

  Ответить  
 
 автор: Zeper   (17.06.2009 в 20:38)   письмо автору
 
   для: Владимир55   (17.06.2009 в 19:51)
 

Нужен отдельный php файл, который будет в зависимлсти от пременной $im выдавать верно или не верно, пускай это будет check.php.


if ($_GET["im"] == "Вова") echo "Верно!";  else echo "Неверно.";
 


Файл, в котором находится форма:

<script language="javascript">
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;
}

var xmlhttp = getXmlHttp();
function sendData() 
  {
   var im = document.myform.name.value;
   xmlhttp.open('POST', 'check.php?im='+im+'', false);
   xmlhttp.send(null);
   var status = xmlhttp.responseText;
   alert (status);
  }
</script>

<form name="myform" onsubmit="sendData(); return false;">
<input name="name" type="text"><br>
<input type="submit" value="Проверить">
</form>


Сначала создается объект xmlhttprequest фунцией getXmlHttp();, далее в файл check.php посылаются данные, тот в зависимости от переменной im выводит верно или неверно. Это значение попадает в переменную status.
Вам это хотелось увидеть?

  Ответить  
 
 автор: ExtraBrain   (17.06.2009 в 20:43)   письмо автору
 
   для: Владимир55   (17.06.2009 в 09:28)
 

ajax.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Демонстрация технологии AJAX</title>

<script type="text/javascript" language="JavaScript">

var req;      // Глобальный объект для аяксовских запросов
var ajaxerr;  // Переменная для накопления ошибок

//--------------------------------------------------------------------
// Функция создаёт глобальный объект "req" для аяксовских запросов, 
// назначает функцию для приема ответа (GetOtvet) и отправляет запрос 
// через AJAX на сервер
//--------------------------------------------------------------------
function SendZapros(url) {
  req=false;

  if(window.XMLHttpRequest)      req=new XMLHttpRequest();                   // Для всех кроме IE
  else if(window.ActiveXObject)  req=new ActiveXObject("Microsoft.XMLHTTP"); // Для IE

  if(req) req.onreadystatechange=GetOtvet;  // GetOtvet - Функция котороя будет принимать ответ
  else    alert("Объект не создан");

  try { req.open("GET",url,true); } catch(e) { ajaxerr++; }
  try { req.send(null); } 
  catch(e) { ajaxerr++; if(ajaxerr<3) SendZapros(url+'&_c_='+Math.random()); else alert(e); }
}

//-------------------------------------------------------------------- 
// Функция принимающая ответ на запрос
//-------------------------------------------------------------------- 
function GetOtvet() {
var dt;

 if(req.readyState==4){
    if(req.status==200){
       dt=req.responseXML.getElementsByTagName('otvet')[0].firstChild.data;
       Show_Rezultat(dt); // Передаём принятые данные на отображение
    }
    else {
       alert("Проблема с получением XML:\n"+req.statusText);
    }
 }

}

//-------------------------------------------------------------------- 
// Функция отображающая результат
//-------------------------------------------------------------------- 
function Show_Rezultat(data) {
  document.getElementById('rez1').innerHTML=data;
}

//-------------------------------------------------------------------- 

</script>

</head>

<body style="font-size: 16px">

<h1 style="font-size: 22px">Демонстрация технологии AJAX (WIN-1251)</h1>
<form>
<input type="text" id="numa" value="11"> * 
<input type="text" id="numb" value="19"> = 
<span style="font: normal 18px Arial;" id="rez1">[?]</span>
<br><br>
<input type="button" value="    Ok    " onclick="ajaxerr=0;SendZapros('ajax.php?a='+document.getElementById('numa').value+'&b='+document.getElementById('numb').value);">
</form>

</body>
</html>


ajax.php

<?
if (!isSet($a)) $a=0;
if (!isSet(
$b)) $b=0;

$rezultat=HTMLSpecialChars('<span style="font-size:45px;color:blue">Результат='.($a*$b).'</span>');

$rezultat='<?xml version="1.0" encoding="windows-1251" ?>
<telo>
 <otvet>'
.$rezultat.'</otvet>
</telo>'
;

header("Content-Type: application/xml");
echo 
$rezultat;

?>

  Ответить  
 
 автор: PAT   (17.06.2009 в 20:45)   письмо автору
 
   для: Владимир55   (17.06.2009 в 09:28)
 

>"Поискав в сети информацию по запросу «Что такое AJAX», я понял, что это очень полезные,
но чрезвычайно сложные методы."


AJAX, по большому счёту, это всего лишь один из способов организации
связи текущей страницы с сервером. Причём это не самый лучший (со всех точек зрения)
способ. Но просто он - самый МОДНЫЙ сегодня.
И он - этот способ - совершенно не сложен.

Возможно вас заинтересует тема по ссылке http://www.softtime.ru/forum/read.php?id_forum=4&id_theme=64682

[поправлено модератором]

  Ответить  
 
 автор: cheops   (17.06.2009 в 23:47)   письмо автору
 
   для: Владимир55   (17.06.2009 в 09:28)
 

Возможно вас заинтересует библиотека jQuery.

  Ответить  
Rambler's Top100
вверх

Rambler's Top100 Яндекс.Метрика Яндекс цитирования