使用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 相关文章推荐
js中的值类型和引用类型小结 文字说明与实例
Dec 12 Javascript
jquery移动listbox的值原理及代码
May 03 Javascript
javascript自定义函数参数传递为字符串格式
Jul 29 Javascript
浅谈Unicode与JavaScript的发展史
Jan 19 Javascript
Bootstrap按钮组件详解
Apr 26 Javascript
Vuex实现计数器以及列表展示效果
Mar 10 Javascript
详解微信小程序input标签正则初体验
Aug 18 Javascript
小试SVG之新手小白入门教程
Jan 08 Javascript
Django模板继承 extend标签实例代码详解
May 16 Javascript
Vue 2.0双向绑定原理的实现方法
Oct 23 Javascript
原生JavaScript实现的无缝滚动功能详解
Jan 17 Javascript
vue点击标签切换选中及互相排斥操作
Jul 17 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 jpgraph库的配置及生成统计图表:折线图、柱状图、饼状图
2017/05/15 PHP
laravel高级的Join语法详解以及使用Join多个条件
2019/10/16 PHP
javascript操作文本框readOnly
2007/05/15 Javascript
window.open被浏览器拦截后的自定义提示效果代码
2007/11/19 Javascript
JavaScript Array Flatten 与递归使用介绍
2011/10/30 Javascript
JavaScript取得鼠标绝对位置程序代码介绍
2012/09/16 Javascript
js猜数字小游戏的简单实现代码
2013/07/02 Javascript
导航跟随滚动条置顶移动示例代码
2013/09/11 Javascript
JavaScript实现把rgb颜色转换成16进制颜色的方法
2015/06/01 Javascript
CSS中position属性之fixed实现div居中
2015/12/14 Javascript
Bootstrap多级导航栏(级联导航)的实现代码
2016/03/08 Javascript
Vue.js实现一个漂亮、灵活、可复用的提示组件示例
2017/03/17 Javascript
shiro授权的实现原理
2017/09/21 Javascript
js保留两位小数方法总结
2018/01/31 Javascript
webpack-dev-server远程访问配置方法
2018/02/22 Javascript
vue注册组件的几种方式总结
2018/03/08 Javascript
vue的过滤器filter实例详解
2018/09/17 Javascript
在Vue中使用icon 字体图标的方法
2019/06/14 Javascript
Vue常用的全选/反选的示例代码
2020/02/19 Javascript
vue中实现动态生成二维码的方法
2020/02/21 Javascript
vue+render+jsx实现可编辑动态多级表头table的实例代码
2020/04/01 Javascript
vue中后端做Excel导出功能返回数据流前端的处理操作
2020/09/08 Javascript
微信小程序中target和currentTarget的区别小结
2020/11/06 Javascript
[14:19]2018年度COSER大赛-完美盛典
2018/12/16 DOTA
python3解析库BeautifulSoup4的安装配置与基本用法
2018/06/26 Python
python实现抽奖小程序
2020/04/15 Python
Pycharm 2019 破解激活方法图文详解
2019/10/11 Python
Keras 切换后端方式(Theano和TensorFlow)
2020/06/19 Python
皇家阿尔伯特英国官方商店:Royal Albert骨瓷
2019/03/25 全球购物
手工制作的豪华英式沙发和沙发床:Willow & Hall
2019/05/03 全球购物
个人自我剖析材料
2014/09/30 职场文书
2014年大学生工作总结
2014/11/20 职场文书
优秀教师单行材料
2014/12/16 职场文书
党小组推荐意见
2015/06/02 职场文书
Go语言空白表示符_的实例用法
2021/07/04 Golang
Nginx使用Lua模块实现WAF的原理解析
2021/09/04 Servers