使用純javascript的跨域請求數據

我想訪問一個外部url，它返回json數據，並基於該數據中的一個值，我需要隱藏一個表格行。我已經嘗試了幾個選項來做到這一點與jsonp，jquery和ajax，但似乎沒有工作。 YQL正在爲我工作，但我不能使用外部服務，因爲代碼需要獨立。請人讓我知道我怎樣才能使這項工作與JavaScript使用純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數據，並且也造成了一些權限問題

來源

2013-05-09 itdeveloper

到目前爲止您嘗試過的代碼是什麼？ – NilsH 2013-05-09 05:03:02

我試過jquery-JSONP與回調和Ajax-Json組合的組合 – itdeveloper 2013-05-09 05:11:41

你可以在這裏粘貼你的代碼嗎？ – HaBo 2013-05-09 05:12:38

你控制的外部URL？因爲你可以這樣做：

在您的本地頁：

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);

然後將包含腳本，它只是簡單的告訴它使用它提供的數據運行你已經定義好的函數。

來源

2013-05-09 05:14:18 dave

我無法控制外部網址 – itdeveloper 2013-05-09 05:28:55

如果您無法控制外部URL，並且它不支持CORS或JSONP，那麼您最好的選擇是爲服務編寫服務器端代理方法。因此，在您的服務器上，您將在您自己的主機上公開一個新的端點，並在服務器端代表您的客戶端訪問真實的服務，然後將結果返回給客戶端。

來源

2013-05-09 05:31:57 NilsH

對於使用jsonp，服務器應該使用回調函數綁定返回類型。如果沒有，則無法從服務器獲取數據。

如果您使用cors，服務器應該支持。這意味着服務器需要設置，

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

來源

2013-05-09 05:44:41

-1

與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);

希望這有助於:) 編碼愉快！

來源

2013-05-09 06:34:08

我們使用JSP而不是PHP，所以如果你有jsp的東西，請讓我知道 – itdeveloper 2013-05-09 16:31:55

我不知道/使用JSP，但我認爲這篇文章解釋了關於JSP和AJAX的一切。 http://code.google.com/p/json-simple/wiki/JSPAndAJAXExamples – 2013-05-10 21:08:17

要求純JS的問題 – 2018-02-07 12:05:53

使用純javascript的跨域請求數據

回答

相關問題