小虎博客

A-A+

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

2016年01月11日 编程技术 暂无评论

动态加载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的，但并没有弹出“加载失败”。

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

标签：

给我留言