Ajax动态加载JavaScript文件 .

最新推荐文章于 2024-04-22 12:12:03 发布
最新推荐文章于 2024-04-22 12:12:03 发布
阅读量4.1k 收藏 1
点赞数
分类专栏： ExtJs 文章标签： javascript ajax function html layout 服务器
 

Ajax动态加载JavaScript文件

分类： Ext Ajax 2010-06-17 21:30 594人阅读 评论(0) 收藏 举报

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

view plain copy to clipboard print ?
  1. 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

view plain copy to clipboard print ?
  1. <%--   
  2.     Document   : index  
  3.     Created on : 2010-6-17, 12:58:14  
  4.     Author     : Administrator  
  5. --%>  
  6. <%@page contentType="text/html" pageEncoding="UTF-8"%>  
  7. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
  8.     "http://www.w3.org/TR/html4/loose.dtd">  
  9. <html>  
  10.     <head>  
  11.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  12.         <title>JSP Page</title>  
  13.         <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" mce_href="ext/resources/css/ext-all.css" />  
  14.         <mce:script type="text/javascript" src="ext/ext-base-debug.js" mce_src="ext/ext-base-debug.js"></mce:script>  
  15.         <mce:script type="text/javascript" src="ext/ext-all-debug.js" mce_src="ext/ext-all-debug.js"></mce:script>  
  16.     </head>  
  17.     <body>  
  18.         <div id="layout"></div>  
  19.         <mce:script type="text/javascript"><!--  
  20.             Ext.ns("App");  
  21.             App.panel=new Ext.Panel({  
  22.                 title: "ajax动态加载js文件",  
  23.                 id: "view",  
  24.                 width: 400,  
  25.                 height: 200,  
  26.                 renderTo: "layout",  
  27.                 layout: "border",  
  28.                 items: [{  
  29.                         id: "east",  
  30.                         region: "center",  
  31.                         title: "center",  
  32.                         html: "中心面板",  
  33.                         bbar: [{  
  34.                                 xtype: "button",  
  35.                                 text: "click",  
  36.                                 handler: function(){  
  37.                                     Ext.Ajax.request({  
  38.                                         url: 'loaded.js',//请求js文件  
  39.                                         //response服务器端相应  
  40.                                         success: function(response, opts) {  
  41.                                             var o = eval(response.responseText);//动态执行js文件，o为返回值  
  42.                                             if(o){  
  43.                                                 App.loadedPanel.generate();//loaded.js文件中的代码已经执行，创建了App.loadedPanel对象  
  44.                                                 Ext.getCmp("view").doLayout();//让父容器重新布局  
  45.                                             }  
  46.                                         },  
  47.                                         failure: function() {  
  48.                                             Ext.Msg.alert("错误","加载模块失败！");  
  49.                                         },  
  50.                                         scope: this  
  51.                                     });  
  52.                                 }  
  53.                             }]  
  54.                     }]  
  55.             });  
  56.           
  57. // --></mce:script>  
  58.     </body>  
  59. </html>  
 

 

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

view plain copy to clipboard print ?
  1. App.loadedPanel=new Ext.Panel({  
  2.     title: "ajax动态加载js文件",  
  3.     html: "使用ajax动态请求服务器端js文件并执行加载",  
  4.     frame: true,  
  5.     generate: function(){  
  6.         var p=Ext.getCmp("east");  
  7.         p.body.dom.innerHTML="";  
  8.         p.add(this);  
  9.     }  
  10. });  
 

 

效果图：

 

eilent
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用ajax动态加载需要的js文件
10-30
给大家介绍了用ajax动态加载需要的js文件的相关知识，感兴趣的朋友跟随脚本之家小编一起学习吧
Ajax动态加载JavaScript文件
架构师专栏
06-17 4656
      开发应用程序时，经常需要实现模块的按需加载：当用户点击该模块或使用模块功能前才进行加载。采用模块按需加载可以大幅度节省系统资源，对于富客户端尤甚。在用启用该模块功能时，通过Ajax请求相应的JavaScript文件，然后执行该文件进行模块的加载。这里要使用JavaScript的全局函数eval，下面对其进行介绍eval( code )参数 code: 字符串，含有要计算的JavaScript表达式或要执行的语句返回值 计算code得到的值，如果存在的话异常SyntaxError: 说
