Question

我正在尝试从用户提供的URL中获取数据文件，但我不知道该怎么做。实际上，我可以成功从我的服务器获取数据。这是我的代码：

$("button#btn-demo").click(function() {
  $.get('/file', {
    'filename' : 'vase.rti',
  },
  function(json) {
    var data = window.atob(json);

    // load HSH raw file
    floatPixels = loadHSH(data);

    render();
  });
});

它可以从我的服务器获取二进制数据，解析文件并将其渲染为图像。但是现在我希望它在没有任何服务器的情况下工作，这意味着用户可以提供URL，javascript可以获取文件并进行渲染。我知道这是关于跨站点请求。你能告诉我它以及如何实现它吗？提前谢谢！

Answer 1

假设您的URL是有效XML文档的地址，此示例将抓住它。如果URL位于与保存脚本的域不同的域上，则需要使用服务器端脚本语言来获取并获取资源（URL值为XML doc）并将其返回到域。在PHP中它会......

<?php echo file_get_contents( $_GET['u'] );

其中$ _GET ['u']是来自USER的网址值。让我们调用我们的PHP脚本proxy.php。现在我们的JavaScript将调用我们的proxy.php并将URL值连接到end，这将允许我们将URL值传递给PHP脚本。

addy = $("#idOfInputFieldhere").val();
$.ajax({
  url: 'proxy.php?u='+addy, /* we pass the user input url value here */
  dataType:'xml',
  async:false,
  success:function(data){
    console.log(data); /* returns the data in the XML to the browser console */
  }
});

您需要在chrome中使用js调试器控制台来查看data。此时，您需要在循环中提取数据并使用find（）http://api.jquery.com/?s=find%28%29

Answer 2

我对jQuery并不是很熟悉，但据我所知，由于源策略相同，浏览器不会让任何JavaScript代码向除自己以外的域发出AJAX请求。因此，为了检索某些数据（特别是JSON格式），您可以动态地向页面添加<script>元素，并将其src属性设置为数据提供者的地址。像这样：

<script src='otherdomain.com/give_me_data.json'/>

这仅在您需要访问某些静态数据（如上面的url）或您可以访问服务器端代码时才有效。因为在这种情况下，服务器端代码应返回如下字符串：

callbackFunction({data1: 'value1', data2: 'value2', ...});

当浏览器获取src属性中指定的项目时，尝试运行它（因为它知道它是一个脚本）。因此，如果服务器发送函数调用作为响应，则在获取所有数据后立即调用该函数。

您可以以这样一种方式实现服务器端：它接受回调函数的名称作为参数，加载请求的数据并生成一个适当的输出，该输出包含一个带有加载数据的函数调用作为json参数。

在javascript中从网址获取数据

2 个答案: