用ajax动态加载需要的js文件

习惯了用java,在java中,需要某个类直接import就可以了,所以做javascript的时候也想实现这个效果。

  前段时间,用了下dojo,里面的dojo.require的功能很不错,一看代码,晕了,一大堆东西,唉~还是自己写个简单点的,dojo.require可以引入包,我就只做一个导入js文件的。

  开始用的document.write,执行顺序不对了,这是在后面进行导入,而我们总是在前面执行中就需要导入的js,这样,执行中就会报“某某未定义”,就是顺序问题了。

  接着,我就想用ajax同步(注意:不是异步)调用远程js文件,这里有个问题,就是我们要js文件的时候,不是用绝对路径,就是相对路径,用相对路径的话,以哪个为参照呢?可以用调用js的那个文件为参照,也可以以实现调用功能的js文件为参照,这里,我选择写个 js,实现按需调用其它js,参照也选它。经过一番修改,路径问题解决。但是,读取过来的数据中文会有乱码问题,好在我们做东西都用UTF-8(因为要国际化),所以这里避过了。

  远程js内容取到后,就要执行,用eval执行后,发现还是取不到远程js里定义的内容,怪了,猛alert一番后,发现执行eval的上下文范围有问题,我们要的是js在window对象中执行,嗯?window有什么方法没?一找,哈,有个window.execScript方法,ok,试一下,成功,yeah~后来发现在firefox下,不能用window.execScript,找了一下,用window.eval,用法和ie下的window.execScript类似。但是只用window.eval的时候,在ie下有时候会出问题,所以就两种一起用了。

  下面是实现远程js安调用的那个js:env.js,我已经习惯用oo写js了

复制代码 代码如下:

 /** 

 * @author zxub 2006-06-01 

 * 状态信息显示类,用var Status=new function()定义,可以静态引用其中的方法 

 * 一般情况下为function Status(),这样不能静态引用其中的方法,需要通过对象来引用 

 */ 

var Status=new function() 



    this.statusDiv=null;

/** 

     * 初始化状态显示层 

     */ 

    this.init=function() 

    { 

        if (this.statusDiv!=null) 

        { 

            return; 

        } 

        var body = document.getElementsByTagName("body")[0]; 

        var div = document.createElement("div"); 

        div.style.position = "absolute"; 

        div.style.top = "50%"; 

        div.style.left = "50%"; 

        div.style.width = "280px"; 

        div.style.margin = "-50px 0 0 -100px";         

        div.style.padding = "15px"; 

        div.style.backgroundColor = "#353555"; 

        div.style.border = "1px solid #CFCFFF"; 

        div.style.color = "#CFCFFF"; 

        div.style.fontSize = "14px"; 

        div.style.textAlign = "center"; 

        div.id = "status"; 

        body.appendChild(div); 

        div.style.display="none"; 

        this.statusDiv=document.getElementById("status"); 

    }

/** 

     * 设置状态信息 

     * @param _message:要显示的信息 

     */     

    this.showInfo=function(_message) 

    {       

        if (this.statusDiv==null) 

        { 

            this.init(); 

        }   

        this.setStatusShow(true); 

        this.statusDiv.innerHTML = _message;         

    }

/** 

     * 设置状态层是否显示 

     * @param _show:boolean值,true为显示,false为不显示 

     */  

    this.setStatusShow=function(_show) 

    {       

        if (this.statusDiv==null) 

        { 

            this.init(); 

        }  

        if (_show) 

        { 

            this.statusDiv.style.display=""; 

        } 

        else 

        { 

            this.statusDiv.innerHTML=""; 

            this.statusDiv.style.display="none"; 

        } 

    } 

}

/** 

 * @author zxub 

 * 用于存放通道名称及通信对象的类,这样可以通过不同通道名称来区分不同的通信对象 

 */ 

function HttpRequestObject() 



    this.chunnel=null; 

    this.instance=null; 

}

/** 

 * @author zxub 

 * 通信处理类,可以静态引用其中的方法 

 */ 

var Request=new function() 



    this.showStatus=true;

//通信类的缓存 

    this.httpRequestCache=new Array();

