different approach in ajax to do a common task

Question

While going through ajax i have found that many different techniques are followed to do a common task but i couldnt differentiate between those techniques, like ex:-1

<html>
<head>
<script>
   function CheckAjax() {
     var xmlhttp;
       if(window.XMLHttpRequest) {     
         xmlhttp = new XMLHttpRequest();
       } else {
         // For IE6 IE5
         xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");  
       }
    xmlhttp.onreadystatechange = function() {
       if(xmlhttp.readyState==4 && xmlhttp.status==200) {
        document.getElementById("check").innerHTML = xmlhttp.responseText;
       }
    }
    xmlhttp.open("GET","ajax_info.txt",true);
    xmlhttp.send();
  } 
</script>
</head>

<body>
<div id="check">
<h2>Let Ajax Change</h2>
</div>
<button type="button" onclick="CheckAjax()">Change Content</button>
</body>
</html>
//this script first checks Object then opens a text file and changes it when button is clicked and show it in a div

same thing is done by another script like:-

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
 $("button").click(function(){
    $("#div1").load("ajax_info.txt", function(responseTxt, statusTxt, xhr){
        if(statusTxt == "success")
            alert("External content loaded successfully!");
        if(statusTxt == "error")
            alert("Error: " + xhr.status + ": " + xhr.statusText);    //Error 404 Not Found
    });
  });
});
</script>
</head>
<body>
<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>
<button>Get External Content</button>
</body>

and if i am not wrong we can use $.ajax or $.post or $.get with different param and ways to achieve this same thing. now what is the best convenient way to follow and stick with the same pattern

The *best convenient way* is whatever you find convenient. Choose whatever you like or need. — Spokey, Feb 12 '15 at 09:12

score 1 · Accepted Answer · edited May 23 '17 at 11:43

Jquery

$.ajax is jquery function and $.get and $.post is shorthand for sending ajax GET and POST request. Those are same. Where you can configure $.ajax with any type of request GET and POST with setting TYPE.

There is another shorthand also:

$.getJSON: It is same as $ajax but having datatype: JSON, means its response type is JSON.

$.load : It is also a shorthand which returns HTML or TEXT type response

Javascript

Wether if you want to sent ajax request without using jquery, then you have to use XMLHttpRequest object.

More Details: Difference between $.ajax() and $.get() and $.load()

different approach in ajax to do a common task

1 Answers1

Jquery

Javascript