跨域访问的一个例子----天气预报应用插件
这是一个查询天气预报的应用。调用了新浪接口来查询天气。
跨域访问方式：jquery的getScript方法加载脚本
里面使用新浪的两个接口
1.'http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js' 这个接口会返回一个对象 直接定义的全局变量
如：var remote_ip_info = {"ret":1,"start":"218.8.112.159","end":"218.8.114.14","country":"\u4e2d\u56fd","province":"\u9ed1\u9f99\u6c5f","city":"\u54c8\u5c14\u6ee8","district":"","isp":"\u8054\u901a","type":"","desc":""};
这个接口会根据IP判断访问者所在的城市然后给你返回信息 包含国家，省份，城市，IP等各种结果的一个对象
2."http://php.weather.sina.com.cn/iframe/index/w_cl.php?code=js&day=2&city="+TEMP+"&dfc=3"
上面的接口种 有个大写的TEMP变量 这里是城市的名称，中文名称 可以根据第一个接口中返回的city值直接进行字符串拼接
其中 参数day 支持0~4
下面是访问第二个接口返回的值
(function(){var w=[];var add={now:'2012-12-25 14:09:51',time:'1356415791',update:'北京时间12月25日08:00更新',error:'0',total:'0'};window.SWther={w:w,add:add};})();//0
这里 window.SWther这个对象就是需要操作的对象
window.SWther.w[city][temp].s1/t1/t2/p1/d1 注： 其中city是之前定义好的全局变量，里面放的就是之前第一个接口中返回的城市名 如： 哈尔滨
window.SWther.w[city][temp] temp 是一个变量 因为window.SWther.w[city] 是一个数组 如果你之前第二个接口写的是day=2 就是返回3天的天气 这个数组长度就是3
getImage()方法是根据当天的天气获得天气图片 具体详见代码 getImage方法
主要就是以上两个接口 其他的就是js+jquery的一些应用
MyWeather.js
var myWeather = function(){ this.getWeather=function(city,type){ $.getScript("http://php.weather.sina.com.cn/iframe/index/w_cl.php?code=js&day=2&city="+city+"&dfc=3",function(){ echo(city); }); } function getImage(s1,s2){ var style_img="http://mj.588cy.com/img/s_13.png"; if(s1.indexOf("多云")!==-1&&s2.indexOf("晴")!==-1){style_img="http://mj.588cy.com/img/s_1.png";} else if(s1.indexOf("多云")!==-1&&s2.indexOf("阴")!==-1){style_img="http://mj.588cy.com/img/s_2.png";} else if(s1.indexOf("阴")!==-1&&s2.indexOf("雨")!==-1){style_img="http://mj.588cy.com/img/s_3.png";} else if(s1.indexOf("晴")!==-1&&s2.indexOf("雨")!==-1){style_img="http://mj.588cy.com/img/s_12.png";} else if(s1.indexOf("晴")!==-1&&s2.indexOf("雾")!==-1){style_img="http://mj.588cy.com/img/s_12.png";} else { if(s1.indexOf("晴")!==-1){style_img="http://mj.588cy.com/img/s_13.png";} else if(s1.indexOf("多云")!==-1){style_img="http://mj.588cy.com/img/s_2.png";} else if(s1.indexOf("阵雨")!==-1){style_img="http://mj.588cy.com/img/s_3.png";} else if(s1.indexOf("小雨")!==-1){style_img="http://mj.588cy.com/img/s_3.png";} else if(s1.indexOf("中雨")!==-1){style_img="http://mj.588cy.com/img/s_4.png";} else if(s1.indexOf("大雨")!==-1){style_img="http://mj.588cy.com/img/s_5.png";} else if(s1.indexOf("暴雨")!==-1){style_img="http://mj.588cy.com/img/s_5.png";} else if(s1.indexOf("冰雹")!==-1){style_img="http://mj.588cy.com/img/s_6.png";} else if(s1.indexOf("雷阵雨")!==-1){style_img="http://mj.588cy.com/img/s_7.png";} else if(s1.indexOf("小雪")!==-1){style_img="http://mj.588cy.com/img/s_8.png";} else if(s1.indexOf("中雪")!==-1){style_img="http://mj.588cy.com/img/s_9.png";} else if(s1.indexOf("大雪")!==-1){style_img="http://mj.588cy.com/img/s_10.png";} else if(s1.indexOf("暴雪")!==-1){style_img="http://mj.588cy.com/img/s_10.png";} else if(s1.indexOf("扬沙")!==-1){style_img="http://mj.588cy.com/img/s_11.png";} else if(s1.indexOf("沙尘")!==-1){style_img="http://mj.588cy.com/img/s_11.png";} else if(s1.indexOf("雾")!==-1){style_img="http://mj.588cy.com/img/s_12.png";} else{style_img="http://mj.588cy.com/img/s_2.png";} } return style_img; } function echo(city){ $("#weather1").html("地区："+remote_ip_info.country+"-"+remote_ip_info.province+"-"+city+"<br/>现在时间："+window.SWther.add.now+"<br/>更新时间："+window.SWther.add.update); var t_img=getImage(window.SWther.w[city][0].s1,window.SWther.w[city][0].s2) $("#T_weather_img").html("<img src='"+t_img+"' title='"+window.SWther.w[city][0].s1+"' alt='"+window.SWther.w[city][0].s1+"' />"); $("#T_weather").html(window.SWther.w[city][0].s1); $('#T_temperature').html(window.SWther.w[city][0].t1+'~'+window.SWther.w[city][0].t2+'°'); $('#T_wind').html(window.SWther.w[city][0].p1); $('#T_direction').html(window.SWther.w[city][0].d1); var m_img=getImage(window.SWther.w[city][1].s1,window.SWther.w[city][1].s2) $("#M_weather_img").html("<img src='"+m_img+"' title='"+window.SWther.w[city][1].s1+"' alt='"+window.SWther.w[city][1].s1+"' />"); $('#M_weather').html(window.SWther.w[city][1].s1); $('#M_temperature').html(window.SWther.w[city][1].t1+'~'+window.SWther.w[city][1].t2+'°'); $('#M_wind').html(window.SWther.w[city][1].p1); $('#M_direction').html(window.SWther.w[city][1].d1); var l_img=getImage(window.SWther.w[city][2].s1,window.SWther.w[city][2].s2) $("#L_weather_img").html("<img src='"+l_img+"' title='"+window.SWther.w[city][2].s1+"' alt='"+window.SWther.w[city][2].s1+"' />"); $('#L_weather').html(window.SWther.w[city][2].s1); $('#L_temperature').html(window.SWther.w[city][2].t1+'~'+window.SWther.w[city][2].t2+'°'); $('#L_wind').html(window.SWther.w[city][2].p1);$('#L_direction').html(window.SWther.w[city][2].d1); } } function getNowWeather(){ weather_.getWeather(city); } var weather_ = new myWeather(); var city = ""; $(function(){ $.getScript('http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js',function(){ city=remote_ip_info.city; getNowWeather(); }); });
html文件
<html> <head> <script type="text/javascript" src="jquery-1.7.2.js"></script> <script type="text/javascript" src="MyWeather.js"></script> <style type="text/css"> .weather { float: left; color: #333333; padding: 10px; } .weather a { color: #333333; } .wt { line-height: 17px; font-size: 12px; float: left; padding: 3px 5px; text-align: center; } .wtimg { vertical-align: middle; padding: 0px 1px; margin: 0PX auto; } </style> </head> <body> <div id="weather1"></div> <div class="weather"> <div class="wtimg" id="T_weather_img"></div> <div class="wt">今 天<br /> <span id="T_weather"></span><br /> <span id="T_temperature"></span><br/> <span id="T_direction"></span><br/> <span id="T_wind"></span></div> </div> <div class="weather"> <div class="wtimg" id="M_weather_img"></div> <div class="wt">明 天<br /> <span id="M_weather"></span><br /> <span id="M_temperature"></span><br/> <span id="M_direction"></span><br/> <span id="M_wind"></span></div> </div> <div class="weather"> <div class="wtimg" id="L_weather_img"></div> <div class="wt">后 天<br /> <span id="L_weather"></span><br /> <span id="L_temperature"></span><br/> <span id="L_direction"></span><br/> <span id="L_wind"></span></div> </div> </body> </html>
