Я надеюсь устанавливать веб-страницу, которую демонстрационные данные через Ajax называют от встроенного веб-сервера. Как я установил бы кодекс так, чтобы один запрос не перекрывал другого? Я должен упомянуть, что у меня есть очень мало опыта JavaScript и также неопровержимый довод для не пользований внешними библиотеками любого размера, больше, чем, возможно, приблизительно 10 килобайтов.
Вы можете рассмотреть вариант перезапуска вашего запроса AJAX ТОЛЬКО после успешного ответа от предыдущего вызова AJAX.
function autoUpdate()
{
var ajaxConnection = new Ext.data.Connection();
ajaxConnection.request(
{
method: 'GET',
url: '/web-service/',
success: function(response)
{
// Add your logic here for a successful AJAX response.
// ...
// ...
// Relaunch the autoUpdate() function in 5 seconds.
setTimeout(autoUpdate, 5000);
}
}
}
В этом примере используется ExtJS , но вы можете очень легко использовать только XMLHttpRequest
.
ПРИМЕЧАНИЕ: Если вам нужен точный интервал x секунд, вам нужно будет отслеживать время, прошедшее с момента запуска запроса AJAX до вызова setTimeout ()
, а затем вычесть этот временной интервал из задержки. В противном случае интервал времени в приведенном выше примере будет варьироваться в зависимости от задержки сети и времени обработки логики веб-службы.
Я предлагаю вам использовать небольшой набор инструментов, например jx.js ( источник ). Вы можете найти его здесь: http://www.openjs.com/scripts/jx/ (уменьшено менее 1 КБ)
Чтобы настроить запрос:
jx.load('somepage.php', function(data){
alert(data); // Do what you want with the 'data' variable.
});
Чтобы настроить его на интервал вы можете использовать setInterval
и переменную для хранения информации о том, выполняется ли запрос в данный момент - если это так, мы просто ничего не делаем:
var activeRequest = false;
setInterval(function(){
if (!activeRequest) {
// Only runs if no request is currently occuring:
jx.load('somepage.php', function(data){
activeRequest = false;
alert(data); // Do what you want with the 'data' variable.
});
}
activeRequest = true;
}, 5000); // Every five seconds
AJAX, несмотря на название, не обязательно должен быть асинхронным.
Вот асинхронный метод ...
var req;
function ajax(method,url,payload,action)
{
if (window.XMLHttpRequest)
{
req = new XMLHttpRequest();
req.onreadystatechange = action;
req.open(method, url, true);
req.send(payload);
}
else if (window.ActiveXObject)
{
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req)
{
req.onreadystatechange = action;
req.open(method, url, true);
req.send(payload);
}
else
{
alert("Could not create ActiveXObject(Microsoft.XMLHTTP)");
}
}
}
... но вот его синхронный эквивалент ...
function sjax(method,url,payload,action)
{
if (window.XMLHttpRequest)
{
req = new XMLHttpRequest();
req.open(method, url, false);
req.send(payload);
action();
}
else if (window.ActiveXObject)
{
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req)
{
req.onreadystatechange = action;
req.open(method, url, false);
req.send(payload);
}
else
{
alert("Could not create ActiveXObject(Microsoft.XMLHTTP)");
}
}
}
... и вот типичное действие ...
function insertHtml(target)
{
var pageTarget = arguments[0];
if (req.readyState == 4) // 4 == "loaded"
{
if (req.status == 200) // 200 == "Ok"
{
if (req.responseText.indexOf("error") >= 0)
{
alert("Please report the following error...");
pretty = req.responseText.substring(req.responseText.indexOf("error"),1200);
pretty = pretty.substring(0,pretty.indexOf("\""));
alert(pretty + "\n\n" + req.responseText.substring(0,1200));
}
else
{
div = document.getElementById(pageTarget);
div.innerHTML = req.responseText;
dimOff();
}
}
else
{
alert("Could not retreive URL:\n" + req.statusText);
}
}
}