I'm trying to figure out how to make a DELETE request using just Javascript. I have a service written in Java Spring where the controller for the url that I am working on has method = RequestMethod.DELETE. My url is, say, http://192.168.50.51/my-service/deleteLocation/{value1}/{value2}/{value3}. In my JavaScript, I have an AJAX function like so:

    ajaxFunction : function(url, callback, httpMethod) {

    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
            var jsonParse = JSON.parse(xhttp.responseText);
            callback(jsonParse);
        }
    }
    xhttp.open(httpMethod, url, true);
    xhttp.send();

}

When I want to use the DELETE url, I have an event handler attached to a button that runs this method:

    deleteConfirm : function() {
    var valuel         = this.value1;
    var value2         = document.getElementById('element-id').getAttribute('data-element');
    var value3         = document.getElementById('element-id').getAttribute('data-element2');
    var url            = 'http://192.168.50.51/my-service/deleteInfo/' + value1 + '/' + value2 + '/' + value3;
    var httpMethod     = 'DELETE';
    var deleteCallback = function() { alert('deleted!'); }
    this.ajaxFunction(url, deleteCallback, httpMethod);
}

However, I keep getting an error in my console: my-javascript.js:59 DELETE http://192.168.50.51/my-service/deleteInfo/123456789/123-456-7AB/12699 406 (Not Acceptable).

I've read that XMLHttpRequest only accepts GET and POST. How do I go about making a delete request using just JavaScript?

I'm trying to figure out how to make a DELETE request using just Javascript. I have a service written in Java Spring where the controller for the url that I am working on has method = RequestMethod.DELETE. My url is, say, http://192.168.50.51/my-service/deleteLocation/{value1}/{value2}/{value3}. In my JavaScript, I have an AJAX function like so:

    ajaxFunction : function(url, callback, httpMethod) {

    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
            var jsonParse = JSON.parse(xhttp.responseText);
            callback(jsonParse);
        }
    }
    xhttp.open(httpMethod, url, true);
    xhttp.send();

}

When I want to use the DELETE url, I have an event handler attached to a button that runs this method:

    deleteConfirm : function() {
    var valuel         = this.value1;
    var value2         = document.getElementById('element-id').getAttribute('data-element');
    var value3         = document.getElementById('element-id').getAttribute('data-element2');
    var url            = 'http://192.168.50.51/my-service/deleteInfo/' + value1 + '/' + value2 + '/' + value3;
    var httpMethod     = 'DELETE';
    var deleteCallback = function() { alert('deleted!'); }
    this.ajaxFunction(url, deleteCallback, httpMethod);
}

However, I keep getting an error in my console: my-javascript.js:59 DELETE http://192.168.50.51/my-service/deleteInfo/123456789/123-456-7AB/12699 406 (Not Acceptable).

I've read that XMLHttpRequest only accepts GET and POST. How do I go about making a delete request using just JavaScript?

• javascript
• ajax
• httprequest
• http-delete

• 1 Your service is rejecting it. Why is it rejecting it? – Kevin B Commented Sep 12, 2016 at 19:08
• 2 406 Not Acceptable is ing from the server, not your client. You are using XHR correctly, but check you're performing DELETE correctly according to the webservice's docs. – Dai Commented Sep 12, 2016 at 19:08

1 Answer 1

Given the information, it looks like your browser is actually making a DELETE request, because the server gave you back a 406 (Not Acceptable) response. It wouldn't do that if your client never sent the request in the first place. This means that the server received your DELETE request and decided it wouldn't process it. So you'll need to look at the server's API to see what gives you HTTP406 and what needs to be different about your request to make it work.

A good way to debug these kinds of things is through your browsers developer tools. Most browsers have a tab in there that shows you the HTTP requests and responses that the browser made. It will make it easier for you to verify these things, going forward.