/** 

     * 创建新的通信对象 

     * @return 一个新的通信对象 

     */ 

    this.createInstance=function() 

    { 

        var instance=null; 

        if (window.XMLHttpRequest) 

        { 

            //mozilla 

            instance=new XMLHttpRequest(); 

            //有些版本的Mozilla浏览器处理服务器返回的未包含XML mime-type头部信息的内容时会出错。因此,要确保返回的内容包含text/xml信息 

            if (instance.overrideMimeType) 

            { 

                instance.overrideMimeType="text/xml"; 

            } 

        } 

        else if (window.ActiveXObject) 

        { 

            //IE 

            var MSXML = ['MSXML2.XMLHTTP.5.0', 'Microsoft.XMLHTTP', 'MSXML2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP']; 

            for(var i = 0; i < MSXML.length; i++) 

            { 

                try 

                { 

                    instance = new ActiveXObject(MSXML[i]); 

                    break; 

                } 

                catch(e) 

                {                     

                } 

            } 

        } 

        return instance; 

    }

/** 

     * 获取一个通信对象 

     * 若没指定通道名称,则默认通道名为"default" 

     * 若缓存中不存在需要的通信类,则创建一个,同时放入通信类缓存中 

     * @param _chunnel:通道名称,若不存在此参数,则默认为"default" 

     * @return 一个通信对象,其存放于通信类缓存中 

     */ 

    this.getInstance=function(_chunnel) 

    { 

        var instance=null; 

        var object=null; 

        if (_chunnel==undefined)//没指定通道名称 

        { 

            _chunnel="default"; 

        } 

        var getOne=false; 

        for(var i=0; i<this.httpRequestCache; i++) 

        { 

            object=HttpRequestObject(this.httpRequestCache[i]); 

            if (object.chunnel==_chunnel) 

            { 

                if (object.instance.readyState==0 || object.instance.readyState==4) 

                { 

                    instance=object.instance; 

                } 

                getOne=true; 

                break;                     

            } 

        } 

        if (!getOne) //对象不在缓存中,则创建 

        { 

            object=new HttpRequestObject(); 

            object.chunnel=_chunnel; 

            object.instance=this.createInstance(); 

            this.httpRequestCache.push(object); 

            instance=object.instance; 

        }          

        return instance; 

    }

/** 

     * 客户端向服务端发送请求 

     * @param _url:请求目的 

     * @param _data:要发送的数据 

     * @param _processRequest:用于处理返回结果的函数,其定义可以在别的地方,需要有一个参数,即要处理的通信对象 

     * @param _chunnel:通道名称,默认为"default" 

     * @param _asynchronous:是否异步处理,默认为true,即异步处理 

     */ 

    this.send=function(_url,_data,_processRequest,_chunnel,_asynchronous) 

    { 

        if (_url.length==0 || _url.indexOf("?")==0) 

        { 

            Status.showInfo("由于目的为空,请求失败,请检查!"); 

            window.setTimeout("Status.setStatusShow(false)",3000); 

            return; 

        } 

        if (this.showStatus) 

        { 

            Status.showInfo("请求处理中,请稍候");   

        } 

        if (_chunnel==undefined || _chunnel=="") 

        { 

            _chunnel="default"; 

        } 

        if (_asynchronous==undefined) 

        { 

            _asynchronous=true; 

        } 

        var instance=this.getInstance(_chunnel); 

        if (instance==null) 

        { 

            Status.showInfo("浏览器不支持ajax,请检查!") 

            window.setTimeout("Status.setStatusShow(false)",3000); 

            return; 

        }   

        if (_asynchronous==true && typeof(_processRequest)=="function") 

        { 

            instance.onreadystatechange=function() 

            { 

                if (instance.readyState == 4) // 判断对象状态 

                { 

                    if (instance.status == 200) // 信息已经成功返回,开始处理信息 

                    {                  

                        _processRequest(instance); 

                        Status.setStatusShow(false); 

                        Request.showStatus=true;                    

                    } 

                    else 

                    { 

                        Status.showInfo("您所请求的页面有异常,请检查!"); 

                        window.setTimeout("Status.setStatusShow(false)",3000); 

                    } 

                } 

            } 

        } 

        //_url加一个时刻改变的参数,防止由于被浏览器缓存后同样的请求不向服务器发送请求 

        if (_url.indexOf("?")!=-1) 

        { 

            _url+="&requestTime="+(new Date()).getTime(); 

        } 

        else 

        { 

            _url+="?requestTime="+(new Date()).getTime(); 

        } 

        if (_data.length==0) 

        { 

            instance.open("GET",_url,_asynchronous);           

            instance.send(null);             

        } 

        else 

        { 

            instance.open("POST",_url,_asynchronous); 

            instance.setRequestHeader("Content-Length",_data.length); 

            instance.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 

            instance.send(_data); 

        } 

        if (_asynchronous==false && typeof(_processRequest)=="function") 

        { 

            _processRequest(instance); 

            if (Request.showStatus) 

            { 

                Status.setStatusShow(false); 

            } 

            else 

            { 

                Request.showStatus=true; 

            } 

        } 

    }

