Превращение OnClick событие в Timed событие с JavaScript и AJAX

У меня есть быстрый вопрос мудрецам ..

Как я могу повернуть код ниже в событие времени, а не событие OnClick.

** Для примера я хотел бы, чтобы обновить «showlist» Див каждые 5 секунд ...

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

Я пытаюсь медленно понимать основы :)

Любое руководство было бы весьма признателен

<!DOCTYPE html> 
<html> 
<head> 
<script> 

function loadXMLDoc() 
{ 

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("showlist").innerHTML=xmlhttp.responseText; 

} 
} 

xmlhttp.open("GET","playlist.php?t=" + Math.random(),true); 
xmlhttp.send(); 

} 
</script> 
</head> 

<body> 
<h2>Ajax Testing...</h2> 
<button type="button" onclick="loadXMLDoc()">Request data</button> 
<div id="showlist"></div> 
</body> 

</html>

источник

2014-02-03 Justin

Таким образом, вы не хотите OnClick больше? Что должно начаться при загрузке? Нагрузка на страницу? – dfsq

@dfsq я хотел бы удалить «OnClick» и получить playlist.php и отобразить на экране каждые 5 секунд. – Justin

Я бы посоветовал взглянуть на 'jQuery' вместо XMLHttpRequest, который намного сложнее начать (я думаю),' $ .ajax'. О том, что вы хотите сделать, вы можете использовать функцию setTimeout js для автоматического вызова функции loadXMLDoc каждые 5 секунд. LoadXMLDoc придется обрабатывать запрос ajax. – Vadorequest

Вы можете изменить функцию loadXMLDoc, чтобы использовать setTimeout. Рассмотрим этот пример:

function loadXMLDoc() { 

    var xmlhttp, 
     timer; 

    if (window.XMLHttpRequest) { 
     xmlhttp = new XMLHttpRequest(); 
    } else { 
     xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 

    xmlhttp.onreadystatechange = function() { 
     if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
      document.getElementById("showlist").innerHTML = xmlhttp.responseText; 
     } 
    }; 

    xmlhttp.onerror = function() { 
     clearTimeout(timer); 
    }; 

    xmlhttp.open("GET", "playlist.php?t=" + Math.random(), true); 
    xmlhttp.send(); 


    timer = setTimeout(loadXMLDoc, 5000); 
}

Функция вызывает запрос AJAX и устанавливает тайм-аут 5 с. Я также добавил базовый onerror callback, чтобы очистить таймер на всякий случай.

источник

2014-02-03 19:14:03 dfsq

@dfsk Спасибо .. я внедрил ваш код, но ничего не отображается на экране ... Мне нужно как-то запустить цикл так, чтобы что отображение данных на экране. Im, предполагающий, что мне нужно добавить «loadXMLDoc()» каким-то образом, как раньше, как событие Onclick вызвало сценарий – Justin

. Вы должны начать процесс в нужный момент. Например, при загрузке страницы. Или просто вызовите эту функцию 'loadXMLDoc()'. – dfsq

@dsfq Спасибо за помощь ... Мне очень важно видеть основные методы ... Вы сделали это ... Очень добро! – Justin

Я когда-то сделал своего рода телевизор, который автоматически менял «экран» через 3 секунды.

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

// This is the div called myScreen 
var myScreen = document.getElementById('myScreen'); 
// This is an array, which is holding the names of the pictures 
var myPics = ['img-screen1.png','img-screen2.png']; 
// This is looking at how many things the array holds 
var totalPics = myPics.length; 
// Now this is where the magic begins, this keeps looping around and around, and 
// makes sure all the pictures are being showed, one by one. 
var i = 0 
function loop() { 
    if(i > (totalPics - 1)){ 
     i = 0; 
    } 
    myScreen.innerHTML = '<img src="images/'+myPics[i]+'">'; 
    i++; 
    loopTimer = setTimeout('loop()',3000); 
} 
loop();

Я надеюсь, что вы можете повторно использовать это для вашего проекта, и я надеюсь, что вы вроде поняли, что я имею в виду, если мне нужно уточнить, просто спросите меня :).

Так что вам нужно сделать, это обновить массив, когда вы получили новый элемент в своем списке.

источник

2014-02-03 19:09:19 JiFus

Эта функция (если она помещена внутри одного и того же тега скрипта после загрузки loadXMLDoc fn), выполняет и вызывает вашу функцию, а затем снова через каждые 5 секунд (рекурсивно). Вы могли бы назвать setInterval вместо этого, но рискует иногда пропуская цикл, если JS двигатель занят:

(function doMeSelf(){ 
    setTimeout(function(){ 
     loadXMLDoc(); 
     doMeSelf(); 
    },5000); 
})();

вшита функция размораживания внутри скобок, а затем следует() называются немедленно вызываются выражение функции ,

Смотрите этот вопрос для некоторого фона: What do parentheses surrounding a object/function/class declaration mean?

источник

2014-02-03 19:15:31 Faust

Превращение OnClick событие в Timed событие с JavaScript и AJAX

ответ

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