How can implement synchronous Ajax call using pure Javascript? - Stack Overflow

admin管理员组

文章数量:1391981

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(thatplete && ( typeof thatplete === 'function' )) {
                thatplete(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(thatplete && ( typeof thatplete === 'function' )) {
                thatplete(xhr.responseText);
            }
        }
    }

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

// callback when request done
plete: null
}

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

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.plete && ( typeof that.plete === 'function' )) {
                that.plete(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.plete && ( typeof that.plete === 'function' )) {
                that.plete(xhr.responseText);
            }
        }
    }

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

// callback when request done
plete: null
}

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

• javascript
• ajax

Share Improve this question Follow asked Mar 17, 2014 at 19:28 monsur.hoqmonsur.hoq 1,1311717 silver badges2626 bronze badges 9

• 4 Don't do that. Synchronous requests will freeze the browser. – SLaks Commented Mar 17, 2014 at 19:30
• 1 @SLaks I know that. But I want to diversity in my function. – monsur.hoq Commented Mar 17, 2014 at 19:33
• 2 Don't do that anyway. – SLaks Commented Mar 17, 2014 at 19:34
• @monsur.hoq - FYI, the A in AJAX stands for "Asynchronous" – O.O Commented Mar 17, 2014 at 19:53
• 1 @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 Commented Mar 17, 2014 at 20:15

 |  Show 4 more ments

2 Answers 2

Sorted by: Reset to default 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.

Pass false as the third argument of xhr.open.

Sources: Specification, MDN article.

本文标签： How can implement synchronous Ajax call using pure JavascriptStack Overflow