/** 

     * 间隔一段时间持续发送请求,只用于异步处理,只用于GET方式 

     * @param _interval:请求间隔,以毫秒计 

     * @param _url:请求地址 

     * @param _processRequest:用于处理返回结果的函数,其定义可以在别的地方,需要有一个参数,即要处理的通信对象 

     * @param _chunnel:通道名称,默认为"defaultInterval",非必添 

     */ 

    this.intervalSend=function(_interval,_url,_processRequest,_chunnel) 

    { 

        var action=function() 

        { 

            if (_chunnel==undefined) 

            { 

                _chunnel="defaultInterval"; 

            } 

            var instance=Request.getInstance(_chunnel); 

            if (instance==null) 

            { 

                Status.showInfo("浏览器不支持ajax,请检查!") 

                window.setTimeout("Status.setStatusShow(false)",3000); 

                return; 

            } 

            if (typeof(_processRequest)=="function") 

            { 

                instance.onreadystatechange=function() 

                { 

                    if (instance.readyState == 4) // 判断对象状态 

                    { 

                        if (instance.status == 200) // 信息已经成功返回,开始处理信息 

                        { 

                            _processRequest(instance); 

                        } 

                        else 

                        { 

                            Status.showInfo("您所请求的页面有异常,请检查!"); 

                            window.setTimeout("Status.setStatusShow(false)",3000); 

                        } 

                    } 

                } 

            } 

            //_url加一个时刻改变的参数,防止由于被浏览器缓存后同样的请求不向服务器发送请求 

            if (_url.indexOf("?")!=-1) 

            { 

                _url+="&requestTime="+(new Date()).getTime(); 

            } 

            else 

            { 

                _url+="?requestTime="+(new Date()).getTime(); 

            } 

            instance.open("GET",_url,true); 

            instance.send(null); 

        } 

        window.setInterval(action,_interval);         

    } 

}

var Env=new function() 

