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

Question

我目前正在尝试用 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;
  }
}

我在这里做错了吗？

Answer 1

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

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

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