Working in JavaScript if you are developing a big application, we need to make some ajax requests to the server. in single page application, we need too many ajax request and response so Requests could pass some pieces of information and header parameters to get some data from it. This is a base functionality in the client-server architecture. However, there are some cases that could be useful to do some action for each ajax request.
if you are developing single page application than for security reason, you must have to use authentication token.
if you want to redirect to 404, 500 etc page form commonplace then intercept is most useful.
We can also capture every response from the server to validate something or handle errors globally. This requirement could be met using interceptors. They give us a facility to handle ajax request before sending and after request.
To intercept you can use $.ajaxSetup function.
EX: Demo
from above demo, you can add, modify, delete any header or response data and you can control all ajax request and response.
the most important and use full parameters of $.ajaxSetup is listed below.
=>beforeSend
To intercept before sending ajax a request you can pass beforeSend callback function as a parameter in $.ajaxSetup function.
This parameter is most important when you want to add, edit, delete some header information or request parameters in all ajax request.
=>complete
To intercept after getting ajax a request you can pass complete callback function as a parameter in $.ajaxSetup function.
This parameter is most important when you want to add, edit, delete, manage some response data after all ajax request.
=>error
To intercept any error at getting ajax a request you can pass error callback function as a parameter in $.ajaxSetup function.
This parameter is most important when you want to manage server response like syntax error, file not found etc.
From the above, we can say that if you are developing single page application, the intercept is most important to manage ajax request and response.
if you are developing single page application than for security reason, you must have to use authentication token.
if you want to redirect to 404, 500 etc page form commonplace then intercept is most useful.
We can also capture every response from the server to validate something or handle errors globally. This requirement could be met using interceptors. They give us a facility to handle ajax request before sending and after request.
To intercept you can use $.ajaxSetup function.
EX: Demo
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$.ajaxSetup({
beforeSend: function (xhr) {
xhr.setRequestHeader('Authorization', 'Authorization token');
},
complete: function (xhr,status) {
console.log("222");
},
error: function (xhr,status,error) {
console.log("333");
},
});
$("#button1").click(function(){
$.ajax({url: "demo_test1.txt", success: function(result){
$("#div1").html(result);
}});
});
$("#button2").click(function(){
$.ajax({url: "demo_test2.txt", success: function(result){
$("#div2").html(result);
}});
});
$("#button3").click(function(){
$.ajax({url: "demo_test3.txt", success: function(result){
$("#div3").html(result);
}});
});
$("#button4").click(function(){
$.ajax({url: "demo_test4.txt", success: function(result){
$("#div4").html(result);
}});
});
});
</script>
</head>
<body>
<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>
<div id="div2"><h2>Let jQuery AJAX Change This Text</h2></div>
<div id="div3"><h2>Let jQuery AJAX Change This Text</h2></div>
<div id="div4"><h2>Let jQuery AJAX Change This Text</h2></div>
<button id="button1">Call ajax 1</button>
<button id="button2">Call ajax 2</button>
<button id="button3">Call ajax 3</button>
<button id="button4">Call ajax 4</button>
</body>
</html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$.ajaxSetup({
beforeSend: function (xhr) {
xhr.setRequestHeader('Authorization', 'Authorization token');
},
complete: function (xhr,status) {
console.log("222");
},
error: function (xhr,status,error) {
console.log("333");
},
});
$("#button1").click(function(){
$.ajax({url: "demo_test1.txt", success: function(result){
$("#div1").html(result);
}});
});
$("#button2").click(function(){
$.ajax({url: "demo_test2.txt", success: function(result){
$("#div2").html(result);
}});
});
$("#button3").click(function(){
$.ajax({url: "demo_test3.txt", success: function(result){
$("#div3").html(result);
}});
});
$("#button4").click(function(){
$.ajax({url: "demo_test4.txt", success: function(result){
$("#div4").html(result);
}});
});
});
</script>
</head>
<body>
<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>
<div id="div2"><h2>Let jQuery AJAX Change This Text</h2></div>
<div id="div3"><h2>Let jQuery AJAX Change This Text</h2></div>
<div id="div4"><h2>Let jQuery AJAX Change This Text</h2></div>
<button id="button1">Call ajax 1</button>
<button id="button2">Call ajax 2</button>
<button id="button3">Call ajax 3</button>
<button id="button4">Call ajax 4</button>
</body>
</html>
from above demo, you can add, modify, delete any header or response data and you can control all ajax request and response.
the most important and use full parameters of $.ajaxSetup is listed below.
=>beforeSend
To intercept before sending ajax a request you can pass beforeSend callback function as a parameter in $.ajaxSetup function.
This parameter is most important when you want to add, edit, delete some header information or request parameters in all ajax request.
=>complete
To intercept after getting ajax a request you can pass complete callback function as a parameter in $.ajaxSetup function.
This parameter is most important when you want to add, edit, delete, manage some response data after all ajax request.
=>error
To intercept any error at getting ajax a request you can pass error callback function as a parameter in $.ajaxSetup function.
This parameter is most important when you want to manage server response like syntax error, file not found etc.
From the above, we can say that if you are developing single page application, the intercept is most important to manage ajax request and response.
No comments:
Post a Comment