阿賈克斯不與Wunderground API（A天氣服務獲取信息和顯示）工作

你好！阿賈克斯不與Wunderground API（A天氣服務獲取信息和顯示）工作

我想在網頁上使用公開的api from wunderground（更多信息在[http://wiki.wunderground.com/index.php/API_-_XML][1]）（事實上在一個電話的小工具，但爲了測試的目的，但是在技術上講和寫代碼是相同的）。

主要問題是，我一直無法獲得ajax請求的工作，我嘗試使用簡單的請求（沒有任何庫）和請求使用jQuery;你可以猜到：沒有人能工作。

我對此感到非常沮喪。我知道有大量的信息ajax，但不幸的是，我只能得到更多的挫折理解減少我沒有找到一個信息海（如互聯網）的具體答案。

也許一個慈善的靈魂:)可以幫助我，我複製粘貼代碼：是簡單的只能看到和測試你只需要複製和粘貼。

這就是所有，謝謝大家！ Grettings。 VIC

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <title>Test Data</title> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
     <script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script> 
     <script type="text/javascript"> 
     function tryGet() 
     { 
      try 
      { 
       var xhr = XMLHttpRequest(); 
       xhr.open("GET","http://api.wunderground.com/auto/wui/geo/WXCurrentObXML/index.xml?query=SABE",true); 
       xhr.onreadystatechange = function() 
       { 
        if (xhr.readyState == 4) 
        { 
         if (xhr.status == 200) 
         { 
          alert(xhr); 
         } 
         else 
         { 
          ret = "Error code " + xhr.status; 
          alert(ret); 
         } 
        } 
       } 
       xhr.send(null); 
      } 
      catch(e) 
      { 
       alert(e); 
      } 
     } 

     function tryGet2() 
     { 
      //Let's fetch simple.xml using jQuery ajax request 
      $.ajax(
      { 
       type: "GET", 
       url: "http://api.wunderground.com/auto/wui/geo/WXCurrentObXML/index.xml?query=SABE", 
       dataType: "xml", 
       success: function(data, textStatus, jqXHR) 
       { 
        alert(textStatus); 
       } 
      }); 
     } 
     </script> 
    </head> 
    <body> 
     <input type="button" value="try get" onclick="tryGet()"/><br/> 
     <input type="button" value="try get 2" onclick="tryGet2()"/> 
     <div id="content"> 
      <!-- To put things when things works fine--> 
     </div> 
    </body> 
</html>

來源

2011-08-20 Victor

您無法調用外部URL，[相同來源策略]（http://en.wikipedia.org/wiki/Same_origin_policy）禁止它。它真的很臭，沒有瀏覽器能夠在明確的錯誤信息中拼出來。 –

是的，但它是一個公共的api，我的意思是...它應該是公開的，並允許使用ajax查詢沒有代理服務器...不是嗎？ – Victor

你可以做什麼

1創建一個服務器端代理

2呼叫代理通過Ajax和代理將依次調用氣象服務

3 GET代理的xml響應

4解析並顯示它

這裏是你如何做到這一點在PHP

創建一個文件weather.php並把下面的代碼在它

<?php 
header('Access-Control-Allow-Origin: *'); 
$url = "http://api.wunderground.com/auto/wui/geo/WXCurrentObXML/index.xml?query=SABE"; 
$str = file_get_contents($url); 
echo $str; 
?>

呼叫weather.php從客戶端像

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
<script type="text/javascript"> 
$(function(){ 
$.ajax({ 
    type:'GET', 
    url:'path/to/weather.php', 
    cache:false, 
    dataType:'html', 
    success:function(data){   
    xmlDoc = $.parseXML(data), 
    $xml = $(xmlDoc), 
    $credit = $xml.find('credit').text(); 
    alert($credit); // alerts Weather Underground NOAA Weather Station 
    }, 
    error:function(jxhr,e){ 
     console.log(jxhr.status); 
     console.log(e.responseText); 
    } 
}); 

}); 

</script>

來源

2011-08-20 20:19:49 Rafay

感謝Enigma爲您的快速回答！我會牢記這一點。但我真的認爲，如果沒有這種解決方法，必須有方法來使用公共API。我的意思是..是一個PUBLIC API，所以服務器必須具有Access-Control-Allow-Origin標題：*，你不這麼認爲嗎？ – Victor

在前端，你可以使用回調，繼承我的方式使用WU搜索來抓取站點：

var get_city_list = function(query) { 
    $.ajax({ 
     url: "http://autocomplete.wunderground.com/aq?cb=cb_func&query=" + query, 
     type: "GET", 
     dataType: "jsonp", 
     callback: "cd_func" 
    }); 
} 

    window.cb_func = function(result) { 
    $.each(result, function(indexInArray, value) { 
     $.each(value, function(idx, result) { 
      $("<li>") 
      .data("name", result.name) 
      .addClass("weather-station") 
      .text(result.name) 
      .appendTo("#search-results"); 
     }); 
    }); 
}

來源

2015-06-05 21:49:20 goofiw

阿賈克斯不與Wunderground API（A天氣服務獲取信息和顯示）工作

回答

相關問題