Консультации Портала - Консультация #170915

Задать вопрос Консультации Пользователи Форум

Задать вопрос экспертам

Консультация № 170915

30.07.2009, 12:12

0.00 руб.

0 32 1

Компьютеры Программирование

Здравствуйте, уважаемые Эксперты!

Подскажите какие функции надо написать, включить в страницу, чтобы можно было нажать "плюсик" или на строку и докачать информацию на страницу, как это сделано, например на торренте?

У меня есть страница, которая генерируется быстро. Но статистика посещения генерируется медленно - 1, 2 секунды. Алгоритм я переделать не могу, поэтому есть желание "убрать" его при загрузке, а если кому то нужно всё таки её просмотреть, хотел бы сделать это опцией.

Желательно, чтобы пока "подгружается" писалось "подождите".

Пожалуйста, дайте рабочий кусок кода, я пока в ява сриптах не очень силен.

Всё крутится на PHP, MySQL, Appache.

СПАСИБО!

Обсуждение

Неизвестный

31.07.2009, 15:11

общий

LanK:
- Кусок кода, отвечающий за статистику, выделяете например в отдельный скрипт stat.php;
- на место, где был этот кусок, вставляете <div id="stat"></div> и кнопку <button onClick="ajaxRequest()">Статистика</button>
- функцию callback переписываете так:

function callback(serverData, serverStatus) {
document.getElementById("stat").innetHTML = serverData;
}

в функции ajaxRequest изменить строку
var url='http://somedomain.com/getdata.php?doc=sometext.txt';
на строку
var url='stat.php';
ну и ессно вставить js-скрипты в HTML, лучше в секцию <head></head>

В результате по нажатию кнопки аякс получит строку, отданную ему скриптом stat.php и выведет её внутрь контейнера <div id="stat"></div> - при этом остальная часть страницы останется неперегруженной.

ЗЫ: забыл сказать, контейнер со статистикой можно оформить верхним слоем и доделать функцию его закрытия, или жёстко определить его размеры CSS-ом, иначе внутренний HTML контейнера может исказить вёрстку страницы.

Неизвестный

31.07.2009, 16:40

общий

Волков Алексей:

Цитата: 253005

аякс получит строку

Алексей! Спасибо, за дополнительные разъяснения, но как я понимаю, еще и необходимо как то запустить сам ajax-сервер?

Мы же кому то её послыаем на обработку:

Цитата: 253005

ajaxRequest()

или я неправ и достаточно добавить указанные Вами куски кода и всё заработает?

Неизвестный

02.08.2009, 22:34

общий

LanK:
Неправ ))

на командном уровне АЯКС представляет собой всего лишь связку джава-скриптов с серверной стороной, функция ajaxRequest всего лишь использует браузерные встроенные функции (объект XMLHttpRequest для мозиллы или ActiveXObject("Microsoft.XMLHTTP") для ИЕ - в ajaxRequest просто обрабатывается выбор встроенного объекта в зависимости от браузера клиента) - то есть специального сервера АЯКСа просто не существует.

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

Пока писАл, вспомнил: пересказываю это: http://ru.wikipedia.org/wiki/Ajax

Неизвестный

03.08.2009, 10:17

общий

Волков Алексей:
Алексей, хоть плачь, но не получается

:

1.html

Код:


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>

<script language="JavaScript" type="text/javascript">

function callback(serverData, serverStatus) {
document.getElementById("stat").innetHTML = serverData;
}

function ajaxRequest() {
   var AJAX = null;                                 // Initialize the AJAX variable.
   if (window.XMLHttpRequest) {                     // Does this browser have an XMLHttpRequest object?
      AJAX=new XMLHttpRequest();                    // Yes -- initialize it.
   } else {                                         // No, try to initialize it IE style
      AJAX=new ActiveXObject("Microsoft.XMLHTTP");  //  Wheee, ActiveX, how do we format c: again?
   }                                                // End setup Ajax.
   if (AJAX==null) {                                // If we couldn't initialize Ajax...
      alert("Your browser doesn't support AJAX.");  // Sorry msg.                                               
      return false                                  // Return false, couldn't set up ajax
   }
   AJAX.onreadystatechange = function() {                      // When the browser has the request info..
      if (AJAX.readyState==4 || AJAX.readyState=="complete") { //  see if the complete flag is set.
         callback(AJAX.responseText, AJAX.status);             // Pass the response to our processing function
      }                                                        // End Ajax readystate check.
   }
   var url='http://192.168.115.115/temp/1/2.html';		// This is the URL we will call.
   AJAX.open("GET", url, true);                                  // Open the url this object was set-up with.
   AJAX.send(null);                                              // Send the request.
}

