使用Ajax调用初始化页面的正确方法是什么?

时间:2018-09-05 22:23:48

标签: javascript ajax asynchronous xmlhttprequest webserver

我有一个正在侦听请求的服务器,它提供某些信息。我想要我的网页,以便当我第一次加载它时,它向服务器发出有关其最新信息的请求。我想用这些信息加载我的网页。

function fetch_response(unit, cmd, callback) {
   var xhttp = new XMLHttpRequest;

   xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        handle_response(this);
        if (callback != undefined)
        {
          callback();
        }
      }
   };

   xhttp.open("GET", "fetch_response?Unit=" + unit + "&Command=" + cmd, true);
   xhttp.send();
}

function handle_response(xhttp)
{
  console.log(xhttp);
  response_url = xhttp.responseURL.toLowerCase();
  if (response_url.includes('current_speed_1'.toLowerCase()))
  {
    document.getElementById('current_speed').innerHTML = xhttp.responseText;
  }
  else if (response_url.includes('current_speed_2'.toLowerCase()))
  {
    document.getElementById('current_speed_2').innerHTML = xhttp.responseText;
  }
  else
  {
    console.log(xhttp.responseText);
  }
}

(function () {

   // Get servo 1 speed
   fetch_response('servo1', 'current_speed_1', function() {
     // Get servo 2 speed
     fetch_response('servo2', 'current_speed_2', null)
   });

   console.log('Refresh');
})();

这很好用,但是在收到ajax调用的响应后传递回调似乎是我没有出于预期目的使用ajax。我对异步调用没有太多的经验,所以我希望我能对如何正常使用ajax调用在网页上进行初始设置有一些了解?

0 个答案:

没有答案