CODEWITHSUNDEEP
jqueryajax
black
black

Reputation: 745

different approach in ajax to do a common task

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

Upvotes: 1

Views: 489

Answers (1)

Manwal
Manwal

Reputation: 23836

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()

Upvotes: 1

Related Questions