url - the URL of the back end code. We'll be using "ajax_backend.php" for this property.
type - whether your query is GET or POST. For this, we'll use a POST.
data - a JSON object holding the data we are passing to the URL. In the example below, we'll use the key-value pair of the property user and the value StrUser.
success - a function to run when the call is successful. You no longer have to check status codes and what-have-you. How awesome is that?
There are more properties. You can look up the link provided in the first part of this post, or you could just go check out a simpler listing at this URL... (https://www.w3schools.com/jquery/ajax_ajax.asp)
<!DOCTYPE html>
<html>
<head>
<title>AJAX Starter Kit, jQuery Edition</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready
(
function()
{
ajax_frontend("Teochew Thunder");
}
);
function ajax_frontend(strUser)
{
$.ajax
(
{
url: "ajax_backend.php",
type: "post",
data:
{
"user": strUser
},
success: function(result)
{
$("#ajax_placeholder").html(result);
},
}
)
}
</script>
</head>
<body>
<div id="ajax_placeholder" style="border:1px solid #000000;width:200px;height:100px;">
</div>
</body>
</html>
<html>
<head>
<title>AJAX Starter Kit, jQuery Edition</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready
(
function()
{
ajax_frontend("Teochew Thunder");
}
);
function ajax_frontend(strUser)
{
$.ajax
(
{
url: "ajax_backend.php",
type: "post",
data:
{
"user": strUser
},
success: function(result)
{
$("#ajax_placeholder").html(result);
},
}
)
}
</script>
</head>
<body>
<div id="ajax_placeholder" style="border:1px solid #000000;width:200px;height:100px;">
</div>
</body>
</html>
Now you'll see stuff running as it should.
Why should we use this instead of the non-jQuery version?
Honestly, I'd say use whatever you like. Both ought to work. The days of jQuery spazzing out on you because certain browsers support different versions and all that jazz, should largely have been left behind.jQuery AJAX is a lot less verbose and more cross-browser compliant. Being less verbose basically means there's less code to write, which in turn means there's less code to screw up. This ultimately translates to code being more maintainable.
And, this will be a valuable tool in your arsenal - nothing to sniff at.
Lastly, you get to avoid what we call "callback hell", where we try to time the results of asynchronous calls within asynchronous calls. Ever tried it? It's a nightmare. But now we get to do away with all of that. If you want to run a separate AJAX call after ajax_frontend() runs successfully, for example, just run it in the success property. No more nested callback madness!
This deserves a separate blogpost all on its own, but in the meantime, do enjoy your AJAX!
Async, therefore I am.
T___T
T___T
No comments:
Post a Comment