Home >Web Front-end >JS Tutorial >Detailed introduction to the use of jQuery.ajaxSend() function

Detailed introduction to the use of jQuery.ajaxSend() function

巴扎黑
巴扎黑Original
2017-07-03 10:49:571411browse

The

ajaxSend() function is used to set the callback function to be executed when the AJAX request is about to be sent.

This is a global AJAX event function, used to bind the ajaxSend event of any AJAX request Event handling function. When the AJAX request is about to be sent, the ajaxSend event will be triggered and the bound event handling function will be executed.

This function must be called on the jQuery object instance, and ajaxSend() will bind a handler function to the ajaxSend event of each matching element. When the AJAX request is about to be sent, the processing functions on all matching elements will be triggered and executed. This within the event handler will point to the current DOM element.

You can call this function multiple times on the same element to bind multiple event handlers. When the ajaxSend event is triggered, jQuery will execute the bound event processing functions in the order of binding.

Starting from jQuery 1.8, this function can only bind handlers to the ajaxSend event of the document object, and event handlers bound to other elements will not work.

If you set the option parameter global to false in jQuery.ajax() or jQuery.ajaxSetup(), you can prevent the AJAX request from triggering global AJAX events.

This function belongs to the jQuery object (instance).

Syntax

This function is new in jQuery 1.0.

jQueryObject.ajaxSend(handler)

Parameters

Parameter Description

The event handler function that needs to be executed when the handler Function type triggers this event.

The callback function handler has three parameters: one is the Event object representing the current event, the other is the jqXHR object that sends the current AJAX request, and the third is all parameter options set for this AJAX request ( Object objects including default parameter options that do not need to be specified).

The jqXHR object is an XMLHttpRequest object encapsulated by jQuery (retaining most of its properties and methods).

Return value

ajaxSend()The return value of the function is of jQuery type and returns the current jQuery object itself.

Example&Instructions

Please refer to the following HTML sample code:

21222cb62e82bb01180fda983340a480CodePlayer16b28748ea4df4d9c2150843fecfba68

< ;div id="content2">Focus on programming development technology sharing16b28748ea4df4d9c2150843fecfba68

62016ca42e031c37cc5fcfe252f5e052http://www.365mini.com16b28748ea4df4d9c2150843fecfba68

The following is the jQuery sample code related to the ajaxSend() function to demonstrate the specific usage of the ajaxSend() function:

The following code should be run based on jQuery versions prior to 1.8 (please note that through The parameters of the global event handling function set by ajaxSend() and the local event handling function set by the beforeSend option of $.ajax() are different).

//当前 jQuery版本:1.7.2 (必须是1.8之前的版本)
$("div").ajaxSend( function(event, jqXHR, options){
    alert("处理函数1: 当前元素的id为" + this.id + ",请求的url为" + options.url);
} );
$("div").ajaxSend( function(event, jqXHR, options){
    alert("处理函数2:请求方式为" + options.type);
} );
// 执行该AJAX请求,会弹出6次对话框
// 因为当前页面有3个div元素,我们为每个div元素绑定了2个事件处理函数
$.ajax( {
    url: "index.html"
} );
// 执行该AJAX请求,会弹出7次对话框
// 因为当前页面有3个div元素,我们为每个div元素绑定了2个事件处理函数
// 此外$.ajax()自己通过beforeSend选项绑定了一个局部的ajaxSend事件处理函数,它会执行一次
// 因此总共弹出7次对话框
$.ajax( {
    url: "myurl" ,
    beforeSend: function(jqXHR, options){
       alert( "即将开始发送!" );
       // return false; // 如果返回false,可以取消本次请求
    }
} );

If the current jQuery is version 1.8 and above, the above jQuery code will only pop up the dialog box once in total. Because starting from jQuery 1.8, the handler function of the ajaxSend event must be bound to the document object to take effect.

Therefore, regardless of the current jQuery version, if there are no special needs, we should bind the ajaxSend event handler to the document object.

$(document).ajaxSend( function(event, jqXHR, options){
    alert("处理函数1: 当前元素的id为" + this.id + ",请求的url为" + options.url);
} );
$(document).ajaxSend( function(event, jqXHR, options){
    alert("处理函数2:请求方式为" + options.type);
} );
// 执行该AJAX请求,会弹出2次对话框
// 因为document对象上绑定了2个事件处理函数
$.ajax( {
    url: "index.html"
} );
// 执行该AJAX请求,会弹出3次对话框
// 因为$.ajax()自己通过beforeSend选项绑定了一个局部的ajaxSend事件处理函数,它会执行一次
// 我们还通过ajaxSend()额外绑定了两个事件处理函数,会再弹出2次
$.ajax( {
    url: "myurl" ,
    // global: false , // 可以禁止触发全局的Ajax事件
    beforeSend: function(jqXHR, options){
        alert( "即将开始发送!" );
        // return false; // 如果返回false,可以取消本次请求
    }
} );

The above is the detailed content of Detailed introduction to the use of jQuery.ajaxSend() function. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn