使用jquery动态加载javascript以减少服务器压力


Posted in Javascript onOctober 29, 2012

幸运的是,jQuery提供了一个内置的实用函数,$getScript()为我们提供了这样的方法。来实现在网页动态的功能。来看看这个函数的语法:

$.getScript(url,callback)

获取url参数所指定的脚本,使用一个GET请求到指定的服务器

Parameters
URL()获取脚本文件的URL。

callback (Function)可选函数 调用脚本文件加载后里面的函数

具体实现过程是

从资源加载文本

|如果字符串成功

返回XHR实例,用来获取脚本。

如何使用呢看下面的方法

我们创建一个new.js 脚本文件

var testVar = 'New JS loaded!'; 
alert(testVar); 
function newFun(dynParam) 
{ 
alert('You just passed '+dynParam+ ' as parameter.'); 
}

HTML代码
<html> 
<head> 
<title> $.getScript Example</title> 
<script type="text/javascript" src="../jquery.js"></script> 
<script type="text/javascript"> 
$(function() 
{ 
$('#loadButton').click(function(){ 
$.getScript('new.js',function(){ 
newFun('"Checking new script"');//这个函数是在new.js里面的,当点击click后运行这个函数 
}); 
}); 
}); 
</script> 
</head> 
<body> 
<button type="button" id="loadButton">Load</button> 
</body> 
</html>

上述代码当中我们创建一个new.js的脚本文件,在body部分当button函数触发的时候调用它,这样做的好处是减少服务器压力,是非常值得推荐的
Javascript 相关文章推荐
jQuery Validation插件remote验证方式的Bug解决
Jul 01 Javascript
排序算法的javascript实现与讲解(99js手记)
Sep 28 Javascript
谈谈jQuery Ajax用法详解
Nov 27 Javascript
探索webpack模块及webpack3新特性
Sep 18 Javascript
Angularjs实现页面模板清除的方法
Jul 20 Javascript
详解为生产环境编译Angular2应用的方法
Dec 10 Javascript
Vue框架TypeScript装饰器使用指南小结
Feb 18 Javascript
详解JS浏览器事件循环机制
Mar 27 Javascript
js针对图片加载失败的处理方法分析
Aug 24 Javascript
layer.open弹层查看缩略图的原图,自适应大小的实例
Sep 05 Javascript
javascript json对象小技巧之键名作为变量用法分析
Nov 11 Javascript
Vue 技巧之控制父类的 slot
Feb 24 Javascript
不使用XMLHttpRequest实现异步加载 Iframe和script
Oct 29 #Javascript
js制作的鼠标悬浮时产生的下拉框效果
Oct 27 #Javascript
改进版通过Json对象实现深复制的方法
Oct 24 #Javascript
分享8款优秀的 jQuery 加载动画和进度条插件
Oct 24 #Javascript
jquery 实现checkbox全选,反选,全不选等功能代码(奇数)
Oct 24 #Javascript
JavaScript window.document的属性、方法和事件小结
Oct 24 #Javascript
javaScript 删除字符串空格多种方法小结
Oct 24 #Javascript
You might like
PHP数组的交集array_intersect(),array_intersect_assoc(),array_inter_key()函数的小问题
2011/05/29 PHP
php将url地址转化为完整的a标签链接代码(php为url地址添加a标签)
2014/01/17 PHP
php微信公众号开发之二级菜单
2018/10/20 PHP
js CSS操作方法集合
2008/10/31 Javascript
javascript 全等号运算符使用说明
2010/05/31 Javascript
jQuery数据显示插件整合实现代码
2011/10/24 Javascript
jquery中ready()函数执行的时机和window的load事件比较
2015/06/22 Javascript
jQuery.prop() 使用详解
2015/07/19 Javascript
js实现旋转木马效果
2017/03/17 Javascript
动态加载权限管理模块中的Vue组件
2018/01/16 Javascript
详解webpack4升级指南以及从webpack3.x迁移
2018/06/12 Javascript
JavaScript事件冒泡与事件捕获实例分析
2018/08/01 Javascript
浅谈Vue.js 中的 v-on 事件指令的使用
2018/11/25 Javascript
如何基于原生javaScript生成带图片的二维码
2019/11/21 Javascript
vscode中Vue别名路径提示的实现
2020/07/31 Javascript
原生JS实现记忆翻牌游戏
2020/07/31 Javascript
[02:43]2014DOTA2国际邀请赛 官方Alliance战队纪录片
2014/07/14 DOTA
[37:35]DOTA2上海特级锦标赛A组资格赛#1 Secret VS MVP.Phx第二局
2016/02/25 DOTA
Python断言assert的用法代码解析
2018/02/03 Python
Python3爬虫学习之将爬取的信息保存到本地的方法详解
2018/12/12 Python
OpenCV-Python 摄像头实时检测人脸代码实例
2019/04/30 Python
Python使用Pandas库常见操作详解
2020/01/16 Python
Python调用shell命令常用方法(4种)
2020/05/11 Python
matplotlib相关系统目录获取方式小结
2021/02/03 Python
流行文化收藏品:Sideshow(DC漫画,星球大战,漫威)
2019/03/17 全球购物
网络编程中设计并发服务器,使用多进程与多线程,请问有什么区别?
2016/03/27 面试题
办公室助理岗位职责
2013/12/25 职场文书
物业公司采购员岗位职责
2013/12/31 职场文书
美国探亲签证邀请信
2014/02/05 职场文书
对祖国的寄语大全
2014/04/11 职场文书
药剂专业毕业生求职信
2014/06/24 职场文书
祖国在我心中演讲稿450字
2014/09/05 职场文书
工伤劳动仲裁代理词
2015/05/25 职场文书
《乌鸦喝水》教学反思
2016/02/19 职场文书
MySQL update set 和 and的区别
2021/05/08 MySQL
Vue2.0搭建脚手架
2022/03/13 Vue.js