在后台执行HTTP请求而不加载网页？

Question

所以这个第三方网站包含一个按钮，当点击该按钮时，它发送一个GET请求并执行一些服务器端任务，将登录用户的数据更新到其数据库中。必须在每个日历日执行该期望的任务。是否有另一种方法可以让本网站的服务器执行任务而不会在每个日历日加载页面？附加到该按钮的URL似乎使用REST API，因为button元素具有包含路径+参数的href URL。目前，我让它为我执行服务器端任务的解决方案是更改URL的参数并在新的浏览器选项卡中打开该URL。

更准确地说，url看起来像这样：https://something.com/somepath/47240/6/sort?date=2018-03-06&crumb=JMBuREVDPqS我发现只需将日期参数更改为第二天并在浏览器中加载该URL将使该网站的服务器也在第二天执行所需的任务。有没有办法让它在后台执行此任务而不为每天加载单独的选项卡或操作日期参数并在单独的选项卡中打开更新的URL唯一的解决方案？由于我当前的方法只是打开更新的日期URL，因此它纯粹是通过客户端代码实现的。所以我想知道仅使用客户端代码的替代解决方案。

Answer 1

1. 生成您要呼叫的日期数组。
2. 迭代每个日期，并向服务器发出请求。
3. 完成请求后，选择下一个日期并进行处理。

以下是示例代码，您可以根据自己的情况进行修改。

  var url="https://something.com/somepath/47240/6/sort?date=";
  var date1 = new Date();
  var date2 = new Date(2018, 1, 1);
  var day;
  var between = [date1];
 //Generate the date array for which you want to run
  while(date2 <= date1) {
      day = date1.getDate()
      date1 = new Date(date1.setDate(--day));  
      between.push(date1);
  }
//Covert date to string format for passing to the request url
function formatDate(date) {
    var d = new Date(date),
        month = '' + (d.getMonth() + 1),
        day = '' + d.getDate(),
        year = d.getFullYear();

    if (month.length < 2) month = '0' + month;
    if (day.length < 2) day = '0' + day;
    return [year, month, day].join('-');
  }

  var callPage = function (dt) {
       return new Promise(function (resolve, reject) {
          var xhr = new XMLHttpRequest();
          var urlWithParam=url+ dt + "&crumb=JMBuREVDPqS";
          xhr.open('GET', urlWithParam, true);
          xhr.onload = function () {
            //Resolve the promise, so that next can be picked
             resolve();
          };

        });
      };
    //Make the call for each date.
    for (var i = 0; i < between.length; i++) {
        callPage(between[i]).then(function () {
      });
    }

如果您遇到CROSS DOMAIN请求的问题，您可以使用隐藏的iframe来实现这一点，如下所示。

 var url="https://something.com/somepath/47240/6/sort?date=";
  var date1 = new Date();
  var date2 = new Date(2018, 1, 1);
  var day;
  var between = [date1];
 //Generate the date array for which you want to run
  while(date2 <= date1) {
      day = date1.getDate()
      date1 = new Date(date1.setDate(--day));  
      between.push(date1);
  }
//Covert date to string format for passing to the request url
function formatDate(date) {
    var d = new Date(date),
        month = '' + (d.getMonth() + 1),
        day = '' + d.getDate(),
        year = d.getFullYear();

    if (month.length < 2) month = '0' + month;
    if (day.length < 2) day = '0' + day;
    return [year, month, day].join('-');
  }
    
  var callPage = function (dt) {
    
    var iframe = document.createElement('iframe');
    var urlWithParam=url+ formatDate(dt) + "&crumb=JMBuREVDPqS";
    console.log("Request ->",urlWithParam);
    iframe.style.display = 'none';
    iframe.src = encodeURI(urlWithParam);
    document.body.appendChild(iframe);
  }    
    //Make the call for each date.
    for (var i = 0; i < between.length; i++) {
        callPage(between[i]);
    }

Plunk

Answer 2

你可以做这样的事情

1）设置间隔以在一天内调用该函数一次

2）每天调用函数后必须动态增加日期

var dayInMilliseconds = 1000 * 60 * 60 * 24;
var todayDate = new date();
 function formatDate(todayDate ) {
  var d = new Date(date),
    month = '' + (d.getMonth() + 1),
    day = '' + d.getDate(),
    year = d.getFullYear();

 if (month.length < 2) month = '0' + month;
if (day.length < 2) day = '0' + day;

return [year, month, day].join('-');
}
setInterval(function() { 
$.get("https://something.com/somepath/47240/6/sort", 
{"date":formatDate(todayDate),"crumb":"JMBuREVDPqS"},
function(response){
console.log("http request loaded in the background")'
});
 },dayInMilliseconds );

Answer 3

使用Ajax

var http = new XMLHttpRequest();
var url = "Put url here";
var params = 'Put Params here'
http.open("POST", [url,params].join('?'), true);