在 JS 中如何使用 Ajax 来进行请求
最新发布
peixiancccc的博客
04-22 2279
javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。
ajax动态加载js文件,如何按需动态加载js文件
weixin_36423062的博客
08-06 665
JavaScript无非就是script标签引入页面，但当项目越来越大的时候，单页面引入N个js显然不行，合并为单个文件减少了请求数，但请求的文件体积却很大。这时候最好的做法就是按需引入，动态引入组件js和样式，文件load完成后调用callback，运行js。代码还是很简便的。1. 判断文件load完成。加载状态ie为onreadystatechange，其他为onload、onerrorif(...
用ajax动态加载需要的js文件【原创】
weixin_30237281的博客
06-04 492
　　习惯了用java，在java中，需要某个类直接import就可以了，所以做javascript的时候也想实现这个效果。　　前段时间，用了下dojo，里面的dojo.require的功能很不错，一看代码，晕了，一大堆东西，唉～还是自己写个简单点的，dojo.require可以引入包，我就只做一个导入js文件的。　　开始用的document.write，执行顺序不对了，这是在后面进行导入，而我们总...
动态加载JS脚本的4种方法
睿康
12-12 403
要实现动态加载JS脚本有4种方法： 1、直接document.write document.write(""); 2、动态改变已有script的src属性 s1.src="test.js" 3、动态创建script元素 var oHead = document.getElements...
基于Ajax的动态JavaScript文件加载模型.pdf
01-02
基于Ajax的动态JavaScript文件加载模型 Ajax异步请求 JavaScript文件加载模型是基于B/S模式的系统中的一个重要组件。在浏览器端，JavaScript文件是浏览器端程序的主要组成部分。传统的方式是将所有可能用到的...
动态加载JavaScript文件的两种方法
11-24
需要注意的是，动态加载的JavaScript文件的执行顺序依赖于它们被添加到DOM中的顺序，因此在多个脚本的加载和执行管理上需要特别注意。另外，如果JavaScript文件较大或者网络状况不佳，可能会延长页面加载时间，影响...
ajax动态查询下拉提示代码.zip
10-05
可能包括HTML文件用于构建页面结构，JavaScript文件用于处理Ajax请求和动态显示数据，以及CSS文件用于美化样式。用户下载这个压缩包后，可以参考或直接应用这些代码到自己的项目中，实现类似的功能。 【标签】 1. *...
ajax跨域上传文件.zip
04-28
Ajax（Asynchronous JavaScript and XML）技术允许我们在不刷新整个页面的情况下，通过JavaScript异步地与服务器交换数据并更新部分网页内容。在现代Web开发中，Ajax广泛应用于创建动态和交互性强的用户体验。然而，...
js 动态加载ajax,ajax 动态加载 js文件
weixin_39969298的博客
08-06 308
ajax 动态加载 js文件 内容精选换一换将获取到的SDK压缩包解压后放到系统规划目录${path}，一般为xx/libs。CloudApp类通过CloudApp.min.js文件输出为UMD格式，可支持多种方式加载。如：AMD方式：define(["${path}/CloudApp.min"], function(CloudApp){ // todo });script标签方式在模型加载前，需...
ajax动态加载js
06-13 1299
<br /> <!-- /* Font Definitions */ @font-face {font-family:宋体; panose-1:2 1 6 0 3 1 1 1 1 1; mso-font-alt:SimSun; mso-font-charset:134; mso-generic-font-family:auto; mso-font-pitch:variable; mso-font-signature:3 135135232 16 0 262145 0;}
ajax 加载 js
weixin_30556161的博客
07-25 88
事件背景有一个公用页面需要在多个页面调用，其中涉及到部分js已经写在了公用页面中，通过ajax加载该页面后无法执行其中的js。解决思路1. 采用附加一个iframe的方法去执行js，为我等代码洁癖者所不齿。2. 使用document.write输出代码，我等简洁主义者所不愿。3. 最简单的方法是把js放到需要调用的父页面，那想这样的公用页面，每个地方调用都要写入一次，代码冗余。4. eval是...
ajax加载js文件
蓝色的博客
07-11 167
[code="js"]//加载外部js文件 var scriptCache = []; function script(url,formula){ if(inArray(scriptCache,url)==false){ scriptCache.push(url); $.getScript(上下文+"/js/fillform/formfill/"+url); } eva...
【AJAX】使用getScript()方法异步加载并执行js文件
O(∩_∩)O
04-07 5888
功能：使用getScript()方法异步请求并执行服务器中的JavaScript格式的文件，它的调用格式如下所示： jQuery.getScript(url,[callback])或$.getScript(url,[callback]) 参数url为服务器请求地址，可选项callback参数为请求成功后执行的回调函数。 有了前面getJSON()方法，这个方法很好理解了。
jquery.ajax加载js文件,JQuery动态加载Javascript文件
weixin_31036839的博客
08-05 711
largeQ我意识到我在这里有点晚了，(5年左右)，但我认为有一个比接受的更好的答案如下：$("#addComment").click(function(){if(typeofTinyMCE==="undefined"){$.ajax({url:"tinymce.js",dataType:"script",...
JavaScript文件的同步和异步加载
weixin_34071713的博客
08-19 417
对于JS文件的引用，尽管当前有不少框架和工具（比如webpack，commonjs，requiresjs等）都做了很好的处理。但是抛开这些框架，了解原生的加载方式还是不无裨益。本文简述一些js文件的同步和异步加载方式。 同步加载 可在html文件里以<script>标签插入，这是初学时最基本的方式。 准备两个js文件如下：ca...
ajax 加载js文件,使用jQuery动态加载js脚本文件的方法
weixin_42498987的博客
08-06 604
它们很强大，但有时候也会得不偿失。如果你使用的是jQuery，它里面有一个内置的方法可以用来加载单个js文件。当你需要延迟加载一些js插件或其它类型的文件时，可以使用这个方法。下面就介绍一下如何使用它！一、jQuery getScript()方法加载JavaScriptjQuery内置了一个方法可以加载单一的js文件；当加载完成后你可以在回调函数里执行后续操作。最基本的使用jQuery.getSc...
执行ajax加载的js,执行通过ajax加载的内联js
weixin_33400538的博客
08-06 115
我已经解决了我的问题，但在我自己的，所以我只是想分享我的解决方案，也许有人有一个更优雅的方式来解决它。也许它只是很好，因为它是。所以即时通过jquery.ajax()加载一些HTML和dataType是HTML。 有时视频被放在里面，对我来说，嵌入这个最优雅的方式，是嵌入代码的jwplayers JS，看起来像这样：jwplayer("mediaplayer").setup({flashplaye...
ajax+vue+json数据 动态添加数据到json文件中
06-10
要想实现动态添加数据到JSON文件中，需要以下几个步骤： 1. 前端使用Vue和Ajax技术，将需要添加的数据通过POST请求发送到后端。例如： ```javascript axios.post('/addData', { name: '张三', age: 20, gender: '男' }).then(response => { console.log(response.data); }).catch(error => { console.log(error); }); ``` 2. 后端使用Node.js和Express框架接收前端发送的POST请求，并将数据添加到JSON文件中。例如： ```javascript const fs = require('fs'); const express = require('express'); const bodyParser = require('body-parser'); const app = express(); app.use(bodyParser.json()); app.post('/addData', (req, res) => { const newData = req.body; const dataFile = './data.json'; let data = []; fs.readFile(dataFile, 'utf8', (err, content) => { if (err) { console.error(err); res.status(500).send('服务器错误：读取数据文件失败！'); } else { try { data = JSON.parse(content); } catch (e) { console.error(e); res.status(500).send('服务器错误：解析数据文件失败！'); } data.push(newData); fs.writeFile(dataFile, JSON.stringify(data), err => { if (err) { console.error(err); res.status(500).send('服务器错误：写入数据文件失败！'); } else { res.send('添加数据成功！'); } }); } }); }); app.listen(3000, () => { console.log('服务器已启动，监听端口3000...'); }); ``` 在上述代码中，我们首先使用`body-parser`中间件来解析请求体中的JSON数据，然后读取JSON文件中的数据，将新数据添加到数据数组中，最后将修改后的数据数组写回JSON文件中。 注意，以上代码只是一个简单的示例，实际场景中需要添加更多的错误处理和安全措施，例如检查请求体中的数据是否合法、限制JSON文件的大小、防止文件读写冲突等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值