</script>


</head>

<body>

Текст!!!
И кнопка!

<div id="stat"></div> <button onClick="ajaxRequest()">Статистика</button>

</body>
</html>

2.html

Код:


Hello !!!

Неизвестный

03.08.2009, 16:03

общий

МММММ мой косяк, прошу прощения )) проблема в полном адресе url - урл, видимо, должен быть относительный и на том же хосте, что и вызывающий аякс скрипт, иначе браузер ругается на "рестриктед ури"

но не это главное

главное - опечатка тут:
document.getElementById("stat").innetHTML (надо innerHTML)
______________________________^_____

работает тут

Неизвестный

03.08.2009, 17:37

общий

Волков Алексей:
Уфф. Работает. И не надо вводить полный урл. СПАСИБО.

НО

... вставляемый текст идет знаками вопроса

причем я тоже ввел как и Вы "сам себя". - выводит вопросиками. Почему?

Неизвестный

03.08.2009, 23:08

общий

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

Неизвестный

04.08.2009, 09:11

общий

Волков Алексей:
Хмм, странно в php.ini стоит:

default_charset = "WINDOWS-1251"

Так что я как то не понимаю что во что придется кодировать и как?

но логично предположить что это НЕ php всё же написано на яваскрипте+html ... следовательно проблемы в Appache.

В httpd.conf включил:
# Language settings
Include conf/extra/httpd-languages.conf

В httpd-languages.conf
поставил
DefaultLanguage ru
LanguagePriority ru en ca cs da de el eo es et fr he hr it ja ko ltz nl nn no pl pt pt-BR sv zh-CN zh-TW

Сервис перезапустил...
однако не работает :(.

Неизвестный

04.08.2009, 13:40

общий

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

<?php
if (isset($_GET['q'])) die (mb_convert_encoding("Текст!!! И кнопка!", 'UTF-8', 'cp1251'));
?>

(пишется в самом начале скрипта чтобы отсечь остальной вывод, в аякс-запросе урл меняется на ?q=tratata)

рабочий URL >> c исходным кодом. Кстати, iconv работать отказался )))

Неизвестный

04.08.2009, 14:37

общий

Волков Алексей:
Ясно Ваш пример работает, но так не пойдет. Мне необходимо большие таблицы вставлять, соответсвенно надо чтобы всё таки всё работало "автоматически". Т.е. надо разбираться с кодировками аппача. Где то это должно настраиваться... буду искать.

Неизвестный

04.08.2009, 15:29

общий

на самый крайний случай есть output buffering

- это если хостинг чужой ))) а в идеале, конечно, надо бы всё как надо прикрутить...

Неизвестный

04.08.2009, 15:35

общий

Волков Алексей:
да не это интрасеть так что всё моё

