jQuery学习笔记：jQuery Ajax 04：$.getScript()方法

jQuery Ajax：$.getScript()方法

 

主要参考：

《锋利的jQuery》单东林、张晓菲、魏然

www.3cschool.com.cn之《jQuery 参考手册 - Ajax》

 

搜集整理：sagahu@163.com

 

动态载入Javascript文件

 

有时候，在页面初次加载时就取得所需要的全部Javascript文件时完全没有必要的。那么可以在需要那个Javascript文件时，动态地创建<script>标签，代码如下：

 

$(document.createElement("script")).attr("src", "test.js").appendTo("head");

 

或者：

 

$("<script type='text/javascript' src='test.js' />").appendTo("head");

 

其实不必象上面那样麻烦，因为jQuery提供了$.getScript()方法来直接加载js文件，与加载一个HTML片断一样简单方便，并且不需要对Javascript文件进行处理，而会自动自行。下面这段代码动态加载 “test.js”文件，并且自动执行它。

 

$(function(){

       $.getScript("test.js", function(){

             alert("Script loaded and executed.");

       });

});

 

定义

 

getScript() 方法通过 HTTP GET 请求载入并执行 JavaScript 文件。

 

语法

 

$.getScript(url, callback)

 

参数	说明
url	必需。规定要将请求发送到哪个 URL。
data	可选。规定连同请求发送到服务器的数据。
callback的语法： function(response, status)	可选。规定请求成功后执行的回调函数。 额外的参数：     response - 包含来自请求的结果数据     status - 包含请求的状态（"success", "notmodified", "error", "timeout" 或 "parsererror"）
返回值	XMLHttpRequest

 

详细说明

 

该函数是简写的 Ajax 函数，等价于：

 

$.ajax({

  url: url,

  dataType: "script",

  success: success

});

 

这里的回调函数会传入返回的 JavaScript 文件。这通常不怎么有用，因为那时脚本已经运行了。

 

载入的脚本在全局环境中执行，因此能够引用其他变量，并使用 jQuery 函数。

 

比如加载一个 test.js 文件，里边包含下面这段代码：

 

$(".result").html("<p>Lorem ipsum dolor sit amet.</p>");

 

通过引用该文件名，就可以载入并运行这段脚本：

 

$.getScript("ajax/test.js", function() {

  alert("Load was performed.");

});

 

注释：jQuery 1.2 版本之前，getScript 只能调用同域 JS 文件。1.2中，您可以跨域调用 JavaScript 文件。注意：Safari 2 或更早的版本不能在全局作用域中同步执行脚本。如果通过 getScript 加入脚本，请加入延时函数。

 

示例：载入 jQuery 官方颜色动画插件，成功后绑定颜色变化动画

 

HTML 代码：

 

<button id="go">Run</button>

<div class="block"></div>

 

jQuery 代码：

 

jQuery.getScript("http://dev.jquery.com/view/trunk/plugins/color/jquery.color.js",

       function(){

             $("#go").click(function(){

                     $(".block").animate( { backgroundColor: 'pink' }, 1000)

                     .animate( { backgroundColor: 'blue' }, 1000);

              }

);

});