Ajax动态加载JavaScript文件

      开发应用程序时，经常需要实现模块的按需加载：当用户点击该模块或使用模块功能前才进行加载。采用模块按需加载可以大幅度节省系统资源，对于富客户端尤甚。在用启用该模块功能时，通过Ajax请求相应的JavaScript文件，然后执行该文件进行模块的加载。这里要使用JavaScript的全局函数eval，下面对其进行介绍

eval( code )

参数

code: 字符串，含有要计算的JavaScript表达式或要执行的语句

返回值

计算code得到的值，如果存在的话

异常

SyntaxError: 说明code中没有合法的JavaScript表达式或语句

      EvalError：说明非法调用eval()

      其他异常：如果传给eval()的JavaScript代码抛出了一个异常，eval()将把这个异常传递给调用者

描述

      eval()是全局方法，他将执行一个包含JavaScript代码的字符串。如果code含有一个表达式，eval()将计算这个表达式，并返回它的值。如果code含有一个或多个JavaScript语句，eval()将执行这些语句，如果最后一个语句有返回值，他还会返回这个是。如果code没有返回值eval()返回undefined。

 

      因此可以在eval()中实现对象的实例化或函数的声明，完成模块的动态加载。下面例子是使用Ext类库，完成在一个panel中动态加载另一个panel这样的功能。

 

index.jsp

<%-- Document : index Created on : 2010-6-17, 12:58:14 Author : Administrator --%> <%@page contentType="text/html" pageEncoding="UTF-8"%>

 

 

loaded.js 用于被动态加载的js文件，这个文件在客户端向服务器端请求完成后被运行，相应的panel对象被实例化，完成模块加载功能

App.loadedPanel=new Ext.Panel({ title: "ajax动态加载js文件", html: "使用ajax动态请求服务器端js文件并执行加载", frame: true, generate: function(){ var p=Ext.getCmp("east"); p.body.dom.innerHTML=""; p.add(this); } }); 

 

效果图：