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

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

<!DOCTYPE html>
<meta charset="utf-8">
<title>动态加载js</title>
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.8/jquery.min.js"></script>
<script language="javascript">
function yundanran_getScript(src,version,success,error)
{
 var url=(version=='' ¦¦ !version)?
 src:
 (
  /\?.*/.test(src)?
  src+'&v='+version.replace(/\s/g,''):
  src+'?v='+version.replace(/\s/g,'')
 );
 $.ajax(
 {
  url:url,
  cache:true,
  type:'get',
  dataType:'script',
  success:function()
  {
   if(success && $.isFunction(success))
   success();
  },
  error:function()
  {
   if(error && $.isFunction(error))
   error();
  }
 });
}
yundanran_getScript('http://code.jquery.com/ui/1.8.24/jquery-ui.min.js',new Date().getTime().toString());
</script>

结果显而易见,客户端没有缓存脚本。而如果把version参数缓存固定值,那么就会在第一次加载之后缓存在客户端。

写到这里,不知道您有没有想到,那就是脚本加载失败怎么办?您可能注意到ajax的error函数了,我们试试看:

正确资源的情况:

<!DOCTYPE html>
<meta charset="utf-8">
<title>动态加载js</title>
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.8/jquery.min.js"></script>
<script language="javascript">
function yundanran_getScript(src,version,success,error)
{
 var url=(version=='' ¦¦ !version)?
 src:
 (
  /\?.*/.test(src)?
  src+'&v='+version.replace(/\s/g,''):
  src+'?v='+version.replace(/\s/g,'')
 );
 $.ajax(
 {
  url:url,
  cache:true,
  type:'get',
  dataType:'script',
  success:function()
  {
   if(success && $.isFunction(success))
   success();
  },
  error:function()
  {
   if(error && $.isFunction(error))
   error();
  }
 });
}
yundanran_getScript('http://code.jquery.com/ui/1.8.24/jquery-ui.min.js','2012',function()
{
 alert('加载成功');
},
function()
{
 alert('加载失败');
});
</script>

会弹出“加载成功”!

如果资源是无效的:

<!DOCTYPE html>
<meta charset="utf-8">
<title>动态加载js</title>
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.8/jquery.min.js"></script>
<script language="javascript">
function yundanran_getScript(src,version,success,error)
{
 var url=(version=='' ¦¦ !version)?
 src:
 (
  /\?.*/.test(src)?
  src+'&v='+version.replace(/\s/g,''):
  src+'?v='+version.replace(/\s/g,'')
 );
 $.ajax(
 {
  url:url,
  cache:true,
  type:'get',
  dataType:'script',
  success:function()
  {
   if(success && $.isFunction(success))
   success();
  },
  error:function()
  {
   if(error && $.isFunction(error))
   error();
  }
 });
}
yundanran_getScript('http://code.jquery.com/ui/1.8.24/jquery-ui.min2.js','2012',function()
{
 alert('加载成功');
},
function()
{
 alert('加载失败');
});
</script>

显然url是404的,但并没有弹出“加载失败”。

如果真的是这样的话,那么脚本加载失败,我们就没法控制了。我先前还想,如果脚本加载失败继续加载,看来得另辟蹊径了。

时间: 2016-04-18

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

jquery实现动态加载js文件的例子

一.jQuery getScript()方法加载javascript jQuery内置了一个方法可以加载单一的js文件:当加载完成后你可以在回调函数里执行后续操作.最基本的使用jQuery.getScript的方法是这样: jQuery.getScript("/path/to/myscript.js", function(data, status, jqxhr) {/* 做一些加载完成后需要执行的事情 */}); 这个getScript方法返回一个jqxhr,你可以像下面这样用它: j

jquery与js动态加载js文件的例子

如果用jquery append直接加载script标签的话,会报错的.除了document.write外,还有没有其他的比较好的动态加载js文件的方法. 1,jquery方法 $.getScript("./test.js");   //加载js文件    $.getScript("./test.js",function(){   //加载test.js,成功后,并执行回调函数      console.log("加载js文件");  }); 

详谈LABJS按需动态加载js文件_javascript技巧

LABjs 是一个很小的 JavaScript 工具,用来根据需要加载 JavaScript 文件,通过使用该工具可以提升页面的性能,避免加载不需用到的 JavaScript 文件,可以实现动态并行加载脚本文件,以及管理加载脚本文件的执行顺序. 简单示例 $LAB .script("script1.js", "script2.js", "script3.js") .block(function(){ // wait for all to load

LABJS按需动态加载js文件

  为了提高页面的打开和加载速度,我们经常把JS文件放在页面的尾部,但是有些JS必须放在页面前面,这样就会增加页面的加载时间;于是出现了按需动态加载的概念,这个概念就是当页面需要用到这个JS文件或者CSS渲染文件的时候,在去请求这些文件,这样就节省了页面的加载时间 LABjs 是一个很小的 JavaScript 工具,用来根据需要加载 JavaScript 文件,通过使用该工具可以提升页面的性能,避免加载不需用到的 JavaScript 文件,可以实现动态并行加载脚本文件,以及管理加载脚本文件的

超级强大JS动态加载脚本同时使用加载js文件函数调用

    首先我们需要一个被加载的js文件,我在一个固定文件夹下创建了一个package.js,打开后在里面写一个方法functionOne,很简单,代码如下: function functionOne(){     alert("成功加载"); }         后面的html文件都创建在同一个目录下. 方法一:直接document.write 在同一个文件夹下面创建一个function1.html,代码如下: <html> <head>     <ti

jquery及js实现动态加载js文件的方法_javascript技巧

本文实例讲述了jquery及js实现动态加载js文件的方法.分享给大家供大家参考,具体如下: 问题: 如果用jquery append直接加载script标签的话,会报错的.除了document.write外,还有没有其他的比较好的动态加载js文件的方法. 解决方法: 1.jquery方法 $.getScript("./test.js"); //加载js文件 $.getScript("./test.js",function(){ //加载test.js,成功后,并执

使用jquery动态加载Js文件和Css文件_jquery

如果你有很多关联的CSS文件要一起加载,或者想动态的加载不同的CSS文件,那么下面的方法你一定对你有帮助.Jquery动态加载Js和Css扩展方法 $.extend({ includePath: '', include: function(file) { var files = typeof file == "string" ? [file]:file; for (var i = 0; i < files.length; i++) { var name = files[i].re

JS动态加载脚本并执行回调操作_javascript技巧

关于在javascript里面加载其它的js文件的问题可能很多人都遇到过,但很多朋友可能并不知道怎么判断我们要加载的js文件是否加载完成,如果没有加载完成我们就调用文件里面的函数是不会成功的.本文讲解怎么在js中加载其它js文件并在加载完成后执行回调函数.  我们可以动态的创建 <script> 元素,然后通过更改它的 src 属性来加载脚本,但是怎么知道这个脚本文件加载完成了呢,因为我们有些函数需要在脚本加载完成生效后才能开始执行. 经过对网络上资源的搜索,我发现在 IE 浏览器中可以使用

动态加载JavaScript文件的两种方法_javascript技巧

这篇文章主要为大家详细介绍了动态加载JavaScript文件的两种方法,感兴趣的小伙伴们可以参考一下 第一种便是利用ajax方式,把script文件代码从背景加载到前台,而后对加载到的内容经过eval()实施代码.第二种是,动静创建一个script标签,配置其src属性,经过把script标签插入到页面head来加载js,相当于正在head中写了一个<script src="..."></script>,只可是这个script标签是用js动静创建的 比喻说是我们