Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Обновление информации (https://javascript.ru/forum/dom-window/4207-obnovlenie-informacii.html)

Lvenok1987 02.07.2009 01:02

Обновление информации
 
Имеется 3 файла:

1.php - парсинг XML страницы. Переменной $val[0] присваивается некое значение.

2.php - переменной $per присваивается значение переменной $val[0] (при парсинге XML, нужную информацию загнали в $per).
<?
include "1.php";
$per=$val[0];
echo "$per";
?>


3.php - какой-то текст и вывод переменной $per.
<? 
echo "<table><tr><td>Текущее время:</td><td>";
include ('2.php');
echo "</td></tr></table>";
?>


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

Понимаю, немного нагло просить "напишите мне подробную инструкцию", но ни сил, ни времени уже нету. Если кто может - дайте ссылку на похожий пример, где разжовано просто все до мелочей, как это реализовывается. Или черканите пару строк кода, т.к. на сколько я понимаю, тут все элементрно...наверное...

greatilya 02.07.2009 04:51

Вот текст ajax.js
function sack(file) {
	this.xmlhttp = null;

	this.resetData = function() {
		this.method = "POST";
  		this.queryStringSeparator = "?";
		this.argumentSeparator = "&";
		this.URLString = "";
		this.encodeURIString = true;
  		this.execute = false;
  		this.element = null;
		this.elementObj = null;
		this.requestFile = file;
		this.vars = new Object();
		this.responseStatus = new Array(2);
  	};

	this.resetFunctions = function() {
  		this.onLoading = function() { };
  		this.onLoaded = function() { };
  		this.onInteractive = function() { };
  		this.onCompletion = function() { };
  		this.onError = function() { };
		this.onFail = function() { };
	};

	this.reset = function() {
		this.resetFunctions();
		this.resetData();
	};

	this.createAJAX = function() {
		try {
			this.xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e1) {
			try {
				this.xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e2) {
				this.xmlhttp = null;
			}
		}

		if (! this.xmlhttp) {
			if (typeof XMLHttpRequest != "undefined") {
				this.xmlhttp = new XMLHttpRequest();
			} else {
				this.failed = true;
			}
		}
	};

	this.setVar = function(name, value){
		this.vars[name] = Array(value, false);
	};

	this.encVar = function(name, value, returnvars) {
		if (true == returnvars) {
			return Array(encodeURIComponent(name), encodeURIComponent(value));
		} else {
			this.vars[encodeURIComponent(name)] = Array(encodeURIComponent(value), true);
		}
	}

	this.processURLString = function(string, encode) {
		encoded = encodeURIComponent(this.argumentSeparator);
		regexp = new RegExp(this.argumentSeparator + "|" + encoded);
		varArray = string.split(regexp);
		for (i = 0; i < varArray.length; i++){
			urlVars = varArray[i].split("=");
			if (true == encode){
				this.encVar(urlVars[0], urlVars[1]);
			} else {
				this.setVar(urlVars[0], urlVars[1]);
			}
		}
	}

	this.createURLString = function(urlstring) {
		if (this.encodeURIString && this.URLString.length) {
			this.processURLString(this.URLString, true);
		}

		if (urlstring) {
			if (this.URLString.length) {
				this.URLString += this.argumentSeparator + urlstring;
			} else {
				this.URLString = urlstring;
			}
		}

		// prevents caching of URLString
		this.setVar("rndval", new Date().getTime());

		urlstringtemp = new Array();
		for (key in this.vars) {
			if (false == this.vars[key][1] && true == this.encodeURIString) {
				encoded = this.encVar(key, this.vars[key][0], true);
				delete this.vars[key];
				this.vars[encoded[0]] = Array(encoded[1], true);
				key = encoded[0];
			}

			urlstringtemp[urlstringtemp.length] = key + "=" + this.vars[key][0];
		}
		if (urlstring){
			this.URLString += this.argumentSeparator + urlstringtemp.join(this.argumentSeparator);
		} else {
			this.URLString += urlstringtemp.join(this.argumentSeparator);
		}
	}

	this.runResponse = function() {
		eval(this.response);
	}

	this.runAJAX = function(urlstring) {
		if (this.failed) {
			this.onFail();
		} else {
			this.createURLString(urlstring);
			if (this.element) {
				this.elementObj = document.getElementById(this.element);
			}
			if (this.xmlhttp) {
				var self = this;
				if (this.method == "GET") {
					totalurlstring = this.requestFile + this.queryStringSeparator + this.URLString;
					this.xmlhttp.open(this.method, totalurlstring, true);
				} else {
					this.xmlhttp.open(this.method, this.requestFile, true);
					try {
						this.xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
					} catch (e) { }
				}

				this.xmlhttp.onreadystatechange = function() {
					switch (self.xmlhttp.readyState) {
						case 1:
							self.onLoading();
							break;
						case 2:
							self.onLoaded();
							break;
						case 3:
							self.onInteractive();
							break;
						case 4:
							self.response = self.xmlhttp.responseText;
							self.responseXML = self.xmlhttp.responseXML;
							self.responseStatus[0] = self.xmlhttp.status;
							self.responseStatus[1] = self.xmlhttp.statusText;

							if (self.execute) {
								self.runResponse();
							}

							if (self.elementObj) {
								elemNodeName = self.elementObj.nodeName;
								elemNodeName.toLowerCase();
								if (elemNodeName == "input"
								|| elemNodeName == "select"
								|| elemNodeName == "option"
								|| elemNodeName == "textarea") {
									self.elementObj.value = self.response;
								} else {
									self.elementObj.innerHTML = self.response;
								}
							}
							if (self.responseStatus[0] == "200") {
								self.onCompletion();
							} else {
								self.onError();
							}

							self.URLString = "";
							break;
					}
				};

				this.xmlhttp.send(this.URLString);
			}
		}
	};

	this.reset();
	this.createAJAX();
}


Использование:
В ваш код подключите этот файл:
<script type="text/javascript" src="ajax.js"></script>

Дальше даю примерную фунцию вызова с передачей параметров методом GET и получением ответа от скрипта:
function ajax_load()
{
		var ajaxRequestFile = 'ИМЯ ФАЙЛА РНР КОТОРЫЙ ВЕРНЕТ РЕЗУЛЬТАТ';
		var ajaxObjectArray = new Array();
		ajaxObjectArray[ajaxObjectArray.length] = new sack();
		var ajaxIndex = ajaxObjectArray.length-1;
		ajaxObjectArray[ajaxIndex].requestFile = ajaxRequestFile + '?a=1';					
		ajaxObjectArray[ajaxIndex].onCompletion = function() { 
			alert(ajaxObjectArray[ajaxIndex].response); 
		};			
		ajaxObjectArray[ajaxIndex].runAJAX();

}


Теперь поясню немного:
ajaxObjectArray[ajaxIndex].requestFile = ajaxRequestFile + '?a=1';

здесь а=1 это я передал в РНР в переменную $_GET['a'] значение 1.

alert(ajaxObjectArray[ajaxIndex].response);

Вывести результат обработки в окне alert.

Если имя файла ввести "3.php" то он у вас выведет:
<table><tr><td>Текущее время:</td><td>
ОТПАРСЕНЫЙ ТЕКСТ
</td></tr></table>

Можно создать div на странице с id="result_div"
и написать так:
document.getElementById('result_div').innerHTML = ajaxObjectArray[ajaxIndex].response;


PS: с инетом у меня пока проблемы, будут вопросы, пишите, вечером отвечу.

Lvenok1987 02.07.2009 13:01

1) Создал файл ajax.js, с приведенным кодом + добавил в него функцию в самом конце:
function ajax_load()
{
        var ajaxRequestFile = '2.php';
        var ajaxObjectArray = new Array();
        ajaxObjectArray[ajaxObjectArray.length] = new sack();
        var ajaxIndex = ajaxObjectArray.length-1;
        ajaxObjectArray[ajaxIndex].requestFile = ajaxRequestFile + '?a=1';                    
        ajaxObjectArray[ajaxIndex].onCompletion = function() { 
            alert(ajaxObjectArray[ajaxIndex].response); 
        };            
        ajaxObjectArray[ajaxIndex].runAJAX();
    }
}


