How can implement synchronous Ajax call using pure Javascript?

Question

I need to implement synchronous Ajax calling mechanism. I already implement ajax calling function in my helper same as below :

MH.helper = {
    ajax : function (option) {
        if(option !== undefined) {
            for(var opt in option) {
                this[opt] = option[opt];
            }
        }

        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            this.xhr=new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            this.xhr=new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
}

I also implement Ajax prototype as same as below :

MH.helper.ajax.prototype = {
    // XMLHttpRequest obj
    xhr : null,

    // request url
    url: '',

    // post funciton
    post: function() {

    var xhr = this.xhr;
    var that = this;

    xhr.onreadystatechange=function() {
        if(xhr.readyState==4 && xhr.status==200){
            if(that.complete && ( typeof that.complete === 'function' )) {
                that.complete(xhr.responseText);
            }
        }
    }

    var data = MH.helper.serialize(this.data, true);

    xhr.open("POST",this.url,true);
    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xhr.send(data);
},

// get funciton
get: function() {

    var xhr = this.xhr;
    var that = this;

    xhr.onreadystatechange=function() {
        if(xhr.readyState==4 && xhr.status==200){
            if(that.complete && ( typeof that.complete === 'function' )) {
                that.complete(xhr.responseText);
            }
        }
    }

    var data = MH.helper.serialize(this.data);
    xhr.open("GET",this.url+data,true);
    xhr.send(data);
},

// callback when request done
complete: null
}

Anyone have any idea how can I implement synchronous call using my Ajax function?

Don't do that. Synchronous requests will freeze the browser. — SLaks, Mar 17 '14 at 19:30
@SLaks In case of before unload event you have no option without synchronous Ajax calling. — monsur.hoq, Mar 17 '14 at 19:59
@O.O `jQuery.ajax` also implement an attribute `async:false` its require in many case e.g. [click this](http://stackoverflow.com/questions/133310/how-can-i-get-jquery-to-perform-a-synchronous-rather-than-asynchronous-ajax-re) — monsur.hoq, Mar 17 '14 at 20:05
@monsur.hoq - so then just use jQuery. No need to reinvent the wheel, is there? :) — O.O, Mar 17 '14 at 20:05
@O.O It's require. Why I need to use full jQuery library for a simple Ajax calling from third parties site to my site e.g. content sharing service — monsur.hoq, Mar 17 '14 at 20:13
@O.O "*No need to reinvent the wheel, is there? :)*" but the OP just wants to know how to build a synchronous XHR call – not the whole wheel. — Barney, Mar 17 '14 at 20:15

score 6 · Answer 1 · answered Mar 17 '14 at 19:32

6

xhr.open("POST",this.url,true)

If you pass false as the 3rd parameter instead of true - the call will be performed synchronously.

But my advice - don't. Use callback functions always.

answered Mar 17 '14 at 19:32

Yuriy Galanter

38,833
15
69
136

It is not always possible to use callbacks. You have to have your entire interface prepared for asynchronous calls, which is not always true. – AnrDaemon Nov 23 '22 at 10:27

score 2 · Accepted Answer · answered Mar 17 '14 at 19:32

2

Pass false as the third argument of xhr.open.

Sources: Specification, MDN article.

answered Mar 17 '14 at 19:32

Barney

16,181
5
62
76

Wrong -> it will kill most devices. – lin Mar 17 '14 at 19:33
3

@lin it may not be recommended, but it isn't *"wrong"* – Kevin B Mar 17 '14 at 19:38
Agree! Edit: This will kill most devices. Especially the mobile one :) – lin Mar 17 '14 at 19:45
3

@lin the OP is specifically asking *how* to force synchronous XHR – not *if* that's a good idea. – Barney Mar 17 '14 at 19:59

How can implement synchronous Ajax call using pure Javascript?

2 Answers2

Related