Форум PHP программистов > Как правильно использовать AJAX

[ Поиск ] - [ Пользователи ] - [ Календарь ]

Полная Версия: Как правильно использовать AJAX

CJ_Junyor

7.11.2011 - 20:43

Нужен совет....

Есть форма с кнопкой submit.
По нажатии на кнопку данные идут на сервер ....
Там обрабатываются и по мере обработки на каждой итерации информация выводится на экран ...

Скрипт,соответственно ждет вывода этих данных прежде чем сможет полностью загрузить остальную страницу ....

Я хочу подключить к этому делу AJAX и вывести всю эту информацию в отдельное окно или фрейм ...

Чтобы при нажатии на кнопку Submit текущая страница оставалась без изменений, а появлялось, скажем, окошко (уменьшенных размеров с кнопками "свернуть","развернуть","закрыть" ) и в него выводились все данные полученные от работы скрипта.

Я примерно представляю как это сделать, но к сожалению очень плохо знаю js, могли бы Вы подсказать какие именно функции в каком формате должны быть чтобы решить эту задачу?

Спустя 17 минут, 35 секунд (7.11.2011 - 20:01) redreem написал(а):

обычно когда доходят до аджакса уже хорошо знают js. посоветую пользовать jQuery.load. чистый js - умрете пока отладите.

Спустя 36 минут, 55 секунд (7.11.2011 - 20:38) CJ_Junyor написал(а):

.....

Есть несколько файлов index.php,control.php,view.php,ajax.js (все лежат в одном каталоге):

index.php
----------------------------


<?php

  define('AJAX_EXE',1);
  
  require_once('control.php'); // подключаем файл контроллера
  require_once('view.php'); // форма

control.php
----------------------------


<?php

  defined('AJAX_EXE') or die('Don\'t move!');
  
  if(isset($_POST['base_id']) && !empty($_POST['base_id'])){

     // допустим возвращает на экран список
    for($i=0;$i<20;$i++)
       echo $i."\n";
  


  }

view.php
---------------------


<script src="ajax.js" type="application/javascript"></script>

<textarea id="AJAX" readonly="readonly" rows="5" cols="60" ></textarea>
<form name="test" action="#" method="POST">
<input type="hidden" id="base_id" name="base_id" value="base_1" />
<input name="add" type="button" value="Go Test" onclick="Start('base_1')"/>
</form>

ajax.js
--------------------



// JavaScript Document
<!--
var win;
var req = Create(); 

function Create(){  
    if(navigator.appName == "Microsoft Internet Explorer"){  
        req = new ActiveXObject("Microsoft.XMLHTTP");  
    }else{  
        req = new XMLHttpRequest();  
    }  
    return req;  
}

function Request(query) 
{ 
    req.open('post', 'index.php' , true );
    req.onreadystatechange = Refresh; 
    req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=utf-8"); 
    req.send(query);              
}


function Start(id)
{    
    alert("HELLO " + id);
    var query = 'base_id=' + document.getElementById('id').value;
    Request(query) 
}  

function Refresh() 
{ 
    var a = req.readyState;  

    if( a == 4 ) 
    { 
        var b = req.responseText; 
        document.getElementById('AJAX').innerHTML=b;
    } 
    else 
    { 
        document.getElementById('AJAX').innerHTML=b;
    } 
}



-->

=====================

По замыслу должно произойти следующее
- при нажатии на кнопку формы, отправляется AJAX запрос
- запрос попадает на index.php (в нашем случае попадает сначала на контролер)
- переменная base_id инициализирована функцией Start(), поэтому по логике мы должны попасть в цикл проверок
и начать возвращать результаты , т.е. числа от 0 до 20
- функция Refresh принимает их в виде текста и посылает в textarea с Id="AJAX"
-------------------------
В итоге: на экране в textarea должны появиться числа от 0 до 20, причем в режиме реального времени....

Проблема только в том, что ничего не происходит ((...

Вопрос, где я налажал ))?

Спустя 1 час, 9 минут, 55 секунд (7.11.2011 - 21:48) redreem написал(а):

