專業施工團隊
專營室內裝潢、辦公室裝潢、店面裝潢
油漆快清辦公桌吧
辦公室細菌量比廁所高400倍!

首頁  •  j2h 論壇 • 程式設計討論     • 

[JQuery] 抓取跨網域外的資料(cross-domain) 運用JSON

房東:凱哥
發表時間:2012-02-01
[檢舉]


最近在測如何用jQuery讀取其它網頁的資料顯示,在網路上找到一篇簡單利用jQuery取得yahoo RSS新聞的範例,在本機可以執行,但一上server後就出現了沒有使用權限的問題JSONP


先前大概瞭解Javascript因為安全性問題,所以無法進行cross-domain的讀取,所謂cross-domain就是跨網域讀資料簡單來說就是a.com的網頁程式要去取b.com網頁資料,不過在現在web 2.0的時代,常會有需要進行跨網域的讀取,所以一樣大致上網整理了一下,目前有的作法如下:


 


jQuery的文件有提到,從1.2版本開始支援使用 jQuery.getJSON(url,[data],[callback])

來進行跨網域讀取資料,原文如下:


As of jQuery 1.2, you can load JSON data located on another domain if you

specify a JSONP

callback, which can be done like so: "myurl?callback=?". jQuery automatically

replaces the ? with the correct method name to call, calling your specified

callback.


如果要懂JSONP是什麼,小弟先前有篇文章就有提到,在此不多說啦,JSONP其實就是運用json資料格式,及回呼程式(callback=?)的方式達到可以取得到其它網域的資料並且執行後續callback的function,現在目前很多open API 例如yahoo,google, flickr 等都有支援callback的方式。


不過一般要使用JSONP,就是要你Client及Server之間的偶合度要高,除了其它有提供支援的網站可以使用外,所以適用度是有點限制的,不過還是要介紹一下,如何運作,在國王的新衣: JSONP 這篇網誌有提供取得flickr的圖片,小弟稍做修改成jQuery的寫法:


Client端:


$(function() {

   $(\'#button1\').click(function(){

  var strURL=\'http://api.flickr.com/services/feeds/photos_public.gne?tags=羅平,油菜花,sunset&tagmode=all&format=json&jsoncallback=doPhoto\';

  $.ajax({

     type:\'GET\',

     dataType:\'jsonp\',

     url:strURL,

   error: function(xmlHttpRequest,error) {

     alert(\'Ajax request ERROR\');

   }

  })

   })

});

function doPhoto(result) { 

  var div = document.getElementById("flickr"); 

  for(var i=0; i < result.items.length; i++) { 

   var img = document.createElement("img"); 

   img.setAttribute("src",result.items[i].media.m); 

   img.setAttribute("alt",result.items[i].title); 

   var a = document.createElement("a"); 

   a.setAttribute("href",result.items[i].link); 

   a.setAttribute("target","_blank"); 

   a.appendChild(img); 

   div.appendChild(a); 

  } 


 


<input name="button1″ id="button1″ type="button" value="test" />

<div id="flickr"></div>



 


Server端:


doPhoto({ 

"title": "每個人的相片 已標籤 羅平, 油菜花 和 sunset", 

"link": "http://www.flickr.com/photos/"

"description": "", 

"modified": "2007-04-22T14:19:09Z", 

"generator": "http://www.flickr.com/"

"items": [

{

"title": "羅平金雞嶺夕陽", 

"link": "http://www.flickr.com/photos/38362352@N00/468370409/"

"media": {"m":"http://farm1.static.flickr.com/211/468370409_319f383a24_m.jpg"}, 

"date_taken": "2007-04-22T22:19:09-08:00", 

"description": "...", 

"published": "2007-04-22T14:19:09Z", 

"author": "[email protected] (Nature RGB)", 

"author_id": "38362352@N00", 

"tags": "sunset yunnan 油菜花 羅平" 

}

]

}) 

跨域代理(Cross Domain

Proxy)


主要原理就是用php或者其他語言寫一個代理請求的轉發過程。客戶端請求自己的服務器,服務器把請求轉發到目標地址並且得到回應,服務器再

把結果返回給客戶端。這個過程,對於開發者來說還是不錯的選擇,因為你可以在服務器上對回應的結果做自己的處理,可以決定需不需把結果要返回給客戶端。 不過還是一樣,需要有伺服端的配合,不過至少不用限制說一定要被請求端回傳json格式的資料才行,而這個proxy寫起來不然但小心有心人士利用,所以還是要判斷一下是不是由你認定的客戶端下的請求或是限定只proxy哪些網址。


當Server端回傳json格式的資料時,會依callback傳的doPhoto回傳,剛好client我們有個doPhoto function去執行接收到json的資料,大致就是這樣,而http://a.webvm.net/也有一個很簡單的範例,是呼叫另一個domain的json格式的 hello world 。


 


而參考範例,以參考 Javascript 抓取跨網域外的資料  Tsung\'s Blog 的文章,但也是調整一下來看:


Client端:


$(function() {

  $(\'#button1\').click(function(){

  $.ajax({

    type:\'Post\',

    dataType:\'html\',

    data: {

    strURL:\'http://tw.yahoo.com/\'

    },

    url: "proxy.jsp",

  error: function(xmlHttpRequest,error) {

    alert(\'Ajax request ERROR\');

  },     

     success:function(html){

       $("#flickr").html(html);

     }

  })

  })

});

 


<input name="button1″ id="button1″ type="button" value="test" />

<div id="flickr"></div>



 


Server端:


<?php

if (isset($_POST[\'url\']) && !empty($_POST[\'url\']))

{

    // 記得檢查此 URL 是不是你發出的 request

   echo

file_get_contents($_POST[\'url\']);

}

?>

 


 


http://herolin.twbbs.org/entry/jsonp-cross-domain-jQuery-proxy-iframe/





  • 贊助網站       

    廣利不動產-新板特區指名度最高、值得您信賴的好房仲
    您的托付,廣利用心為您服務
    廣利不動產-板橋在地生根最實在--新板特區指名度最高、值得您信賴的好房仲
    完整房訊,房屋、店面熱門精選物件,廣利不動產 優質仲介,房屋租賃、買賣資訊透明,交易真安心!

  • 1 樓住戶:小白
    發表時間:2012-02-02
    [檢舉]

    $('#infoForm').submit(function() {

    var postTo = 'http://yourdomain.com/test.php';

    $.post(postTo,({first_name: $('[name=first_name]').val(), last_name: $('[name=last_name]').val(), email: $('[name=email]').val()}),
    function(data) {
    alert(data);
    if(data != "") {
    // do something
    } else {
    // couldn't connect
    }
    },'json');
    return false;
    });

    http://zacvineyard.com/blog/2011/06/19/post-data-to-a-remote-server-cross-domain-with-jquery-in-phonegap/



     共 1 人回應  選擇頁數 【第1 頁】 

    姓名:
    佈告內容: