jquery ajax()動態載入指令檔的例子

來源:互聯網
上載者:User

上次說的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的,但並沒有彈出“載入失敗”。

如果真的是這樣的話,那麼指令碼載入失敗,我們就沒法控制了。我先前還想,如果指令碼載入失敗繼續載入,看來得另闢蹊徑了。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.