jquery實現ajax跨域讀取資料的例子

來源:互聯網
上載者:User

我們知道,用服務端指令碼做js來用可以實現通訊,但是,他功能太簡單,不夠靈活,還是需要像ajax這樣的通訊來的方便。今天公司在使用phonegap時遇到了ajax跨域問題,我偷聽了一下,總結了一下ajax兩種跨域問題。嘿嘿。 當然這樣應用情境是有前提的,一般情況下,我們都是在同個網域名稱下,但是做用戶端軟體或手機應用,沒有域,所以要解決跨域通訊。

js 要跨域的話,可以用:

<script src="別的網站的js地址(這裡的內空可以是動態產生的,如:aaa.jsp、bbb.aspx)都可以。"></script>這樣是可以從別的網站裡面讀取出資料的。
關鍵是看你靈不靈活,會不會用了。
 
ajax要跨域的話,可以用伺服器去別的網站取內容,如asp.net的:

 

 代碼如下 複製代碼
public string GetUrlData(string url)
{
System.Net.HttpWebRequest webRequest = (System.Net.HttpWebRequest)System.Net.WebRequest.Create(url);
System.Net.WebResponse webResponse = webRequest.GetResponse();
System.IO.Stream iStream = webResponse.GetResponseStream();
System.IO.StreamReader sr = new System.IO.StreamReader(iStream, System.Text.Encoding.Default);
string str = sr.ReadToEnd();
sr.Close();
iStream.Close();
webResponse.Close();
return str;
}

這個方法已經寫好了,你只要傳入網站的url地址,就可以得到你要的ajax傳回值。
這樣就將別的網站的ajax請求,寫到了自已的伺服器裡,然後你再用ajax去請求自已寫好的那個
aspx地址就可以了。
 
如果是java,也是同樣的道理,如:

 代碼如下 複製代碼

URL url = new URL("http://www.111cn.net/");
FilterInputStream f=(FilterInputStream)url.openStream();

另一種辦法利用jsonp

這個大家可以查一下,這裡直接貼執行個體
html代碼

 代碼如下 複製代碼

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>
 <script src="jquery-1.8.3.min.js"></script>
   <script type="text/javascript"> 
     jQuery(document).ready(function(){  
        $.ajax({ 
             type: "GET", 
             async: false, 
             //url: "http://test/jsonp.php", 
             url:"http://local.ok.com/1.php", 
             dataType: "jsonp", 
             jsonp: "callback",//傳遞給請求處理常式或頁面的,用以獲得jsonp回呼函數名的參數名(一般預設為:callback) 
             jsonpCallback:"bbb",//自訂的jsonp回呼函數名稱,預設為jQuery自動產生的隨機函數名,也可以寫"?",jQuery會自動為你處理資料 
             success: function(json){ 
                 alert('您查詢到航班資訊:票價: ' + json.price + ' 元,餘票: ' + json.tickets + ' 張。回呼函數名為: '+json.func); 
             }, 
             error: function(){ 
                 alert("fail"); 
             } 
         }); 
     }); 
     </script> 

 </body>
</html>

a/1.php代碼

 代碼如下 複製代碼

<?php
$callback = isset($_GET["callback"]) ? $_GET["callback"] : 'flightHandler'; 
$a = array(   
    'code'=>'CA1998',   
    'price'=>'6000',   
    'tickets'=>20,   
    'func'=>$callback,   
);   
$result = json_encode($a);   
echo "{$callback}($result)";   
exit; 
?>

樣你直接雙擊運行html或在其他網域名稱主機下運行可以實現通訊

第二種方式,就是php等的服務端指令碼,頭資訊加入

 代碼如下 複製代碼


header('Access-Control-Allow-Origin: *');

這樣,其指令碼的傳回值就可以在任何域下使用了,ajax保持原來的用法即可。

後部份來自:張存超部落格 521php.com 前部份自己整理。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.