JavaScript и формирование списков из базы данных

[FallenSoul]

Доброе время суток.
Очень важен ответ на поставленный вопрос, и выход из сложившийся ситуации.

  При заходе на страницу, у нас отображаются падающие списки,-1 активный и 4 неактивных.
При выборе элемента из первого списка *Например страны (Англия/Франция/Россия/Италия/Украина ...)* у нас становится активным второй список, в котором должны отобразиться города, присущие только выбранной стране. На этом этапе возникает вопрос, как организовать передачу данных с SQL сервера для построения списка с названиями городов. Далее при выборе города, у нас должна быть передача данных с наименованием улиц этих городов, которые отобразятся для выбора в 3м списке так же посредством выборки из базы и т.д.

Собственно зачем всё это? После выбора всех критериев объекта, у нас на новой странице будут отображаться данные, выбранные из базы по указанному объекту в виде отчёта.

Thx.

[Finch]

Посмотри, что такое AJAX. Там собственно все просто. Создается объект XMLHttpRequest, через него делается запрос на сервер, и затем уже формируется динамически страница. Но тут свои приколы, у фирмы Microsoft, как всегда, свои взгляды на стандарты.

[Finch]

Хочу сразу предупредить. У этой технологии есть большой минус. Страници, сформированные данной технологией не индексируются поисковиками.

[RXL]

FallenSoul, посмотри вот этот файлик - там все просто показано:
https://forum.shelek.ru/Themes/default/script.js

[FallenSoul]

О поисковиках речи не идёт, т.к. страница должна формироваться только для отчёта о том или ином выбранном объекте. Никому кроме пользователя, это ничего не даст.

Про AJAX почитал, что это технология, которая в процессе действий пользователя формирует запрос и обрабатывает на ходу, тем самым не делая перезагрузку страницы, производя все формирования, так сказать, на лету- динамически. Не понятно пока то, каким образом организовывать запрос на sql сервер и по полученным данным формировать следующий список

Файлик сейчас гляну, но т.к. очень слаб в познаниях Web скриптов клиентской части, придётся поспрашивать в процессе

[Finch]

FallenSoul, На прямую тебе никто не даст обрашаться к базе SQL. Только через HTTP сервер. На него даеш запрос. На серверной части пишеш код, который определяет, что это AJAX запрос и соответственно отдает ответ не всей страници, а только запрошенной части. Можно даже, чтобы меньше мучаться, давать запрос на отдельный скрипт.

[FallenSoul]

Finch, если я правильно тебя понял, мне надо написать .php сценарий, который в соответствиями с данными в строке, обращался в базу и возвращал данные?

А через AJAX, организовать запрос, передавая данные строкой в этот .php сценарий, а затем организовывать построение следующего списка из полученных данных?

[Finch]

Примерно правильно. Хотя например список компоненты можно строить напрямую на сервере, а на клиенте просто вставлять его в div.

[FallenSoul]

Примерно правильно. Хотя например список компоненты можно строить напрямую на сервере, а на клиенте просто вставлять его в div.

Ппц, на всё про всё 3 дня,- и никаких мыслей по реализации  Мне в таком случае надо поставить апатч+пхп+mysql на виртуальной машине, выполняющей функции сервера? И что-то для клиента?

[Finch]

А зачем виртуалка? localhost в запросе чем не устраивает? Не понял насчет клиента? Чем не нравится простой браузер?

[FallenSoul]

Поставил сервер, пхп, базу. Голова трещит, ушёл спать. Завтра придётся конкретно заняться этим делом,- спс. Заходи на помощь и далее

[RXL]

FallenSoul, зря трещит - задача довольно простая.

1. На странице. Сформировать AJAX-запрос к серверу и указать callback-функцию, которая обработает событие приема данных.
2. На сервере. Принять запрос, проверить параметры, выполнить запрос в БД, выдать ответ в неком условленном формате.
3. На странице. Сработал callback: проверить на ошибку и поместить данные в комбобокс.

[FallenSoul]

  Тоесть у нас 2 списка. При выборе 1 из элементов в первом списке, у нас запускается функция getXMLDocument(url, callback), где в url передаются параметры для обработки на сервере, а в callback указывается, как будет обработан сформированный xml файл?

Собственно, что получается на данный момент ...

Код:

<script langauge="JavaScript">
function UnDisableCombo2()
{
    var url = "/1.php?combo1=" + encodeURIComponent(document.form1.combo1.value)
	if (document.form2.combo2.disabled == true)
	{
		document.form2.combo2.disabled = false;
	}
	else
	{
		document.form2.combo2.disabled = true;
	}

	getXMLDocument( url , xml_parser )

}

