zoukankan      html  css  js  c++  java
  • jQuery源码中的Ajax--load方法

      jQueryObject.load()方法是jQuery中最为简单和常用的方法,能载入远程HTML代码幷插入到DOM中,其结构为:

    jQueryObject.load(url [.data] [.callback])

      各参数解释如下:

    参数名称 类型 说明
    url String 请求HTML页面的URL地址
    data(可选) Object 发送至服务器的key/value数据
    callback(可选) Function 请求完成时的回调函数,无论请求成功或失败

     jQueryObject.load()方法的源码如下:(源码目录:jquery/src/ajax/load.js

    define( [
        "../core",
        "../core/parseHTML",
        "../ajax",
        "../traversing",
        "../manipulation",
        "../selector"
    ], function( jQuery ) {
    
    "use strict";
    
    /**
     * Load a url into a page
     */
    jQuery.fn.load = function( url, params, callback ) {
        var selector, type, response,
            self = this,
            off = url.indexOf( " " );
    
        if ( off > -1 ) {
            selector = jQuery.trim( url.slice( off ) );
            url = url.slice( 0, off );
        }
    
        // If it's a function
        if ( jQuery.isFunction( params ) ) {
    
            // We assume that it's the callback
            callback = params;
            params = undefined;
    
        // Otherwise, build a param string
        } else if ( params && typeof params === "object" ) {
            type = "POST";
        }
    
        // If we have elements to modify, make the request
        if ( self.length > 0 ) {
            jQuery.ajax( {
                url: url,
    
                // If "type" variable is undefined, then "GET" method will be used.
                // Make value of this field explicit since
                // user can override it through ajaxSetup method
                type: type || "GET",
                dataType: "html",
                data: params
            } ).done( function( responseText ) {
    
                // Save response for use in complete callback
                response = arguments;
    
                self.html( selector ?
    
                    // If a selector was specified, locate the right elements in a dummy div
                    // Exclude scripts to avoid IE 'Permission Denied' errors
                    jQuery( "<div>" ).append( jQuery.parseHTML( responseText ) ).find( selector ) :
    
                    // Otherwise use the full result
                    responseText );
    
            // If the request succeeds, this function gets "data", "status", "jqXHR"
            // but they are ignored because response was set above.
            // If it fails, this function gets "jqXHR", "status", "error"
            } ).always( callback && function( jqXHR, status ) {
                self.each( function() {
                    callback.apply( this, response || [ jqXHR.responseText, status, jqXHR ] );
                } );
            } );
        }
    
        return this;
    };
    
    } );

      整个源码的工作步骤如下:

    • 定义变量selector、type、response、self、off。利用indexOf()方法获取“ ”(空格)在字符串Url中首次出现的位置,并将该位置赋值给off。其中的self指代调用节点本身,即为[object HTMLDocument]。
    • 判断是否存在选择器。load方法可以通过URL参数指定选择符,语法结构为“Url selector”。trim()用于取出字符串前后的空格,slice()方法用于从已有的数组中返回选定的元素。
    • 判断参数params是否一个方法,若是则存在三个参数,且请求类型为“post”,若不是,则为两个参数,且请求类型为“get”。
    • $.ajax()方法是最底层的方法,是jQuery最底层的Ajax实现的,语法为:
    $.ajax(options);
    • 传入各个参数。
    • 调用done()注册回调函数。使用this.html将Ajax的响应结果赋给节点里。
    • 调用always()注册回调函数。其中使用了each()方法用于为每个匹配元素规定运行的函数。

      *jQuery中$.done()方法在成功时执行,异常时不会执行;$.always()方法不论成功与否都会执行。

      总的来说,jQueryObject.load()方法就是给$.ajax()进行了封装,属于第二层方法。

  • 相关阅读:
    Ajax返回DataSet时
    spring(8)
    spring(12)
    spring(6)
    spring(11)
    spring(10)
    spring(5)
    spring(3)
    spring(9)
    spring(7)
  • 原文地址:https://www.cnblogs.com/niulina/p/5686327.html
Copyright © 2011-2022 走看看