What if you write a callback when you write an AJAX asynchronous request? What's the callback? Which callback is triggered when the error occurs?
Common to have:
$.post (URL, {}, function (res) {
}, ' json ');
But this in the wrong time without any treatment ...
Usually I write this:
$.ajax ({
URL: ',
Data: {},
DataType: ' JSON ',
Type: ' POST ',
Success:function (res) {},
Error:function () {},
Complete:function () {}
});
You may be saying that the code may be a little more, in fact, I feel as long as the amateur clear, code more points is acceptable, of course, you can use the great promise processing callback ... In jquery, she converted to deferred.
Must be considered.
Caching problem, this usually happens in IE low version, such as IE7, general use time prefix solution
Loading state, be sure to let the user know that the current process is in the process of requesting
Error in return value, usually with friendly hints
Server error, including 404,500 status
Network timeout, there is usually a time limit
User active interrupt request, such as: Abort
Like My Code snippet:
Judge the logic, if it's successful, ask.
Give the loading state
Send the request and store the current request to facilitate the user to actively clear
XHR = $.ajax ({
URL: ',
Data: {},
DataType: ' JSON ',
Type: ' POST ',
Success:function (res) {
if (res && res.errcode = = 0) {
Success
} else {
The return value is not ideal
}
},
Error:function (XHR, status) {
Status => Timeout,parsererror,error,abort
if (xhr && status!== ' abort ') {
If the user is not actively interrupted
}
},
Complete:function () {
Close loading
}
});
Note: The complete callback is executed regardless of success or failure and is performed after error or success
Type of CALLBACK Trigger
Error
Error callback, equivalent to fail
When the backend error, or the server status code is not 200, will trigger the error, the second parameter is error
The error is triggered when the return value is parsed, and the second parameter is ParserError
When the response timeout triggers the error, the second parameter is timeout
The error is triggered when the user actively interrupts the request, and the second parameter is abort
The above is tested in jquery and Zepto.
Success
A successful callback is equivalent to doing
In jquery, when the return state is 200 and the content is parsed correctly, it triggers
In Zepto when the return value is 200 and the content is not empty, this is a pit ...
Complete
Complete callback, equivalent to always
Regardless of success or failure, the event always executes, in order after success and error
jquery version
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>jquery version </title>
<body>
<br>
<button data-url= "/api/testajax/success" > Success </button>
<button data-url= "/api/testajax/404" >404</button>
<button data-url= "/api/testajax/500" >500</button>
<button data-url= "/api/testajax/parseerror" > Parse JSON error </button>
<button data-url= "/api/testajax/empty" > Return value NULL </button>
<button data-url= "/api/testajax/timeout" > Timeout </button>
<script type= "Text/javascript" src= "/static/jquery.js" ></script>
<script type= "Text/javascript" >
function Send (URL) {
$.ajax ({
Url:url,
Data: {
R:new Date (). GetTime ()
},
DataType: ' JSON ',
Error:function (a,b) {
Console.log (a,b, ' Error ');
},
Success:function (a) {
Console.log (A, ' success ');
},
Complete:function (a) {
Console.log (A, ' complete ');
},
timeout:3000
});
}
$ (' button '). On (' click ', function () {
Send ($ (this). Data (' URL '));
});
</script>
</body>
Zepto version
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>zepto version </title>
<body>
<br>
<button data-url= "/api/testajax/success" > Success </button>
<button data-url= "/api/testajax/404" >404</button>
<button data-url= "/api/testajax/500" >500</button>
<button data-url= "/api/testajax/parseerror" > Parse JSON error </button>
<button data-url= "/api/testajax/empty" > Return value NULL </button>
<button data-url= "/api/testajax/timeout" > Timeout </button>
<script type= "Text/javascript" src= "/static/zepto.js" ></script>
<script type= "Text/javascript" >
function Send (URL) {
$.ajax ({
Url:url,
Data: {
R:new Date (). GetTime ()
},
DataType: ' JSON ',
Error:function (a,b) {
Console.log (a,b, ' Error ');
},
Success:function (a) {
Console.log (A, ' success ');
},
Complete:function (a) {
Console.log (A, ' complete ');
},
timeout:3000
});
}
$ (' button '). On (' click ', function () {
Send ($ (this). Data (' URL '));
});
</script>
</body>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