{    

    this.funcList=new Array();

this.envPath=null;

this.getPath=function() 

    { 

        this.envPath=document.location.pathname; 

        this.envPath=this.envPath.substring(0,this.envPath.lastIndexOf("/")+1);         

        var _scripts=document.getElementsByTagName("script"); 

        var _envPath=null; 

        var _scriptSrc=null; 

        for (var i=0; i<_scripts.length; i++) 

        { 

            _scriptSrc=_scripts[i].getAttribute("src"); 

            if (_scriptSrc && _scriptSrc.indexOf("env.js")!=-1) 

            { 

                break; 

            } 

        } 

        if (_scriptSrc!=null) 

        { 

            if (_scriptSrc.charAt(0)=='/') 

            { 

                this.envPath=_scriptSrc.substr(0,_scriptSrc.length-6); 

            } 

            else 

            { 

                this.envPath=this.envPath+_scriptSrc.substr(0,_scriptSrc.length-6); 

            } 

        }         

    } 

    this.getPath();

/** 

     * 按需获取需要的js文件 

     * @param _jsName:js文件路径,若为相对路径,则是对应env.js的相对路径,也可以用绝对路径 

     * @param _language:对返回函数进行处理的语言,默认为JScript,可不填 

     */ 

    this.require=function(_jsName,_language) 

    { 

        var _absJsName=null; 

       &

时间: 2024-10-02 07:26:08

用ajax动态加载需要的js文件的相关文章

用ajax动态加载需要的js文件_AJAX相关

习惯了用java,在java中,需要某个类直接import就可以了,所以做javascript的时候也想实现这个效果. 前段时间,用了下dojo,里面的dojo.require的功能很不错,一看代码,晕了,一大堆东西,唉-还是自己写个简单点的,dojo.require可以引入包,我就只做一个导入js文件的. 开始用的document.write,执行顺序不对了,这是在后面进行导入,而我们总是在前面执行中就需要导入的js,这样,执行中就会报"某某未定义",就是顺序问题了. 接着,我就想用

如何实现JavaScript动态加载CSS和JS文件_javascript技巧

项目中需要用到动态加载CSS 文件,整理了一下,顺便融合了动态加载JS 的功能写成了一个对象,先上代码: var dynamicLoading = { css: function(path){ if(!path || path.length === 0){ throw new Error('argument "path" is required !'); } var head = document.getElementsByTagName('head')[0]; var link =

ajax 动态加载数据提示没有更多内容加载了

问题描述 ajax 动态加载数据提示没有更多内容加载了 怎么判断所有的数据已经加载完毕,提示没有更多内容加载了? if(data=='') 这个判断有误,求高人指点 解决方案 如果是分页你自己服务器端计算好总页数赋值给js变量,然后js设置一个当前页变量,每次加载后和总量对比就好了,干么多请求一次服务器由服务器返回空内容来控制是否加载完呢.. 解决方案二: 不知道你想问什么,data是什么?你的返回值怎么判断没有内容了.你的判断有误怎么得出的结论?有误的时候data什么值 解决方案三: data

在jsp上添加treeview,用ajax动态加载节点

问题描述 在jsp上添加treeview,用ajax动态加载节点,哪位高手帮一下,急用? 解决方案 解决方案二:树的JSP<HTML><HEAD><TITLE>主菜单</TITLE><linkrel="stylesheet"type="text/css"href="../../css/style.css"/><METAhttp-equiv=Content-Typecontent=&

优化-jsp页面加载多个 js 文件,导致界面加载效率慢,第一次加载的时候,界面无法完全展示

问题描述 jsp页面加载多个 js 文件,导致界面加载效率慢,第一次加载的时候,界面无法完全展示 界面中引入了三个公共js文件,其中文件的大小分别为120.290.480KB,第一次 打开界面的时候界面无法完全显示,想问下怎么能进行效率优化,提升加载效率,谢谢各位大神啦,急!!! 解决方案 将js放到最后面,这样不影响页面的展示,还有就是压缩下你的js文件,做个cdn什么的 解决方案二: js合并.压缩,网上这种工具多得是.不影响页面的内容展示的那些js往页面后面放( 解决方案三: 最后通过Pa

jquery ajax()动态加载脚本文件的例子

上次说的jquery动态加载脚本,使用的是getScript(您可以点击相关文章查看),缺点和优点都说了.封装的函数是不自带缓存功能的,默认每次加载都刷新本地脚本.这样的一个特点对于网速不是很快的网站来说,那就是一个漫长的等待,虽然页面已经加载完毕了,但脚本还在路上,访客会以为脚本加载失败,就会反复的刷新页面,结果每次加载脚本都是重新获取的,造成资源的中断和大量的服务器请求.为了解决这个问题,我自己写了个方法,哈哈,当然是根据getScript把ajax方法打包到一个函数里便于多次复用. <!D

利用Dojo和JSON建立无限级AJAX动态加载的功能模块树_dojo

 看了"使用hibernate实现树形结构无限级分类"这篇文章后,我也想将自己在所有开发的项目中使用的功能模块树的实现方法以及完整DEMO(含源码)贴出来和大家分享.其实在我的博客里是老早贴出来的,由于时间关系没好好整理.        功能模块树是几乎在每个项目里都要用到的东西,利用Dojo的好处就是可以实现树的子节点的动态加载,这在树节点很多的情况下是很有用的.         下载附件二dojotree.rar,解压后将dist\dojotree.war部署到应用服务器即可浏览D

在vb中动态加载水晶报表rpt文件的方法

动态|加载|水晶报表 这个问题在很多论坛里边都有问到.但是一直没找到满意的答案.下边写出一个解决办法 Dim sql As String Dim rstLiuShui As New ADODB.Recordset Dim Rpt As New CRAXDDRT.Report Dim PrintApp As New CRAXDDRT.Application If Option2.Value = True Then sql = "select * from n_ihbill where datedi

php ci框架中加载css和js文件失败的解决方法

 在将html页面整合到ci框架里面的时候,加载css和js失败,下面对这个问题进行分析及解决 在将html页面整合到ci框架里面的时候,加载css和js失败,弄了半天发现ci框架是入口的框架,对框架中文件的所有请求都需要经过index.php处理完成,当加载外部的css和js文件的时候要使用base_url()函数处理外部的链接.    比如:    在config配置文件中的base_url为:" localhost:8080/项目名称/ "    在控制器中访问applicati