могу менять что угодно, только бы знать что ... ищу пока не нашел :(.

Неизвестный

04.08.2009, 15:45

общий

СТОП.
Я ещё раз попробовал, если урл задавать абсолютно, с протоколом, то всё получается корректно и без перекодировки, попробуйте. Ещё раз URL >>

Неизвестный

04.08.2009, 16:14

общий

Волков Алексей:
не понимаю :(.

не работает. Ваш пример в вопросиках.

Но только если я вызываю "сам" себя.

Если подсовываю другой файл теперь выдает ошибку :(. После нажатия на кнопку - В строке 31 символ 10 системная ошибка: - 1072896748. :(

1.html

Код:


<!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">
<head>
<?php
   header("Cache-Control: no-cache, must-revalidate");     // Must do cache-control headers
   header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");       // or IE will pull from cache 100% of time (which is really bad)
?>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>

<script language="JavaScript" type="text/javascript">

function callback(serverData, serverStatus) {
document.getElementById("stat").innerHTML = serverData;
}

function ajaxRequest() {
   var AJAX = null;                                 // Initialize the AJAX variable.
   if (window.XMLHttpRequest) {                     // Does this browser have an XMLHttpRequest object?
      AJAX=new XMLHttpRequest();                    // Yes -- initialize it.
   } else {                                         // No, try to initialize it IE style
      AJAX=new ActiveXObject("Microsoft.XMLHTTP");  //  Wheee, ActiveX, how do we format c: again?
   }                                                // End setup Ajax.
   if (AJAX==null) {                                // If we couldn't initialize Ajax...
      alert("Your browser doesn't support AJAX.");  // Sorry msg.                                               
      return false                                  // Return false, couldn't set up ajax
   }
   AJAX.onreadystatechange = function() {                      // When the browser has the request info..
      if (AJAX.readyState==4 || AJAX.readyState=="complete") { //  see if the complete flag is set.
         callback(AJAX.responseText, AJAX.status);             // Pass the response to our processing function
      }                                                        // End Ajax readystate check.
   }
   var url='2.html';		// This is the URL we will call.
   AJAX.open("GET", url, true);                                  // Open the url this object was set-up with.
   AJAX.send(null);                                              // Send the request.
}

</script>


</head>

<body>

Текст!!!
И кнопка!

<div id="stat"></div> <button onClick="ajaxRequest()">Статистика</button>

</body>
</html>

2.html

Код:


просто текст

давно

Sergey

Практикант
137657
274

14.04.2010, 10:29

общий

Дайте мне пожалуйста книгу хорошую по ajax, мне нужно делать сайт с помощью ajax а книгу хорошую я нашел всего одну, но она размером в 100 мб.
Сложнее ли ajax Javascripta?

Неизвестный

15.04.2010, 12:09

общий

Нету у меня книги (( Но в принципе, оно и не очень надо: главное концептуально представить схему: по событию javascript вызывает ajax-функцию, которая подгружает с сервера текст или хтмл например в переменную, а потом организуется вывод этой переменной в нужное место страницы - див или дом-объект.

давно

Sergey

Практикант
137657
274

15.04.2010, 12:59

общий

Для реализации ajax нужно знать javascript и php?
Как вообще этот ajax работает? Я думал, что это отдельный язык программирования.

Неизвестный

16.04.2010, 16:16

общий

нет, не язык - это (от англ. Asynchronous Javascript and XML — «асинхронный JavaScript и XML») подход к построению интерактивных пользовательских интерфейсов веб-приложений, заключающийся в «фоновом» обмене данными браузера с веб-сервером. В результате, при обновлении данных, веб-страница не перезагружается полностью и веб-приложения становятся более быстрыми и удобными. ((с)пёрто с википедии, см. ссылку вверху страницы)

Вообще, javascript pзнать надо, и DOM знать надо, а вот РНР - не обязательно, аякс-функция, которая обращается к серверу фоном за контентом, забирает по http уже сформированные данные, всё равно, что браузер - то есть ей по вызываемому УРЛу можно подсунуть всё, что Вам надо - результат выполнения скрипта, статический текст или XML - всё зависит от Ваших нужд.

PS - и, конечно, наглядная ссылочка в моём ответе, но по-английски. Если сложно - почитайте механический перевод гугля: URL >>

давно

Sergey

Практикант
137657
274

16.04.2010, 16:50

общий

Т.е. для реализации ajax нужно знать javascript и DOM? Вот что такое DOM я не понял, читал в википедии.
Я видел сайты, построенные с помощью DIV'ов, там например сбоку панель с кнопками, пользователь нажимает на кнопку, и загружается отдельный участок страницы, или появляется на странице окошко авторизации, пользователь логинится и окошко исчезает, и страница вся не перезагружается, это и есть ajax?
Я нашел несколько книг по ajax: http://bhv.ru/search/?text=ajax&php_action=SEARCH
ajax в действии, изучаем ajax, javascript полное руководство - тут тоже рассказывается про ajax.
Какие из них подойдут?

Неизвестный

17.04.2010, 17:00

общий

Простите, пропаду на неделю, пока не смогу продолжить общение.
ДОМ = Документа Объектная Модель - это грубо говоря дерево документа - то есть вложенные друг в друга элементы и как к ним обращаться джаваскриптом.
bhv - мое любимое издательство.
про сайты - трудно сказать не глядя - но по описанию похоже.

давно

Sergey

Практикант
137657
274

19.04.2010, 11:11

общий

Хорошо, только обязательно ответьте здесь, а то я смутно представляю как работает этот ajax, мне бы простой пример с кодом посмотреть.

Неизвестный

30.04.2010, 21:22

общий

а Вы посмотрели простой пример по ссылке, которую я Вам уже два раза дал?

давно

Sergey

Практикант
137657
274

04.05.2010, 11:37

общий

где про бисквит Савоярди? Посмотрел, вот мне как раз такое нужно уметь делать, код можете показать?
Я не пойму что за контейнер надо создавать, это переменная?
Механический перевод гугля очень неудобно читать :(

обещают сделать все тривиально и грязные AJAX работу за вас, оставив вас свободно кода без понимания

Неизвестный

04.05.2010, 11:43

общий

не, не про бисквит ))
контейнер - это тег <div id="местоДляВыводаИнфыПолученнойАяксом"></div>
ладно, щас набросаю простейший пример из той английской статьи

Неизвестный

04.05.2010, 12:28

общий

http://grosseto-eurofood.com/my_var/ajax.html - это html-файл, содержащий весь аякс и контейнер <div> для вывода ответа аякса.

в результате нажатия кнопки аякс запрашивает файл response.php и передает ему гет-параметром нечто. В результате работы пхп-скрипта в зависимости от параметра аякс получает хтмл-код и вставляет его внутрь <div id="ajaxResponse"></div> Вот, в принципе, и всё.

давно

Sergey

Практикант
137657
274

04.05.2010, 14:54

общий

а весь код этого примера можете дать? а то я все равно не понимаю как делать, сообщение мне еще выдает "response.php?..."

Неизвестный

04.05.2010, 16:22

общий

http://grosseto-eurofood.com/my_var/ajax.html

Код:


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windoows-1251" />
<title>Untitled Document</title>

<script language="JavaScript" type="text/javascript">

function callback(serverData, serverStatus) {
document.getElementById("ajaxResponse").innerHTML = serverData;
}

function ajaxRequest(selectedOption) {
   var AJAX = null;                                 // Initialize the AJAX variable.
   if (window.XMLHttpRequest) {                     // Does this browser have an XMLHttpRequest object?
      AJAX=new XMLHttpRequest();                    // Yes -- initialize it.
   } else {                                         // No, try to initialize it IE style
      AJAX=new ActiveXObject("Microsoft.XMLHTTP");  //  Wheee, ActiveX, how do we format c: again?
   }                                                // End setup Ajax.
   if (AJAX==null) {                                // If we couldn't initialize Ajax...
      alert("Your browser doesn't support AJAX.");  // Sorry msg.                                               
      return false                                  // Return false, couldn't set up ajax
   }
   AJAX.onreadystatechange = function() {                      // When the browser has the request info..
      if (AJAX.readyState==4 || AJAX.readyState=="complete") { //  see if the complete flag is set.
         callback(AJAX.responseText, AJAX.status);             // Pass the response to our processing function
      }                                                        // End Ajax readystate check.
   }
   var url='response.php?param='+selectedOption;		// This is the URL we will call.
alert(url); // надо для проверки, с каким параметром запрашиваем аяксом ответ
   AJAX.open("GET", url, true);                                  // Open the url this object was set-up with.
   AJAX.send(null);                                              // Send the request.
}

</script>


</head>

<body>
<center>




<button onClick="ajaxRequest('red')">Красный</button>

<button onClick="ajaxRequest('yellow')">Желтый</button>

<button onClick="ajaxRequest('green')">Зеленый</button>





<div id="ajaxResponse"></div> 



А здесь может быть
нормальное
продолжение страницы
</body>
</html>

response.php

Код:


<?php
if ($_GET['param'] <> "red" && $_GET['param'] <> "yellow" && $_GET['param'] <> "green") die("XAKEP? тафай, тафай ))");
echo "<font color='".$_GET['param']."'>";
if ($_GET['param'] == "red") {
		echo "<font size='+3'>Вы выбрали красный</font>";
	} else {
		echo "<font size='+1'>Вы выбрали какой-то другой</font>";
	}
?>
<font>

давно

Sergey

Практикант
137657
274

04.05.2010, 17:29

общий

Так этот код можно было так через браузер посмотреть? Я думал, что там не весь, думал, что он сгенерирован.
Сейчас буду разбираться.
Этот пример написан на php и на javascript?

Неизвестный

05.05.2010, 10:46

общий

Исаак Моисеевич:
Вот именно, ВЕСЬ ))). Может генерироваться динамически (в примере это response.php, написан соотв. на php) только ответ, забираемый аяксом, в зависимости от переданных параметров, и то необязательно. Другими словами, аякс работает мини-браузером, запрашиавет документ по http-протоколу и обрабатывает полученный от запрошенного сервера ответ, в нашем случае это вывод внутрь контейнера <div>. А ответ - динамически сформированный html, однако для работы аякса НЕ ИМЕЕТ ЗНАЧЕНИЯ, как именно был сформирован ответ - достаточно знать, в каком формате он выдается и в соответствии с этим строить его дальнейшую обработку.

давно

Sergey

Практикант
137657
274

05.05.2010, 12:04

общий

Буду пробовать писать свои примеры. Для этого надо знать php и javascript?
Вы не теряйтесь, посмотрите потом на мои примеры :)

Форма ответа

Отправка постов/ответов доступна только зарегистрированным и подтвержденным пользователям.

Если Вы уже зарегистрированы на Портале - войдите в систему, если Вы еще не регистрировались - пройдите простую процедуру регистрации.