动态加载js的方法
研究动态加载js的方法缘由是这样的:
我现在需要动态取天气预报,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>