Question

I’m using ExtJS to perform an AJAX request. Here’s my code

Ext.Ajax.request({
    url: 'TestServer',
    method: 'PUT',
    params: {
        json: Ext.encode({
            name: 'dummy'
        })
    }
});

So I decided to get the request parameter from servlet. So I’ve used

request.getParameter("json")

But I get a null value instead. It works well when I used POST method, but not PUT. Is there any other way to get the request parameter in servlet while using PUT method?

Answer 1

From the Ext.Ajax 4.1 Docs:

method : String
The default HTTP method to be used for requests. Note that this is case-sensitive and should be all caps (if not set but params are present will use “POST”, otherwise will use “GET”.)

The documentation makes no mention of allowing PUT, but it also makes no mention of disallowing PUT.

Additionally, there is documentation that explains how to use an HTTP Method Override to make the servlet invoke services mapped to PUT or DELETE.

The fact that someone would suggest using an HTTP Method Override instead of simply directly using PUT or DELETE, coupled with the Ext.Ajax documentation omitting other HTTP Method options, strongly suggests that what you are trying to do is not possible using Ext.

This seems odd, considering this is very possible with raw XmlHttpRequests and even jQuery AJAX.

However, taking advantage of JavaScript’s dynamic-typing and functional characteristics, one can easily override/extend the default Ajax functionality with this code taken from this forum post:

   Ext.lib.Ajax.request = function(method, uri, cb, data, options) {
        if(options){
            var hs = options.headers;
            if(hs){
                for(var h in hs){
                    if(hs.hasOwnProperty(h)){
                        this.initHeader(h, hs[h], false);
                    }
                }
            }
            if(options.xmlData){
                this.initHeader('Content-Type', 'text/xml', false);
                method = (options.method == 'PUT' ? 'PUT' : 'POST');
                data = options.xmlData;
            }else if(options.jsonData){
                this.initHeader('Content-Type', 'text/javascript', false);
                method = (options.method == 'PUT' ? 'PUT' : 'POST');
                data = typeof options.jsonData == 'object' ? Ext.encode(options.jsonData) : options.jsonData;
            }
        }

        return this.asyncRequest(method, uri, cb, data);
    };

    // example request
    Ext.Ajax.request({
        url: 'testrest.php',
        method: 'PUT',
        headers: {'Content-Type': 'text/xml'},
        success: function(response, opts) { Ext.Msg.alert('Sucess', 'Update has been successful'); },
        xmlData: '<blah>de</blah>'
    });

Lastly, it’s also not clear which version of Ext you’re using, and the code sample above is from 2007. You may need to modify your AJAX request so it uses jsonData (in place of their xmlData) instead of using params, as params doesn’t appear to be included in the override/extend operation. Furthermore, one of the posters in the forum mentioned that if params are present, POST is used by default, regardless of what is specified. Thus, this is another reason to consider using jsonData instead.

If jsonData doesn’t meet your needs, then you could always follow the examples demonstrated by the authors of this code example and modify your copy of Ext.Ajax so that it includes “PUT” requests when params are submitted.