Overriding ajax request for changing url before the request is made

Question

I have been writing a script that can redirect AJAX request to other server when internet is not available, keep the request to same route when internet is available My script is doing the same it replaces the script with local server ip whenever data connection is not available, but its not effecting the functionality of the AJAX,

    var REMOTE_SERVER="http://opensupermall";
var LOCAL_SERVER="http://127.0.0.1:909";
var custom_url="";

var open = window.XMLHttpRequest.prototype.open,  
  send = window.XMLHttpRequest.prototype.send;

function openReplacement(method, url, async, user, password) {  
    custom_url = url;
  if(navigator.onLine){
    custom_url = url.replace(REMOTE_SERVER,LOCAL_SERVER);
  }

   console.log("openReplacement:"+custom_url);
  this._url = custom_url;
  return open.apply(this, arguments);
}

function sendReplacement(data) {  
  if(this.onreadystatechange) {
    this._onreadystatechange = this.onreadystatechange;
  }

  console.log('Request sent to:'+this._url);

  this.onreadystatechange = onReadyStateChangeReplacement;
  return send.apply(this, arguments);
}

function onReadyStateChangeReplacement() {  
  console.log('Url Changed to: ', this._url);
  if(this._onreadystatechange) {
    return this._onreadystatechange.apply(this, arguments);
  }
}
window.XMLHttpRequest.prototype.open = openReplacement;  
window.XMLHttpRequest.prototype.send = sendReplacement;

I need suggestion that is this possible right i am doing? Over riding of ajax request is possible ?

I want to change the URL on every ajax request made !

Can you help me ? Whats wrong in this code if its possible to override ajax request before it hits the server ?

Answer 1

You can use this code block,(jquery ajax) (you can create a utility javascript file and placed these code in this util script. And then, use every where)

• httpMethod => POST, GET, .....
• url => request url
• successHandler => your success handler function
• errorHandler => your error handler function
• timeout => request timeout

 function _ajaxRequest(httpMethod, url, successHandler, errorHandler, timeout){
    return {
        httpMethod : httpMethod,
        url : url,
        successHandler : successHandler,
        errorHandler : errorHandler,
        timeout : timeout,
        request : function request(requestData) {
            var ajaxRequest = {
                type : this.httpMethod,
                url : this.url,
                contentType : "application/json; charset=utf-8;",
                data : JSON.stringify(requestData),
                cache: false,
                timeout : this.timeout,
                success : function(response) {
                    successHandler(response);
                },
                error : function(error) {
                    errorHandler(error)
                }
            };           

            $.ajax(ajaxRequest);
        }
    }
}

Usage =>

var tempData = {
    "name" : "batuhan",
    "surname" : "caglayan"
};

var url1 = "url1";
var url2 = "url2";

var tempRequest = new _ajaxRequest("POST", url1, success, error, 60000);

function success(data){
     // use data
}

function error(error){
     // handle error
}

function requestProcess(){
     // *********************************************************
     // you can change url in here like => tempRequest.url = url2
     // *********************************************************
     tempRequest.request(tempData);
}