Обновление информации
Имеется 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. Понимаю, немного нагло просить "напишите мне подробную инструкцию", но ни сил, ни времени уже нету. Если кто может - дайте ссылку на похожий пример, где разжовано просто все до мелочей, как это реализовывается. Или черканите пару строк кода, т.к. на сколько я понимаю, тут все элементрно...наверное... |
Вот текст 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: с инетом у меня пока проблемы, будут вопросы, пишите, вечером отвечу. |
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 нужно как-то указать на передачу переменную (в которой содержится отпарсенная информация), передать ее дальше и сделать обновление по таймеру, дабы это информация обновлялась, без перезагрузки всей страницы...ох... |
Слегка напутали, вероятно я виноват, объяснил плохо. Дубль два.
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>"; ?> Вот и всё.. теперь запускай индекс.рнр и нажимай на надпись... хотя лучше конечно вставить кнопку... мне просто лень было... еще у тебя возможно будет проблема с кодировкой русской... если что пиши, скажу как решить... |
Ни span, ни button не работают, такое ощущение, что функция просто не вызывается. Кликаешь на кнопку - никакого результата.
Если открывать 2.php - все отображается, ну там легко. Вместо <span onclick="ajax_load()">Кликни по мне!</span> вставил <BUTTON onclick=\"ajax_load()\">Увидеть спарсенное чудо...</BUTTON> |
Сейчас выложу готовый выриант...
вот держите, всё работает... просто одну лишнюю кавычку влетил, т.к. в блокноте писал... не заметил. ВНИМАНИЕ!!! все СВОИ посты в этой теме я отредактировал, исправил ошибку... готовый вариант тут. |
Если вмсто русских букв увидишь абра-кадабру... то значит тебе надо не выводить в РНР методом echo а то что выводишь складывать в переменную(например $content)..
$content .= "<table><tr><td>Текущее время:</td><td>"; $content .= "$per"; $content .= "</td></tr></table>"; а в конце всего пишешь так: echo iconv("windows-1251","UTF-8",$content); НО УЧТИ!!! если ты вставишь эту перекодировку, то не факт что когда зальешь уже на сервер, что там будет нужна эта перекодировка... У меня например на сервере не нужно перекодирывать, т.к. там кодировка у меня настроена на нужную. |
С русской кодировкой все ок.
Огромное спасибо за помощь!!! З.Ы. Последние 2 вопросика: 1) В ajax.js нужно переменной 'a', к-ю мы передаем, присвоить значение переменной $val[0] из 1.php. Это можно сделать примерно по такому алгоритму: открыть в ajax.js файл 1.php и просто указать $val[0] на передачу. Правильно? 2) Самостоятельное обновление информации. Т.е. самостоятельное обновление информации, как мы через 5 секунд сами бы нажимали на button. Это можно сделать примерно по такому алгоритму: в ajax.js вставить таймер и обновление через какой-то промежуток времени. Правильно? |
Цитата:
ajaxObjectArray[ajaxIndex].requestFile = ajaxRequestFile;- никакой переменной "а" я не использовал. Цитата:
текст 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 и т.п. |
Подскажите насчет русской кодировки, есть траблы. Спасибо за тему.;)
|
Часовой пояс GMT +3, время: 02:38. |