A-A+

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

2016年01月11日 web前端设计 暂无评论 阅读 7 views 次

动态加载js本站介绍过不少的这实例了,但各有各的特点了,下面为各位介绍一个基于jquery ajax()动态加载脚本文件的例子,希望对各位朋友能够带来帮助。

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

  1. <!DOCTYPE html>  
  2. <meta charset="utf-8">  
  3. <title>动态加载js</title>  
  4. <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.8/jquery.min.js"></script>  
  5. <script language="javascript">  
  6. function yundanran_getScript(src,version,success,error)  
  7. {  
  8.  var url=(version=='' ¦¦ !version)?  
  9.  src:  
  10.  (  
  11.   /\?.*/.test(src)?  
  12.   src+'&v='+version.replace(/\s/g,''):  
  13.   src+'?v='+version.replace(/\s/g,'')  
  14.  );  
  15.  $.ajax(  
  16.  {  
  17.   url:url,  
  18.   cache:true,  
  19.   type:'get',  
  20.   dataType:'script',  
  21.   success:function()  
  22.   {  
  23.    if(success && $.isFunction(success))  
  24.    success();  
  25.   },  
  26.   error:function()  
  27.   {  
  28.    if(error && $.isFunction(error))  
  29.    error();  
  30.   }  
  31.  });  
  32. }  
  33. yundanran_getScript('http://code.jquery.com/ui/1.8.24/jquery-ui.min.js',new Date().getTime().toString());  
  34. </script>  

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

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

正确资源的情况:

  1. <!DOCTYPE html>  
  2. <meta charset="utf-8">  
  3. <title>动态加载js</title>  
  4. <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.8/jquery.min.js"></script>  
  5. <script language="javascript">  
  6. function yundanran_getScript(src,version,success,error)  
  7. {  
  8.  var url=(version=='' ¦¦ !version)?  
  9.  src:  
  10.  (  
  11.   /\?.*/.test(src)?  
  12.   src+'&v='+version.replace(/\s/g,''):  
  13.   src+'?v='+version.replace(/\s/g,'')  
  14.  );  
  15.  $.ajax(  
  16.  {  
  17.   url:url,  
  18.   cache:true,  
  19.   type:'get',  
  20.   dataType:'script',  
  21.   success:function()  
  22.   {  
  23.    if(success && $.isFunction(success))  
  24.    success();  
  25.   },  
  26.   error:function()  
  27.   {  
  28.    if(error && $.isFunction(error))  
  29.    error();  
  30.   }  
  31.  });  
  32. }  
  33. yundanran_getScript('http://code.jquery.com/ui/1.8.24/jquery-ui.min.js','2012',function()  
  34. {  
  35.  alert('加载成功');  
  36. },  
  37. function()  
  38. {  
  39.  alert('加载失败');  
  40. });  
  41. </script>  

会弹出“加载成功”!

如果资源是无效的:

  1. <!DOCTYPE html>  
  2. <meta charset="utf-8">  
  3. <title>动态加载js</title>  
  4. <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.8/jquery.min.js"></script>  
  5. <script language="javascript">  
  6. function yundanran_getScript(src,version,success,error)  
  7. {  
  8.  var url=(version=='' ¦¦ !version)?  
  9.  src:  
  10.  (  
  11.   /\?.*/.test(src)?  
  12.   src+'&v='+version.replace(/\s/g,''):  
  13.   src+'?v='+version.replace(/\s/g,'')  
  14.  );  
  15.  $.ajax(  
  16.  {  
  17.   url:url,  
  18.   cache:true,  
  19.   type:'get',  
  20.   dataType:'script',  
  21.   success:function()  
  22.   {  
  23.    if(success && $.isFunction(success))  
  24.    success();  
  25.   },  
  26.   error:function()  
  27.   {  
  28.    if(error && $.isFunction(error))  
  29.    error();  
  30.   }  
  31.  });  
  32. }  
  33. yundanran_getScript('http://code.jquery.com/ui/1.8.24/jquery-ui.min2.js','2012',function()  
  34. {  
  35.  alert('加载成功');  
  36. },  
  37. function()  
  38. {  
  39.  alert('加载失败');  
  40. });  
  41. </script>  

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

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

标签:

给我留言