跨域访问的一个例子----天气预报应用插件

这是一个查询天气预报的应用。调用了新浪接口来查询天气。

跨域访问方式：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+'&deg;');
    $('#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+'&deg;');
    $('#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+'&deg;');
    $('#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>

 

Demo 下载