jQuery Ajax Event Handlers

jQuery Global Ajax Event Handlers


Ajax short for asynchronous javascript and XML,is a set of web development techniques which update a web page without reloading the page. It's very important for web2.0.
jQuery makes the use of Ajax more convenient. It provides  dozen methods to do the job.

methoddescription
.ajaxComplete()Register a handler to be called when Ajax requests complete.
.ajaxError()Register a handler to be called when Ajax requests complete with an error.
.ajaxSend()Attach a function to be executed before an Ajax request is sent.
.ajaxStart()Register a handler to be called when the first Ajax request begins.
.ajaxStop()Register a handler to be called when all Ajax requests have completed.
.ajaxSuccess()Attach a function to be executed whenever an Ajax request completes successfully.

They all belong to the global event triggered by the request.
ajaxSuccess() corresponds to a local method: Success()
ajaxComplete() corresponds to a local method:Complete ()
ajaxError() corresponds to a local method:error()

Examples:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.min.js"></script>
    <script src="main.js"></script>
</head>
<body>
    <form>
        Username<input type="text" name="username" id="user" />
        Email<input type="text" name="email" id="email"/>
        Password<input type="password" name="password" id="password"/>
        <input type="button" value="submit" />
    </form>
    <span class="loading">loading</span>
    <div id="box"></div>
</body>
</html>
$(function(){
    $('form input[type=button]').click(function(){
        $.ajax({
            type:'POST',
            url:'register.php',
            data:$('form').serialize(),
            success:function(response,status,xhr){
                $('#box').html(response);
            },
            error:function(){},
            complete:function(){}
        });
    });
 
    $(document).ajaxSend(function () {
        alert('execute before an Ajax request is sent.');
    }).ajaxComplete(function () {
        alert('Ajax requests complete.');
    }).ajaxSuccess(function () {
        alert('an Ajax request completes successfully');
    }).ajaxError(function () {
        alert('Ajax requests complete with an error');
    });
});
date2019-04-03 00:25:21 From:www.jquerypluginhub.com Author:JPH
Related Tags:
Comments

Leave a Reply

Your email address will not be published. Required fields are marked *