What are the alternative ways of making an Ajax call?

Question

I'm wondering what is the best way to make an AJAX call.

This is what I have right now, and it works just fine.

$.ajax({

    url: "/rest/computer",
    type: "GET",
    dataType: "json",

    data: {
        assessmentId: "123",
        classroomId:  "234"
    },

    success: function(objects) {


    // .... code ....


    }
});

I'm currently seeking another ways of making an Ajax call. If there is, should I use my approach ?

Should I move an Ajax call into it own function and call it back ?

Any suggestions on this will be much appreciated.

... or use just Javascript. But if it is not broke why fix it — Ed Heal, Jul 17 '15 at 18:05
I never asked to review my code. In fact, I mentioned it works fine. — code-8, Jul 17 '15 at 18:06
No matter what you use it's always going through an XMLHTTPRequest object, so I don't think it really matters. It's going to be personal preference. — dmeglio, Jul 17 '15 at 18:06
What about the `.done()` , what do you guys think about that ? — code-8, Jul 17 '15 at 18:07
http://stackoverflow.com/questions/8567114/how-to-make-an-ajax-call-without-jquery This goes through using an ajax call with and without jQuery. You are going to use one of these methods at some point in your code. — Sinistralis, Jul 17 '15 at 18:07
@开发人员 **BUT** that's the purpose of codereview... You are just on the wrong site — A. Wolff, Jul 17 '15 at 18:07

score 8 · Accepted Answer · edited Oct 17 '16 at 17:51

8

Yes there are some other ways to call ajax

jQuery

var get_data = function(){
    var result = false;
    $.get('/rest/computer').done(function(awesome_data){
        result = awesome_data;
    });

    return result;
}

$.getJSON

$.getJSON( '/rest/computer', { assessmentId:"123", classroomId:"234"})
  .done( function(resp){
    // handle response here
}).fail(function(){
   alert('Oooops');
});

If you're not using jQuery in your code, this answer is for you

Your code should be something along the lines of this:

function foo() {
    var httpRequest = new XMLHttpRequest();
    httpRequest.open('GET', "/rest/computer");
    httpRequest.send();
    return httpRequest.responseText;
}

var result = foo(); // always ends up being 'undefined'

edited Oct 17 '16 at 17:51

Zong

6,160
5
32
46

answered Jul 17 '15 at 18:13

Bhavin Solanki

4,740
3
26
46

1

Have you even tried your first example? And are you aware of async model? – Brad Christie Jul 17 '15 at 18:14
Yes, i have used it some where in my project, but here i have posted is just for sample of alternative ajax call – Bhavin Solanki Jul 17 '15 at 18:16
1

Then can you please post a jsFiddle (using their `/echo/` endpoint) and show how a single call to `get_data()` is going to return my result (after an AJAX round-trip)? I'm VERY interested. ((Same goes for your third example--getting information without binding to readstatechange)) – Brad Christie Jul 17 '15 at 18:18
1

first one simply won't work, you can't return from a function when result is created in asynchronous request. Suggest you read [how-to-return-the-response-from-an-asynchronous-call](http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-asynchronous-call) – charlietfl Jul 17 '15 at 18:33

score 8 · Answer 2 · edited Jun 07 '22 at 08:28

There is a new async Fetch API that all of the modern browsers support:

fetch('./api/projects', {
        method: 'post',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            title: 'Beispielprojekt',
            url: 'http://www.example.com',
        })
    })
    .then(response => { console.log(response); })
    .catch(error => { console.error(error); });

See this post for more information.

charlietfl · Answer 3 · 2015-07-17T18:10:20.240

2

Not really clear what the underlying context of your question is but for example shown you can use :

$.getJSON( url, { assessmentId:"123", classroomId:"234"})
  .done( function(resp){
    // handle response here
}).fail(function(){
   alert('Oooops');
});

$.getJSON is a wrapper for $.ajax that simplifies needing to add a number of options that are already preset

edited Jul 17 '15 at 18:10

answered Jul 17 '15 at 18:07

charlietfl

170,828
13
121
150

score 2 · Answer 4 · edited Nov 08 '16 at 11:40

2

Following have also one of the type ajax call using post method.

var assessmentId = "123"
var formURL = '/rest/computer';
var postData = { "action":"add","data":assessmentId};
$.post(formURL, postData, function( response ) {
    // handle response here 
});

edited Nov 08 '16 at 11:40

Basheer AL-MOMANI

14,473
9
96
92

answered Jul 18 '15 at 08:58

Umesh Markande

289
1
6

What are the alternative ways of making an Ajax call?

4 Answers4