2014-02-11 4 views
0

У меня есть небольшая проблема, я не знаю, как ее решить. Таким образом, в основном у меня есть база данных MySQL, которая содержит различные текстовые строки (позволяет называть их подсказками). Существует только один столбец, называемый «сообщениями», и в каждой строке есть один совет. Цель состоит в том, чтобы отображать эти советы на веб-странице. Но я хочу, чтобы подсказки изменялись динамически автоматически. Другими словами, я хочу, чтобы каждые 10 секунд менять подсказку. Кроме того, я хотел, чтобы наконечник выбирался случайным образом. Мой план состоял в том, чтобы сделать div, где каждый указанный интервал, страница будет вызывать вызов Ajax, где будет генерироваться случайное число и использоваться в качестве номера строки в MySQL для отображения подсказки в div.Динамически изменяющиеся текстовые сообщения через Ajax

Фактически, я действительно смог сделать все это. Но последнее, что я хотел бы, это изменить текст, используя какой-то вид перехода, например эффект затухания и т. Д. Сейчас контент просто переключается с одного текста на другой. Я думаю, лучший способ будет использовать jQuery, но я просто не знаю, как его реализовать .... Вот мой текущий код, прямо сейчас текст изменяется при нажатии на кнопку, но я бы добавил автоматический переключатель позже, thats не проблема. Кроме того, текст из ajax прямо сейчас является статичным, не выведенным из MySQL, это просто для целей тестирования, и я знаю, как это сделать довольно легко.

Вот код страницы с текстом:

<html> 
<script src="http://code.jquery.com/jquery-migrate-1.0.0.js"></script> 
<script> 
function text(){ 

var xmlhttp;  
if (window.XMLHttpRequest){ 
    xmlhttp=new XMLHttpRequest(); 
} 
else{ 
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
} 
xmlhttp.onreadystatechange=function(){ 
    if (xmlhttp.readyState==4 && xmlhttp.status==200){ 
    document.getElementById("message").innerHTML=xmlhttp.responseText; 
    } 
} 
xmlhttp.open("GET","message_ajax.php",true); 
xmlhttp.send(); 
} 
</script> 
</head> 

<body> 
<input type="button" onclick="text()" value="Show" class="button"> 
<div id="message">X</div> 
</body> 
</html> 

А вот фактический Ajax страница:

<?php 
    echo "Y"; 
?> 

Так что в этом тестировании сценария, когда я нажимаю на кнопки, страница делает вызов ajax, а «X» в div переходит на «Y», но возможно ли сменить текст с помощью некоторой анимации?

+0

Действительно ли это стоит выбирать каждую из этих текстовых строк отдельно? Насколько велика эта таблица? Если есть всего несколько десятков, то может иметь смысл включить их все в разметку и только переключать, какой из них видится каждые 10 секунд (это также облегчит переход). Если в БД имеется большое количество, по крайней мере, выбирайте 10-20 каждый раз вместо 1. В противном случае вы делаете тонну ненужных запросов на сервер для каждого посетителя. – Ennui

+0

Ну, таблица на самом деле довольно большая, и я часто добавляю строки, а я хочу использовать ее на нескольких страницах, чтобы всегда требовалось копировать новые строки на каждую страницу. – Jachym

+0

Истина - хотя есть еще другие способы сделать это (например, php-функция, которая извлекает 20 строк при загрузке страницы, а затем с помощью ajax, чтобы получить еще 20, когда это станет необходимым), которые не будут болотовать на вашем сервере столько же, сколько отдельные запросы для каждый ряд. Я действительно не думаю, что вам нужен запрос на сервер каждые 10 секунд на посетителя на страницу. Если вы получите какой-то реальный трафик, который быстро станет проблемой производительности. – Ennui

ответ

0

Если вы используете функциональность AJAX и хотите делать анимации, jQuery является обязательным. Если вы просто делаете AJAX, вы можете обойтись без jQuery, но как только вам понадобится использовать функциональность, предоставляемую jQuery в нескольких местах вокруг страницы, она будет стоить небольших накладных расходов.

Это говорит, вы хотите сделать что-то вроде этого:

$('#message').fadeOut(function() 
{ 
    $(this).html(msg).fadeIn(); 
}); 

Javascript запускается на выполнение браузером на текущей странице. Этот код должен войти в теги <script> в нижней части страницы.

Технически вы можете просто поместить его в теги script, которые уже находятся в верхней части страницы, но предполагается, что производительность увеличивается при сохранении вашего JS в нижней части страницы.

+0

Я знаю, так где я должен помещать код, который вы опубликовали? На фактической странице? На странице Ajax? – Jachym

Смежные вопросы