да там нюансы на уровне "плюс минус кавычка".
вот рабочий пример аджакса на чистом js (с кем-то тут на форуме как-то тоже ковырялись).
в вашем коде лень разбираться. сопоставьте с моим и сами найдите где "недописано".
а вообще - jQuery берите и не парьтесь.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<html>
<script type="text/javascript">

xmlHttp = createXmlHttpRequestObject();

function createXmlHttpRequestObject() {
	var xmlHttp;
	if(window.ActiveXObject) {try {xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");}
	catch (e)
		{xmlHttp = false;}}
	else
	{try{ xmlHttp = new XMLHttpRequest();}
	catch(e){xmlHttp = false;}}
	if (!xmlHttp) alert("Ошибка создания объекта");else {return xmlHttp;}
}

function voit() {
	if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0) {
		name = encodeURIComponent(document.getElementById("Name").value);
		xmlHttp.open("GET", "/ins.php?name=" + name, true);
		xmlHttp.onreadystatechange = ServerResponse;
		xmlHttp.send(null);
	} else {setTimeout(voit(), 100);}
}

function ServerResponse() {
	if (xmlHttp.readyState == 4) {
		if (xmlHttp.status == 200) {
			welcome = xmlHttp.responseText;
			document.getElementById('vote_status').innerHTML = '<i>'+welcome+'</i>';
			setTimeout(voit(), 1000);
		} else {
			alert("Не могу связаться с сервером");
		}
	}
}


</script>
<BODY>
	<table>
		<tr>
			<td><label>Название детали</label></td>
			<td><label>Цена</label></td><td><label>Производитель</label></td>
			<td><label>В наличии/на заказ</label></td>
			<td></td>
		</tr>
		<tr>
			<td><input type="text" name="Name" id="Name"/></td>
			<td><input type="text" name="Cost" id="Cost"/></td>
			<td><input type="text" name="Manufacturer" id="Manufacturer"/></td>
			<td><select name="In_presence_to_order" id="In_presence_to_order"><option>В наличии</option><option>На заказ</option></select></td>
		</tr>
	</table>
	<br/><br/>
	<input type="button" value="Отправить" onclick="voit()"/>
	<div id="vote_status"> Здесь будет статус загрузки</div>
 
</body>
</html>

ins.php:

<?php
header('Content-Type: text/xml charset=windows-1251');
if (isset($_GET['Name'])) { $name = $_GET['Name']; if ($name == '') { unset($name);} }
if (isset($_POST['Cost'])) { $cost = $_POST['Cost']; if ($cost == '') { unset($cost);} }
if (isset($_POST['Manufacturer'])) { $manufacturer = $_POST['Manufacturer']; if ($manufacturer == '') { unset($manufacturer);} }
if (isset($_POST['In_presence_to_order'])) { $in_presence = $_POST['In_presence_to_order']; if ($in_presence == '') { unset($in_presence);} }
if (empty($name) or empty($cost) or empty($manufacturer) or empty($in_presence))
{
echo ("Вы ввели не всю информацию, вернитесь назад и заполните все поля!");exit;
}
if(isset($_POST['ins']))
{
include('/base.php');
$add = mysql_query("INSERT INTO `good`(`Name`,`Cost`,`Manufacturer`,`In_presence_to order`) VALUES('$name','$cost','$manufacturer','$in_presence')");
}
unset($_POST['ins']);
echo 'товар добавлен '.$name;
?>

Спустя 1 час, 4 минуты, 57 секунд (7.11.2011 - 22:53) CJ_Junyor написал(а):

redreem
Спасибо за помощь, почерпнул кое-что новое и вспомнил про статус 200 ))

Вообщем, более-менее работает стабильно....

У меня только вопрос:

AJAX - это же асинхронная технология, т.е. можно получать данные "на лету"

А у меня сейчас получается что он по прежнему ждет окончания работы сценария, а потом уже отображает ответы от сервера в отдельном <textarea>....
Как этого избежать?

сейчас стоит :

xmlHttp.readyState == 4

