使用纯JavaScript跨域请求数据

Question

我正在尝试访问一个返回json数据的外部URL，并且基于该数据中的值之一，我需要隐藏一个表行。 我尝试了几种方法来使用jsonp，jquery和ajax进行此操作，但似乎没有任何效果。 YQL正在为我工​​作，但是我不能使用外部服务，因为代码需要独立。 请有人让我知道如何使用javascript进行这项工作

这是我尝试过的一种方法

<script type='text/javascript'>



    function checkBlueLight() {

        $('#trBlueLight').hide();

        $.getJSON('http://.../Lights/getBlueLight?callback=?', function (data) {
            if (data.expDate != null) {
                $('#trBlueLight').show();
            } else {
                $('#trBlueLight').hide();
            }
        });
        }



    </script>

这是我尝试过的另一种方法。 同一问题未经授权-401

$.ajax({
    url: 'http://.../Lights/getBlueLight',
    dataType: 'json',
    success: function(data) {
       if (data.expDate != null) {
           $('#trBlueLight').show();
       } else {
           $('#trBlueLight').hide();
       }
    }
});  

我什至尝试使用jsp与url来获取数据，这也会引起一些权限问题

Answer 1

您控制外部网址吗？ 因为您可以：

在您的本地页面上：

function your_function(data) {
        alert(data.message)
}

然后在http://www.include.me/remote.php （或返回JSON的任何内容）上返回

your_function({message: "it works!"});

然后返回您的本地页面：

var script = document.createElement("script");
script.setAttribute("type", "text/javascript");
script.setAttribute("src", "http://www.include.me/remote.php");
document.getElementsByTagName("head")[0].appendChild(script);

然后将包含脚本，该脚本仅告诉脚本使用其提供的数据运行您已定义的函数。

Answer 2

如果您无法控制外部URL，并且它不支持CORS或JSONP ，那么最好的选择是为该服务编写服务器端代理方法。 因此，在服务器上，您在自己的主机上公开了一个新的终结点，该终结点在服务器端代表您的客户端访问实际服务，并将结果返回给客户端。

Answer 3

对于使用jsonp，服务器应将返回类型与回调函数绑定。 如果不是，则无法从服务器获取数据。

如果您使用的是cors，则服务器应支持。 这意味着服务器应该设置，

"Access-Control-Allow-Origin" header to "*"

Answer 4

JS或jQuery的问题在于，跨域数据可能无法实现，具体取决于浏览器或服务器，或者两者的组合均禁止数据交换。 这是许多浏览器和服务器上的安全策略。

最好和最安全的选择是将JS或jQuery（Ajax调用）与PHP cURL结合使用，其中cURL将进行调用以请求数据xml / json格式，然后将其发送回Ajax请求。

请看下面的例子：

在JS / JQuery AJax脚本中：

   $.ajax({
      url: 'php_script_with_cURL.php',
      dataType: 'json',
      data:'THE_DATA_OR_REQUEST',  
      type:'post',
      success: function(data) {
        if (data.expDate != null) {
          $('#trBlueLight').show();
        } else {
          $('#trBlueLight').hide();
        }
      }
   }); 

然后在php文件中（必须与JS位于同一服务器中）：（您可以使用url字符串或发布请求数据）

    //USE POST IF YOU NEED TO SEND VARIOUS COMMANDS TO GET THE DATA BACK
    $post = $_POST;

    //INIT THE CURL CALL
    $curl = curl_init();

    curl_setopt_array($curl, array(

        CURLOPT_RETURNTRANSFER => 1,

        //this will tell the server how to return the data format
        CURLOPT_HTTPHEADER => array('Content-type: application/json'),

        //use the query string if require, if not just remove it
        CURLOPT_URL => 'http://THE_URL_HERE.COM?request_value=some_value',

        //use the post only if yo need to post values 
        CURLOPT_POST => 1,
        CURLOPT_POSTFIELDS => array(
            value1 => $post['value1'],
            value2 => $post['value2']
        )
        //alternative you can also pass the whole POST array
        //CURLOPT_POSTFIELDS => $post
    ));

    $data = curl_exec($curl);

    if(!$data){
        die('Error: "' . curl_error($curl) . '" - Code: ' . curl_errno($curl));
    } 

    curl_close($curl);

    //echo the data that will be sent to the JS/JQuery Ajax call
    echo $data;

    //or if you need to do more processing with php  
    //$response = json_decode($data);

希望对您有所帮助：)编码愉快！