// Send a post form to the server using XMLHttpRequest.
function getXMLDocument(url, callback)
{
	if (!window.XMLHttpRequest)
		return false;

	var myDoc = new XMLHttpRequest();
	if (typeof(callback) != "undefined")
	{
		myDoc.onreadystatechange = function ()
		{
			if (myDoc.readyState != 4)
				return;

			if (myDoc.responseXML != null && myDoc.status == 200)
				callback(myDoc.responseXML);
		};
	}
	myDoc.open('GET', url, true);
	myDoc.send(null);

	return true;
}

function xml_parser(xmldoc)
{

	var xml_parser_result = xmldoc.getElementsByTagName("res")[0].getElementsByTagName("new_line")[0].firstChild.nodeValue;
	alert( xml_parser_result );

}


</script>

UnDisableCombo2() , формируем адресную строку, делаем второй список активным, запускаем функцию запроса
getXMLDocument(url, callback), методом GET передаём параметры запроса на сервер

Код:

<?
  $combo_1 = $_GET['combo1'];

  header("Content-type: text/xml");
  echo '<?xml version="1.0" encoding="UTF-8"?>';
  echo '<res>'
  echo '<new_line>$combo_1</new_line>';
  echo '</res>';
?>

На сервере строим xml файл вида( Пока для теста, затем данные будут строиться по результатам mysql запросов)

Код:

<?xml version="1.0" encoding="UTF-8"?>
<res>
<new_line>first</new_line>
</res>

xml_parser( xmldoc ), получая xml файл, пытаемся вытянуть оттуда сфомированные данные.

Вопрос:
В чём ошибка 

function xml_parser(xmldoc)
{
   if (xmldoc == null) alert("1");
   else alert("0");
   var root_node = xmldoc.getElementsByTagName('res').item(0);
   alert(root_node.firstChild.data);

}

Всегда 1 

Результат работы функции ниже:
1 2 3 7 4 8 4 4 4 5

Код:

// Send a post form to the server using XMLHttpRequest.
function getXMLDocument(url, callback)
{
	alert("1");
	if (!window.XMLHttpRequest)
		return false;

	var myDoc = new XMLHttpRequest();
	alert("2");
	if (typeof(callback) != "undefined")
	{
		alert("3");
		myDoc.onreadystatechange = function ()
		{
			alert("4");
			if (myDoc.readyState != 4)
				return;

			alert("5");
			if (myDoc.responseXML != null && myDoc.status == 200)
			{
				alert("6");
				callback(myDoc.responseXML);

			}
		};
	}
		alert("7");
	myDoc.open('GET', url, true);
	myDoc.send(null);

	alert("8");
	return true;
}

Как я понял, как таковой XML файл не формируется, либо статус ответа не "ОК"

2Если из условия          

Код:

if (myDoc.responseXML != null && myDoc.status == 200)

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

Код:

 if (xmldoc != null)

Если формировать xml файл вида

Код:

<?xml version="1.0" ?>
<root>
    first
</root>

а пытаться вывести через функцию

Код:

function xml_parser(xmldoc)
{
	if (xmldoc == null) alert("1");
	else alert("0");

	var root_node = xmldoc.getElementsByTagName('root').item(0);
	alert(root_node.firstChild.data);

}

То получаем "0", и всё

 

[RXL]

FallenSoul, с AJAX можно работать без XML - в JS можно получить просто текст ответа. На начальном этапе это будет много проще.

[FallenSoul]

FallenSoul, с AJAX можно работать без XML - в JS можно получить просто текст ответа. На начальном этапе это будет много проще.

А что касается кода который я написал для XML, чтото можно придумать и понят в чём ошибка?

Дело в том, что у меня из базы данных будут браться очень большие объёмы данных, поэтому хотелось бы сразу через XML

[RXL]

Буду мучить по частям, пока ошибки не исчезнут

"UnDisable" - правильно - Enable.

Код: (Javascript)

    var url = "/1.php?combo1=" + encodeURIComponent(document.form1.combo1.value)

Правильно посылать не текст, а ID элемента. Если с первым уровнем текст прокатит, то на следующих уровнях буду проблемы.

Я слепил твои посты - уж очень их много - глаза разбегаются.\

Больших объемов JS не выдержит! Пользователь очень долго будет ждать, пока он все это переварит и выдаст. Лучше шли готовый HTML-фрагмент, который ты вставишь внутрь <select> через innerHTML.

Есть еще метод: JSON (JavaScript Object Notation) - когда на стороне сервера формируется JS-код и посылается в браузер, где и исполняется. Почитай про это. Для больших объемов это много быстрее будет, чем XML.

[FallenSoul]

На этом форуме я всё больше и больше убеждаюсь, сколько ещё неизведанного)
Читаю про JSON, пока понятно, но думаю будут вопросы

Если я правильно понял, то на этапе обработки данных на сервере, мне надо их преобразовывать JSON функциями к виду ["111","222","333"], а после получения на html странице, возвращать к первоначальному виду и вставлять в форму? Или как. Запутался уже от потока инфы

Код:

function xml_parser(xmldoc)
{

  if (xmldoc.readyState == 4) 
	{
    		var response = xmldoc.responseText;
		alert( xmldoc.responseText );
 	 }
}


function UnDisableCombo2()
{
    var url = "/1.php?comboa=" + encodeURIComponent(document.form1.combo1.id)
	if (document.form2.combo2.disabled == true)
	{
		document.form2.combo2.disabled = false;
	}
	else
	{
		document.form2.combo2.disabled = true;
	}

	getXMLDocument( url , xml_parser )

}


function getXMLDocument(url, callback)
{
	if (!window.XMLHttpRequest)
		return false;

	var myDoc = new XMLHttpRequest();
	if (typeof(callback) != "undefined")
	{
		myDoc.onreadystatechange = function ()
		{
			if (myDoc.readyState != 4)
				return;

			if (myDoc.responseXML != null)
			{
				callback(myDoc);
			}
		};
	}
	myDoc.open('GET', url, true);
	myDoc.send(null);

	return true;
}

в общем, даже если в php сценарии происходит "echo '11111';", функция обработки полученных данных с сервера не выполняет условие

Код:

if myDoc.status == 200

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

в общем прочесал всё с responseText, и получил сделующее:

Долгие попытки поиска ошибок в коде плагина, а так же гугленье заставили сделать вот какой вывод о работе XMLHttpRequest, а точнее о получаемых ответах:
“При получении Opera в header’е страницы, возвращаемой запросом при помощи XMLHttpRequest, любого статуса кроме 200, данные, содержащиеся на странице, не попадают в responseText.”

Другими словами вопрос в том, почему не получаем 200 код и как исправить

в общем, использование браузера Opera по умолчанию меня подвело.

Код:

function UnDisableCombo2()
{
    var url = "http://localhost/1.php?comboa=" + encodeURIComponent(document.form1.combo1.id)
	if (document.form2.combo2.disabled == true)
	{
		document.form2.combo2.disabled = false;
	}
	else
	{
		document.form2.combo2.disabled = true;
	}

	getXMLDocument( url , xml_parser )

}


function getXMLDocument(url, callback)
{
	//сначала создаём реквест с учётом индивидуальных особенностей браузеров
	if (window.XMLHttpRequest) 
	{
		myXMLRequest = new XMLHttpRequest();
	} 
	else 
		if (window.ActiveXObject) 
		{
              		 myXMLRequest = new ActiveXObject("Microsoft.XMLHTTP");
    		}


	myXMLRequest.open('GET', url, true);

	myXMLRequest.onreadystatechange = xml_parser;

	myXMLRequest.send(null);

	return true;
}

function xml_parser()
{

  if (myXMLRequest.readyState == 4)	
	{

	alert( myXMLRequest.status )
	if (myXMLRequest.status == 200)
		{
	    		var response = myXMLRequest.responseText;
    			alert( myXMLRequest.responseText );
		}
 	 }

}

Вот что мы имеем в конце концов, и в IE это работает. Только результатом я получаю содержимое файла 1.php, а не результат его работы

[RXL]

FallenSoul, еще раз: убедительная просьба не писать кучу постов подряд, а редактировать последний и добавлять в него.

JSON представляет из себя обычный JS-код.

Вот пример, имеющий нечто общее с JSON: http://club.shelek.ru/js/menu.php
Этот код банально подгружается тегом:

Код: (HTML)

<script type="text/javascript" src="js/menu.php"></script>

В таком случае код автоматом запускается после загрузки.
В случае получения подобного кода через AJAX, его можно выполнить посредством функции eval().

Только результатом я получаю содержимое файла 1.php, а не результат его работы

Проблема в настройке Веб-сервера.

[FallenSoul]

Проблема в настройке Веб-сервера.

Надо ковыряться с конфигом апатча?

[RXL]

Да.

[FallenSoul]

Помогло изменение тегов в пхп сценарии с

Код:

<?
...
?>

на

Код:

<?php
...
?>

Спасибо всем за помощь