从Web Worker发出AJAX请求是否可行?

2021/01/23 01:21 · jquery ·  · 0评论

我似乎无法在我的Webworker中使用jQuery,我知道必须有一种使用它的方法XMLHttpRequest,但是当我阅读此答案时,这似乎不是一个好选择

当然,您可以在Webworker中使用AJAX,只需要记住AJAX调用是异步的,就必须使用回调。

这是ajax我在Webworker内部使用功能,用于访问服务器并执行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');

可能希望阅读此答案,以了解如果通过Webworkers进行的AJAX请求过多,可能会遇到的一些陷阱

如果尝试在另一个使用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

只需使用JS函数取()提取API您还可以设置许多选项,例如CORS绕过等等(因此您可以实现与importScripts相同的行为,但使用Promises可以简洁地进行)。

代码如下:

var _params = { "param1": value};

fetch("http://localhost/Service/example.asmx/Webmethod", {
    method: "POST",
    headers: {
        "Content-Type": "application/json; charset=utf-8"
    },
    body: JSON.stringify(_params )
}).then(function (response) {
    return response.json();
}).then(function (result) {
    console.log(result);
});

Web服务的web.config如下所示:

<configuration>
    <system.webServer>
        <httpProtocol>
            <customHeaders>
                <add name="Access-Control-Allow-Origin" value="*" />
                <add name="Access-Control-Allow-Headers" value="Content-Type" />
            </customHeaders>
        </httpProtocol>
    </system.webServer>
</configuration>
本文地址:http://jquery.askforanswer.com/congweb-workerfachuajaxqingqiushifoukexing.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!