动态加载js的方法-CSDN博客

研究动态加载js的方法缘由是这样的：

我现在需要动态取天气预报，sina里有查询的api

url是：http://php.weather.sina.com.cn/iframe/index/w_cl.php?code=js&day=0&city=上海

该url返回的一个js方法

我程序需要调用这个接口，并解析其中的数据显示在页面上，我先通过程序读取该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" οnclick="go()" value="查询">

<div id="weather"></div>

转载于:https://www.cnblogs.com/ctou45/archive/2011/07/04/2097498.html