Question

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

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

我今天的目标是生成一个JavaScript函数，允许我对另一个站点进行Ajax调用以检索特定的Div并使用我页面中该Div的内容。通过使用.find（）方法过滤来自Ajax调用的响应来检索我需要的特定Div然后使用.html（）函数去除内容并将其附加到我的Div上，我可以使用jQuery轻松地完成此操作现场。但是，我看不到使用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调用成功时似乎没有执行以下代码片段：

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

我在这里做错了吗？

Answer 1

你真的需要调查XSS。我想你会明白为什么对你要做的事情有严重的限制。

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

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

使用JavaScript Ajax从其他站点检索内容

1 个答案: