Можно ли выполнить запрос AJAX от веб-рабочего?

Ответ 1

Конечно, вы можете использовать AJAX внутри своего веб-сайта, вам просто нужно запомнить, что AJAX-вызов является асинхронным, и вам придется использовать обратные вызовы.

Это функция ajax, которую я использую внутри моего веб-мастера, чтобы попасть на сервер и выполнять запросы AJAX:

var ajax = function(url, data, callback, type) {
  var data_array, data_string, idx, req, value;
  if (data == null) {
    data = {};
  }
  if (callback == null) {
    callback = function() {};
  }
  if (type == null) {
    //default to a GET request
    type = 'GET';
  }
  data_array = [];
  for (idx in data) {
    value = data[idx];
    data_array.push("" + idx + "=" + value);
  }
  data_string = data_array.join("&");
  req = new XMLHttpRequest();
  req.open(type, url, false);
  req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  req.onreadystatechange = function() {
    if (req.readyState === 4 && req.status === 200) {
      return callback(req.responseText);
    }
  };
  req.send(data_string);
  return req;
};

Затем внутри вашего работника вы можете сделать:

ajax(url, {'send': true, 'lemons': 'sour'}, function(data) {
   //do something with the data like:
   self.postMessage(data);
}, 'POST');

Возможно, вы захотите прочитать этот ответ о некоторых ошибках, которые могут возникнуть, если у вас есть слишком много запросов AJAX через веб-мастеров.

Ответ 2

При попытке вызвать службу в другом домене, использующем JSONP, вы можете использовать функцию importScripts. Например:

// Helper function to make the server requests 
function MakeServerRequest() 
{ 
importScripts("http://SomeServer.com?jsonp=HandleRequest"); 
} 

// Callback function for the JSONP result 
function HandleRequest(objJSON) 
{ 
// Up to you what you do with the data received. In this case I pass 
// it back to the UI layer so that an alert can be displayed to prove 
// to me that the JSONP request worked. 
postMessage("Data returned from the server...FirstName: " + objJSON.FirstName + " LastName: " + objJSON.LastName); 
} 

// Trigger the server request for the JSONP data 
MakeServerRequest();

Нашел этот замечательный совет здесь: http://cggallant.blogspot.com/2010/10/jsonp-overview-and-jsonp-in-html-5-web.html

Ответ 3

Просто используйте JS-функцию fetch() из API-интерфейса Fetch. Вы также можете настроить множество опций, таких как обход CORS и т.д. (Так что вы можете добиться того же поведения, что и с помощью importScripts, но гораздо более чистым способом с помощью Promises).