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

Posted 2023-02-27

【中文标题】使用 JavaScript Ajax 从另一个站点检索内容

【英文标题】：Using JavaScript Ajax to retrieve content from another site

【发布时间】：2014-05-13 10:28:40

【问题描述】：

我目前正在尝试用 Vanilla javascript 替代品替换我目前使用 jQuery 的一些功能。这是为了：

增加我对 JavaScript 的整体理解 让我成为更好的前端开发人员（与上述内容相关） 无需使用 jQuery 等库来执行简单任务，从而提高我的 Web 应用程序的速度和响应能力。

我今天的目标是生成一个 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 Success 响应但是，我的目标元素中没有显示任何内容。起初我认为这是因为您不能将整个页面存储在单个元素中，但是在稍微更改我的代码后，我发现在 Ajax 调用成功后似乎没有执行以下 sn-p 代码：

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

我在这里做错了吗？

【参考方案1】：

您确实需要查看XSS。我想你会明白为什么你正在尝试做的事情有严格的限制。

如果您控制两个域，则可以使用JSONP 或CORS。

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

【讨论】：

我知道 XSS，但有一些方法可以绕过它。本质上，我们正在为客户设计我们的产品，并且需要从他们的网站中提取一些内容到我们的模板版本中。不幸的是，他们似乎并不精通技术，并且似乎没有我想要获取的内容的 XML 或 RSS 提要，所以 Ajax 是我能想到的唯一解决方案。

@jezzipin，如果是这样，你就会知道普通的 ajax 请求将无法正常工作。

就像我说的，有很多方法可以绕过它，就像我过去做过的那样。我已经很久没有用 Vanilla JavaScript 编写过很多东西了

@maček 如果你控制了这两个域，你应该允许CORS 而不是使用像 JSONP 这样的黑客攻击。

@JosephtheDreamer 好朋友。 +1 用于突出显示此选项。