首先根據後面給出的網址對目標網站做一些設定,讓它充許跨域訪問:mozilla,w3c,msdn 。
新設計出來的跨域方案是極其優秀的,IE8是XDomainRequest,Firefox3.5、Safari4、Chrome 2等是沿用原來的XMLHttpRequest對象,它們都擁有一些相同的方法處理各種回調:
- onload :請求成功時調用。
- onerror:請求失敗時調用。
- onabort:請求中斷時調用(使用abort方法)
因此這跨域請求是非常簡單了!
if("1"[0]){//只允許IE8與較新的標準瀏覽器進入下面邏輯 var xhr=window.XDomainRequest?new XDomainRequest:new XMLHttpRequest; try{ xhr.onload=function(){ //由於返回的JSON過長,我們在示範時把它截短一些 alert([xhr.responseText.slice(0,1000),xhr]); }; xhr.open("GET","http://ss-o.net/json/wedataAutoPagerize.json"); xhr.send(); }catch(e){ alert("請求失敗: "+e.message); } }
<br /><!doctype html><br /><html><br /> <head><br /> <title>XMLHttpRequest Level 2 by 司徒正美</title><br /> <meta charset="utf-8"/><br /> <meta content="IE=8" http-equiv="X-UA-Compatible"/><br /> <meta name="keywords" content="XMLHttpRequest Level 2 by 司徒正美" /><br /> <meta name="description" content="XMLHttpRequest Level 2 by 司徒正美" /><br /> <script type="text/javascript" charset="utf-8"></p><p> if("1"[0]){//只允許IE8與較新的標準瀏覽器進入下面邏輯<br /> var xhr=window.XDomainRequest?new XDomainRequest:new XMLHttpRequest;<br /> try{<br /> xhr.onload=function(){<br /> //由於返回的JSON過長,我們在示範時把它截短一些<br /> alert([xhr.responseText.slice(0,1000),xhr]);<br /> };<br /> xhr.open("GET","http://ss-o.net/json/wedataAutoPagerize.json");<br /> xhr.send();<br /> }catch(e){<br /> alert("請求失敗: "+e.message);<br /> }<br /> }</p><p> </script><br /> </head><br /> <body><br /> <h1>XMLHttpRequest Level 2 by 司徒正美</h1><br /> <p><a href="http://ss-o.net/json/wedataAutoPagerize.json">http://ss-o.net/json/wedataAutoPagerize.json</a></p><br /> <p><a href="http://ss-o.net/json/wedataLDRize.json">http://ss-o.net/json/wedataLDRize.json</a></p><br /> </body><br /></html><br />
運行代碼