проблема с Ajax

[mrgrudge]

Доброго времени суток!
вопрос стоит в следующем,
есть грубоговоря список
<ul>
<li id="1">1</li>
<li id="2">2</li>
<li id="3">3</li>
</ul>

по среди страницы и в соседнем с ним блоке некие тексты и прочее, проблема за ключается в том что при нажатии на отдельный элемент списка в блоке должна появляться соответствующая информация, как это дело реализовать на php проблем нет, проблема в том что это дело должно быть без перезагрузки страницы, слышал что такое реализуется с помощью технологии Ajax с которой практически не знаком, и вроде как это выглядеть должно так:

<script type="text/javascript">
и вот тут какие то js функции вызывающие info.php который вытаскивает с бд соответств данные
</script>

кто то может подсказать как это будет или где про это почитать или где посмотреть на реализацию подобного??

[Виталий Желтяков]

В архиве аргументируемый пример

[Prox_]

Используй jQuery
функции load();

<div id="test"></div>
<script>
function L(id)
{
$("#test").load("info.php?q="+id) ;
}
</script>

[mrgrudge]

вот код страницы:

<form method="get" >
<input type="text" name="test" value="1"  onBlur="function L(id) {$('#test').load('reciever.php?test='+id) ;}"/>
<input type="submit" name="submit" value="go" />
</form>
<div id="test"></div>

код reciever.php

<?
echo "<br />".$_GET['test']." - ";

?>

но естественно не срабатывает

[Prox_]

ыыыы !!! Кто так пишет!!!
1 - onBlur - дожно сробатывать при потере фокуса , лучше использовать чтото другое!
2 - Подключи jQuery!! Я архим с ним кинул !!! Немешало бы проверить - подключился он или нет!

<form method="get" >
<input type="text" name="test" value="1" onKeyup="L(1)"/>
<input type="submit" name="submit" value="go" />
</form>
<div id="test"></div>
<script>
function L(id)
{
$("#test").load("reciever.php?test= "+id) ;
}
</script>

[mrgrudge]

проблема частично решилась в другой части сайта, код при вводе в поле и событии onBlur(так потребовали=\) введенные данные уходят в обработчик, но проебла в том что я смекнул как сделать лишь с одним полем, а если полей будет несколько (порядка 20) я сообразить не могу

html:
<form  method="get">
   <input name="test" type="text" id="test" value="" onblur="javascript:login()"/>
</form>
<div id="login_response"></div>

ajax:

function createObject() {
var request_type;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
request_type = new ActiveXObject("Microsoft.XMLHTTP");
}else{
request_type = new XMLHttpRequest();
}
return request_type;
}

var http = createObject();

function login() {
 // Отображаем соощение в области ID ajax_response
 document.getElementById('login_response').innerHTML = "Loading..."
    // Проверяем, что все поля не пустые. Используем encodeURI() для кодирования недопустимых символов в запросе.
var test = encodeURI(document.getElementById('test').value);


http.open('get', 'php/customer/reciever.php?test='+test);
http.onreadystatechange = loginReply;
http.send(null);
}
function loginReply() {
if(http.readyState == 4){ 
var response = http.responseText;
 if(response == '0'){
// if login fails
  document.getElementById('login_response').innerHTML = 'Login failed! Verify user and password';
// else if login is ok show a message: "Welcome + the user name".
  } else {
document.getElementById('login_response').innerHTML = response;
  }
}
 }// JavaScript Document


reciever.php:

echo "value -  ".$_GET['test'];

и все работает исправно как и надо без перезагрузок и прочее, но полей подобных <input name="test" type="text" id="test" value="" onblur="javascript:login()"/> будет масса, и вот под каждое поле вставлять отдельный скрипт что то не очень удобно как мне кажеться. с js знаком очень плохо, может кто-то подсказать как этот код оптимизировать что бы он вроде как уникальным был ну и смотрел по id или по другой какой нибудь метке поле?

[StagnantIce]

Информация к размышлению...

<form method="get">
<input name="test" type="text" id="test" value="" onblur="login('login_response', this)"/>
</form>
<div id="login_response"></div>



function login(id, obj) {

var ob = document.getElementById(id);

ob.innerHTML = "Loading..."

var test = encodeURI(obj.value);


http.open('get', 'php/customer/reciever.php?test='+obj.id);
http.onreadystatechange = function () {
if(http.readyState == 4){
var response = http.responseText;
if(response == '0') ob.innerHTML = 'Login failed! Verify user and password'; else ob.innerHTML = response;
}
}

http.send(null);

}