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

【问题标题】：Get and display data from server using ajax使用ajax从服务器获取和显示数据
【发布时间】：2015-03-17 15:07:25
【问题描述】：

我正在尝试学习 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());
    }
}

我不确定如何才能做到这一点。缺少什么？

【问题讨论】：

标签： ajax

【解决方案1】：

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

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

仅当 readystate 为 4 且 status 为 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
   }
}

【讨论】：

【解决方案2】：

我看到有两种方法可以做到。见下文。我提供了一些简化以强调解决方案。

第一种方法。在process()之外使用setInterval()

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);

另一个。在process() 中使用setTimeout()

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()，而后一个是循环。因此，如果您在process() 中使用interval()，请求的数量将呈指数级增长。

【讨论】：