日期:2014-05-16 浏览次数:20374 次
我在论坛上找了很多动态加载js的方法答案,效果不是很理想,后来在sina里看到了答案。
缘由是这样的:
我现在需要动态取天气预报,sina里有查询的api
url是:http://php.weather.sina.com.cn/iframe/index/w_cl.php?code=js&day=0&city=上海
该url返回的一个js方法
内容是:
(function(){var w=[];w['上海']=[{s1:'雷阵雨',s2:'雷阵雨',f1:'leizhenyu',f2:'leizhenyu',t1:'35',t2:'27',p1:'3-4',p2:'3-4',d1:'西南风',d2:'东风'}];var add={now:'2011-07-04 15:17:20',time:'1309763840',update:'北京时间07月04日08:00更新',error:'0',total:'1'};window.SWther={w:w,add:add};})();//0
?
我程序需要调用这个接口,并解析其中的数据显示在页面上,我先通过程序读取该url,并把返回的js原样不变动态输出
程序接口叫:sinaweather.action?city=上海
此时我页面需要使用jquery的方式动态调用我的action并把查询回来的结果显示在我的页面上
这需要使用到动态加载js,因为我的页面每输入一个城市,都要动态调用sinaweather.action?city=输入城市名 来方法返回对应城市的js代码,我把论坛上动态加载js的方式都使用了,但是就是不能取得sina返回的js代码中定义的参数SWther,再次点击则可以,原因分析是因为js是异步加载的,我点击查询的上海可能还没完成加载完成,这时候调用sina返回的js是有问题的。在sina里看到了答案:
?
?
function fetch_js(url,dispose){ var Snode = document.createElement("script"); Snode.setAttribute("type", "text/javascript"); if(url.indexOf("?") != -1){ url += "&random=" + (new Date()).getTime(); }else{ url += "?random=" + (new Date()).getTime(); }; Snode[Snode.onreadystatechange === null ? "onreadystatechange" : "onload"] = function(){ if (this.onreadystatechange){ if (this.readyState != "loaded" && this.readyState != "complete") {return false;} }; if(dispose){dispose()};//完成js加载后,这里调用显示查询结果显示在页面上 this[this.onreadystatechange ? "onreadystatechange" : "onload"] = null; } Snode.setAttribute("src", url); document.getElementsByTagName("head")[0].appendChild(Snode); }
?
function show(){ for(i in SWther.w){ var s1= SWther.w[i][0].s1; var h_t1= SWther.w[i][0].t1; var l_t2= SWther.w[i][0].t2; var d1 = SWther.w[i][0].d1; var p1 = SWther.w[i][0].p1; var s = "天气情况:"+s1+",最高气温:"+h_t1+",最低气温:"+l_t2+","+d1+" "+p1+"级"; $("#weather").html(s); } }
?
?
function go(){ var city = $("#city").val(); alert(city); var url = encodeURI("./sinaWeather.action?city="+city+"&r="+Math.random()); fetch_js(url,show); }
?
输入城市名:<input type="text" id="city" name="city" value="上海"/> <input type="button" name="c_l" onclick="go()" value="查询"> <div id="weather"></div>
?