2) Код файла 2.php:
<?
echo"
<head>
<script type=\"text/javascript\" src=\"ajax.js\"></script>
</head><body>";
$r=$_GET['a'];
echo "</body>";
?>


3) Код файла 3.php:
<?
include "2.php";
echo "$r";
?>


В чем ошибка? )

P.S. Это передача переменной в PHP с помощью AJAX, без этого я ничего не сделаю дальше...Но дальше еще хуже помойму: на сколько я понимаю, мне в AJAX нужно как-то указать на передачу переменную (в которой содержится отпарсенная информация), передать ее дальше и сделать обновление по таймеру, дабы это информация обновлялась, без перезагрузки всей страницы...ох...

greatilya 02.07.2009 14:38

Слегка напутали, вероятно я виноват, объяснил плохо. Дубль два.
ajax.js - вы сделали правильно, только функцию из конца удалите, мы её в другом месте вставим, хотя это не принципиально.
теперь разберемся с файлами.
немного непонятно зачем вам 3 файла для парсинга... ну да и ладно... пусть будет 3...
теперь создаем index.php который будет собственно первоначально вызываться. В нем пропишем:
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript">
function ajax_load()
{
        var ajaxRequestFile = '2.php';
        var ajaxObjectArray = new Array();
        ajaxObjectArray[ajaxObjectArray.length] = new sack();
        var ajaxIndex = ajaxObjectArray.length-1;
        ajaxObjectArray[ajaxIndex].requestFile = ajaxRequestFile;                    
        ajaxObjectArray[ajaxIndex].onCompletion = function() { 
            document.getElementById('result_div').innerHTML = ajaxObjectArray[ajaxIndex].response;
        };            
        ajaxObjectArray[ajaxIndex].runAJAX();
}
</script>
<span onclick="ajax_load()">Кликни по мне!</span>
<div id="result_div">И тут увидишь спарсеное чудо</div>


