The difference between AJAX raw and AJAX with jQuery is a matter of personal preference really. When you program with raw JavaScript you do not have to worry about bringing in external libraries. When you program AJAX with jQuery then you must bring in the external libraries. On the other hand jQuery syntax is easier to remember because there is less coding involved. Here is a tutorial lesson for you explaining the difference between both methods.
Scripts For AJAX Raw and AJAX with jQuery
First I will give you the AJAX raw script and the the AJAX with jQuery. You can compare the difference for yourself. Make a file and call it index.php and insert the following code into the file.<html>
<head>
<title>Replace Text With Ajax</title>
</head>
<body>
<div id="display">
<h1>This text will be replaced</h1>
<button type="button" onclick="ajax_call()">Replace Text</button>
</div>
<script>
function ajax_call() {
var xhttp = new XMLHttpRequest();
var url = "ajax_text.txt";
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("display").innerHTML = this.responseText;
}
};
xhttp.open("GET", url, true);
xhttp.send();
}
</script>
</body>
</html>
Create file and call it text.txt and insert the following code.
<h1>This is the replacement text with raw AJAX</h1>
After You Tried The Above Code
Now you can try it with jQuery and AJAX. Create a file or just replace the file you created called index.php and put the following code into it.<html>
<head>
<title>Replace Text With jQuery and Ajax</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div id="display"><h2>jQuery will replace this text </h2></div>
<button>Replace Text</button>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#display").load("text.txt");
});
});
</script>
</body>
</html>
Now create or replace the text.txt file with the following code.
<h1>This is the replacement text with jquery</h1>