И к концу результатов он еще дописывает содержимое view.php, т.е. теги описания самой страницы с формой....

Хотелось бы чтобы в отдельном поле отображались лишь результаты работы скрипта....

Спустя 7 минут, 23 секунды (7.11.2011 - 23:00) redreem написал(а):

есть и асинхронный режим. я не пытался его использовать за ненадобностью, но в нете инфы полно.

Спустя 30 минут, 48 секунд (7.11.2011 - 23:31) CJ_Junyor написал(а):

Вот нашел интересную инфу по теме отображения информации через AJAX ответы до полного завершения ответа от сервера, думаю будет полезно:

Цитата

Состояние готовности HTTP отображает состояние или статус запроса. Оно используется для определения того, начат ли запрос, принимается ли ответ, или завершен ли цикл запрос/ответ. Это состояние помогает также при определении того, можно ли читать текст или данные, которые сервер мог предоставить в ответе. Вы должны знать о пяти состояниях готовности в ваших Ajax-приложениях:

0: Запрос не инициализирован (перед вызовом open()).
1: Запрос инициализирован, но не был передан (перед вызовом send()).
2: Запрос был передан и обрабатывается (на данном этапе вы можете обычно получить заголовки содержимого из ответа).
3: Запрос обрабатывается; часто в ответе доступны некоторые частичные данные, но сервер не закончил свой ответ.
4: Ответ завершен; вы можете получить ответ сервера и использовать его.
Как и почти все кросс-браузерные проблемы, эти состояния готовности используются несколько непоследовательно. Вы могли бы ожидать, что состояния всегда изменяются от 0 к 1, от 1 к 2, от 2 к 3, от 3 к 4, но на практике это редкий случай. Некоторые браузеры никогда не выдают 0 или 1, а сразу перепрыгивают к 2, затем к 3 и 4. Другие браузеры выдают все состояния. Но некоторые выдают состояние 1 несколько раз. Как вы видели в последнем разделе, сервер вызывал updatePage() несколько раз, и каждый вызов приводил к появлению всплывающего окна предупреждения – наверное, это не то, чего вы хотели!

Так что вот подправил кое-что


index.php
----------------------------


<?php

  define('AJAX_EXE',1);
  
  require_once('control.php'); // подключаем файл контроллера
  require_once('view.php'); // форма 


control.php
----------------------------

<?php

  defined('AJAX_EXE') or die('Don\'t move!');
  
  if(isset($_POST['base_id']) && !empty($_POST['base_id'])){

     // допустим возвращает на экран список
    for($i=0;$i<20;$i++)
       echo $i."\n";
  


  }


view.php
---------------------

<script src="ajax.js" type="application/javascript"></script>

<textarea id="AJAX" readonly="readonly" rows="5" cols="60" ></textarea>
<form name="test" action="#" method="POST">
<input type="hidden" id="base_id" name="base_id" value="base_1" />
<input name="add" type="button" value="Go Test" onclick="Start('base_1')"/>
</form>



ajax.js
--------------------


// JavaScript Document
<!--
var win;
var req = Create(); 

function Create(){  
    if(navigator.appName == "Microsoft Internet Explorer"){  
        req = new ActiveXObject("Microsoft.XMLHTTP");  
    }else{  
        req = new XMLHttpRequest();  
    }  
    return req;  
}

function Request(query) 
{ 
    req.open('post', 'index.php' , true );
    req.onreadystatechange = Refresh; 
    req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=utf-8"); 
    req.send(query);              
}


function Start(id)
{    
    alert("HELLO " + id);
    var query = 'base_id=' + document.getElementById('id').value;
    Request(query) 
}  

function Refresh() 
{ 
    var a = req.readyState;  

    if( a == 3 )
    { 
       if(req.status==200){
        var b = req.responseText; 
        document.getElementById('AJAX').innerHTML=b;
      }
    } 
    
}



-->

Установил 3 и данные пошли без ожидания полного ответа от сервера...

var a = req.readyState;

if( a == 3 )

И Думаю можно на этом тему закрывать.

Быстрый ответ:

Здесь расположена полная версия этой страницы.