Теперь разберемся с твоими файлами. Пусть 1.php парсит в переменную $val[0].... его код мы не трогаем... его подключаем твоим способом... итак теперь 2.php:
<?
include "1.php";
$per=$val[0];
echo "<table><tr><td>Текущее время:</td><td>";
echo "$per";
echo "</td></tr></table>";
?>


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

Lvenok1987 02.07.2009 15:21

Ни span, ни button не работают, такое ощущение, что функция просто не вызывается. Кликаешь на кнопку - никакого результата.
Если открывать 2.php - все отображается, ну там легко.

Вместо
<span onclick="ajax_load()">Кликни по мне!</span>

вставил
<BUTTON onclick=\"ajax_load()\">Увидеть спарсенное чудо...</BUTTON>

greatilya 02.07.2009 16:35

Сейчас выложу готовый выриант...

вот держите, всё работает... просто одну лишнюю кавычку влетил, т.к. в блокноте писал... не заметил.
ВНИМАНИЕ!!! все СВОИ посты в этой теме я отредактировал, исправил ошибку... готовый вариант тут.

greatilya 02.07.2009 16:58

Если вмсто русских букв увидишь абра-кадабру... то значит тебе надо не выводить в РНР методом echo а то что выводишь складывать в переменную(например $content)..
$content .= "<table><tr><td>Текущее время:</td><td>";
$content .= "$per";
$content .= "</td></tr></table>";

а в конце всего пишешь так:
echo iconv("windows-1251","UTF-8",$content);


НО УЧТИ!!! если ты вставишь эту перекодировку, то не факт что когда зальешь уже на сервер, что там будет нужна эта перекодировка... У меня например на сервере не нужно перекодирывать, т.к. там кодировка у меня настроена на нужную.

Lvenok1987 03.07.2009 15:02

С русской кодировкой все ок.

Огромное спасибо за помощь!!!

З.Ы. Последние 2 вопросика:
1) В ajax.js нужно переменной 'a', к-ю мы передаем, присвоить значение переменной $val[0] из 1.php.

Это можно сделать примерно по такому алгоритму: открыть в ajax.js файл 1.php и просто указать $val[0] на передачу.

Правильно?

2) Самостоятельное обновление информации. Т.е. самостоятельное обновление информации, как мы через 5 секунд сами бы нажимали на button.

Это можно сделать примерно по такому алгоритму: в ajax.js вставить таймер и обновление через какой-то промежуток времени.

Правильно?

greatilya 04.07.2009 09:08

Цитата:

Сообщение от Lvenok1987
В ajax.js нужно переменной 'a', к-ю мы передаем, присвоить значение переменной $val[0] из 1.php

посмотрите внимательно, в готовом варианте я не передавал переменную "а", т.к. это не обязательно.
ajaxObjectArray[ajaxIndex].requestFile = ajaxRequestFile;
- никакой переменной "а" я не использовал.

Цитата:

Сообщение от Lvenok1987
Самостоятельное обновление информации. Т.е. самостоятельное обновление информации, как мы через 5 секунд сами бы нажимали на button.

сделайте например следующим образом:
текст index.php замените на это:
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript">
function parsing_load()
{
        var ajaxRequestFile = '2.php';
        var ajaxObjectArray = new Array();
        ajaxObjectArray[ajaxObjectArray.length] = new sack();
        var ajaxIndex = ajaxObjectArray.length-1;
        ajaxObjectArray[ajaxIndex].requestFile = ajaxRequestFile;                    
        ajaxObjectArray[ajaxIndex].onCompletion = function() { 
            document.getElementById('result_div').innerHTML = ajaxObjectArray[ajaxIndex].response;
	    window.setTimeout('parsing_load()', 5000);
        };            
        ajaxObjectArray[ajaxIndex].runAJAX();
}
</script>
<div id="result_div">И тут увидишь спарсеное чудо</div>
<script type="text/javascript">parsing_load();</script>


Настоятельно рекомендую внимательно почитать и понять что я написал.
Сразу внесу ясность, я предложил вам код без всякого оформления. На самом деле нужно будет вам в индекс.рнр добавить оформляющие теги html, body, head и т.п.

/mf 04.02.2010 16:37

Подскажите насчет русской кодировки, есть траблы. Спасибо за тему.;)


Часовой пояс GMT +3, время: 14:32.