• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • jQuery.getScript()

    使用HTTP请求的GET方式从服务器加载JavaScript文件,然后执行它。

    jQuery.getScript(url[,success])
    • url类型: String。一个包含发送请求的URL字符串。
    • success类型: Function(String script,String textStatus,jqXHR jqXHR)。当请求成功后执行的回调函数。

    这是一个Ajax函数的缩写,这相当于:

    $.ajax({
      url: url,
      dataType: "script",
      success: success
    });
    

    这个脚本在全局环境中执行,所以指向其他变量和运行jQuery函数。被加载的脚本同样作用于当前页面:

    Success Callback(成功回调)

    一旦脚本已经被加载,将触发回调但不一定执行。

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

    通过引用这个文件名,脚本被包含进来并执行:

    $.getScript("ajax/test.js", function(data, textStatus, jqxhr) {
       console.log(data); //data returned
       console.log(textStatus); //success
       console.log(jqxhr.status); //200
       console.log('Load was performed.');
    });
    

    Handling Errors(错误处理)

    从jQuery 1.5开始,你可以用.fail()来处理错误:

    $.getScript("ajax/test.js")
    .done(function(script, textStatus) {
      console.log( textStatus );
    })
    .fail(function(jqxhr, settings, exception) {
      $( "div.log" ).text( "Triggered ajaxError handler." );
    });
    

    jQuery1.5之前,不得不使用全局的.ajaxError()回调事件来处理$.getScript()错误:

    $( "div.log" ).ajaxError(function(e, jqxhr, settings, exception) {
      if (settings.dataType=='script') {
        $(this).text( "Triggered ajaxError handler." );
      }
    });
    

    Caching Responses(缓存响应)

    默认情况下,$.getScript() cache选项被设置为false。这将在请求的URL的查询字符串中追加一个时间戳参数,以确保每次浏览器下载的脚本被重新请求。您可以全局的使用$.ajaxSetup()设置cache(缓存)属性覆盖该功能:

    $.ajaxSetup({
      cache: true
    });
    

    另外,你可以使用更灵活的$.ajax()方法定义一个新的方法

    例子

    定义了一个$.cachedScript()方法可以获取缓存的脚本:

    jQuery.cachedScript = function(url, options) {
     
      // allow user to set any option except for dataType, cache, and url
      options = $.extend(options || {}, {
        dataType: "script",
        cache: true,
        url: url
      });
     
      // Use $.ajax() since it is more flexible than $.getScript
      // Return the jqXHR object so we can chain callbacks
      return jQuery.ajax(options);
    };
     
    // Usage
    $.cachedScript("ajax/test.js").done(function(script, textStatus) {
      console.log( textStatus );
    });
    

    我们动态加载新的官方jQuery 颜色动画插件,一旦该插件加载完成就会触发一些颜色动画。

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>jQuery.getScript demo</title>
      <style>
      .block {
         background-color: blue;
         width: 150px;
         height: 70px;
         margin: 10px;
      }
      </style>
      <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.js"></script>
    </head>
    <body>
     
    <button id="go">&raquo; Run</button>
    <div class="block"></div>
     
    <script>
    var url = "https://code.jquery.com/color/jquery.color.js";
    $.getScript( url, function() {
      $( "#go" ).click(function() {
        $( ".block" )
          .animate({
            backgroundColor: "rgb(255, 180, 180)"
          }, 1000 )
          .delay( 500 )
          .animate({
            backgroundColor: "olive"
          }, 1000 )
          .delay( 500 )
          .animate({
            backgroundColor: "#00f"
          }, 1000 );
      });
    });
    </script>
     
    </body>
    </html>
    

    上篇:jQuery.getJSON()

    下篇:jQuery.post()