javascript - 使用 JavaScript Ajax 从另一个站点检索内容

Question

我目前正在尝试用 Vanilla Javascript 替代方案替换一些我目前使用 jQuery 的函数。这是为了:

• 从整体上加深我对 JavaScript 的理解
• 让我成为更好的前端开发人员(与上述相关)
• 无需使用 jQuery 等库来完成简单任务，从而提高网络应用程序的速度和响应能力。

我今天的目标是生成一个 JavaScript 函数，它允许我对另一个站点进行 Ajax 调用以检索特定的 Div 并在我的页面中使用该 Div 的内容。我可以使用 jQuery 轻松完成此操作，方法是使用 .find() 方法过滤来自 Ajax 调用的响应以检索我需要的特定 Div，然后使用 .html() 函数去除内容并将其附加到我的 Div地点。但是，我看不到使用 Vanilla JavaScript 执行此操作的替代方法。

到目前为止我的代码可以在下面找到:

function fireAjaxRequest(requestType,requestUrl,contentPlaceholder){
  var ajaxRequest;
  if(window.XMLHttpRequest){
    ajaxRequest = new XMLHttpRequest();
  }else{
    ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
  }

  ajaxRequest.onreadystatechange = function(){
    if(ajaxRequest.readyState == 4 && ajaxRequest.status == 200){
      contentPlaceholder.innerHTML = ajaxRequest.responseText;
    }
  }

  ajaxRequest.open(requestType,requestUrl, true);
  ajaxRequest.send();
}

我调用我的函数如下:

var contentArea = document.getElementById('news');
fireAjaxRequest('GET', 'http://www.bbc.co.uk',contentArea);

当我加载我的页面时，我可以在 Firebug 中看到请求成功完成并且我得到 来自 Ajax 调用的 200 成功响应但是，我的目标元素中没有显示任何内容。起初我以为这是因为您不能将整个页面存储在单个元素中，但在稍微更改我的代码后我发现以下代码片段似乎不会在 Ajax 调用成功时执行:

ajaxRequest.onreadystatechange = function(){
  if(ajaxRequest.readyState == 4 && ajaxRequest.status == 200){
    contentPlaceholder.innerHTML = ajaxRequest.responseText;
  }
}

我是不是做错了什么？

Answer 1

你真的需要看看XSS .我想您会理解为什么您尝试做的事情有严格的限制。

如果您同时控制这两个域，则可以使用 JSONP或 CORS .

您还可以将 ajax 请求发送到您自己的充当代理的服务器。您的服务器会将请求“转发”到目标服务器，并将响应转发给客户端。