Question

我正在努力学习ajax，但我遇到了困难。

我有一个java servlet，它将从数据库中提供数据，我正在尝试创建一个简单的网页，每隔5秒不断要求更新一次，然后显示它而无需重新加载页面。我也不想在准备状态改变时这样做，而是每5秒做一次。

// xmlHttp = xmlHttpRequest object
function process() {
    try {
        if (xmlHttp.readyState==4 || xmlHttp.readyState==0) {
            xmlHttp.open("GET",'localhost:8080',true);
            //handleServerResponse();  // Get data from server. Not on ready state change, but always ?

            setInterval('process()', 5000);
        } else {
            setTimeout('process()', 5000);
        }
    } catch (e) {
        alert('main process did not work');
        alert(e.toString());
    }
}

我不确定如何才能做到这一点。有什么遗漏？

Answer 1

以下步骤涉及从服务器获取数据。

制作一个ajax请求对象并打开连接
然后将请求发送到服务器
服务器在处理请求时不断发送响应。恩。 200将在请求成功时发送，404在无法找到资源时发送。就绪状态告诉我们请求的状态如何有5个状态通知我们与服务器的请求状态。 LOOK HERE

仅当readystate为4且状态为200时。您对服务器的请求成功，您在request.responseHTML或request.responseXML收到回复。你用它来处理。

windown.onload = initialize;
function initialize()
{
    setInterval(process, 5000);
}

var request ;
function process()
{
   request = getAJAXREQUETOBJECT;
   request.open("get","URL",true);
   request.onreadystatechange = requestresponse;
   request.send(true);
}

function requestresponse()
{
   if(request.readystate == 4 && request.status == 200)
   {
     // do manipulation with request.responseHTML or request.responseXML
   }
}

Answer 2

我认为可以采取两种方式。见下文。我提供了一些简化以强调解决方案。

第一种方法。在setInterval()

之外使用process()

function process() {
    url = "http://localhost:9090";

    var xhr = new XMLHttpRequest();
    xhr.open("GET",url,true);

    xhr.onreadystatechange = function(){
        if(xhr.readyState === 4 && xhr.status === 200) {
             // handle response (xhr.responseText)  
        }
    }

    xhr.send();
}

//and then
setInterval(process, 5000);

另一个。在setTimeout()

中使用process()

function process() {
    url = "http://localhost:9090";

    var xhr = new XMLHttpRequest();
    xhr.open("GET",url,true);

    xhr.onreadystatechange = function(){
        if(xhr.readyState === 4 && xhr.status === 200) {
             // handle response (xhr.responseText)

             setTimeout(process, 5000); 
        }
    }

    xhr.send();
}

//and then
process();

setTimeout()和setInterval之间的区别在于，第一个将运行process()一次，而后一个是循环。因此，如果您在interval()内使用process()，请求数量将呈指数级增长。

使用ajax从服务器获取和显示数据

2 个答案: