Using PUT and DELETE methods in AJAX requests with prototype.js

Whenerver I write JavaScript I use prototype.js. I find it brilliant, especially when you deal with AJAX. With this library it’s easy to create an AJAX request and process its response from the server.

To send an AJAX request you create a following HTML code:

a link
$('ahref').onclick = function() {
    new Ajax.Request('/some_url', {
        onSuccess: function(transport){
            var responseXml = transport.responseXML;
        onFailure:function(){ alert('Something went wrong...') }
    return false;

This way, you create a request with GET and POST method. Recently, while developing a SOA system based on REST (REpresenational State Transfer), I faced a problem of creating requests also with other HTTP methods.

In short, REST allows using a few HTTP methods. The most popular are:

  • GET – for obtaining representation of a resource
  • POST – for updating or creating a representation of a resource
  • PUT – for creating a representation of a resource
  • DELETE – for removing a representation of a resource

Again, prototype.js helps a lot. Since version 1.5, it is possible to use all those methods (formerly, it supported only GET and POST). PUT and DELETE methods are realized by tunneling over POST. Also, “_method=METHOD_NAME” is added as a query parameter with the request. The only thing to do is to prepare relevant logic on the server side to manage the request.

Suppose you have a servlet that allows adding a resource to a database and it is invoked with the following URL:

A simplified definition of a Ajax.Request object in prototype would be as follows:

new Ajax.Request('/some_url', {

In the JavaServlet, you obtain the request and manage it like that:

protected void doPost(
    HttpServletRequest req, 
    HttpServletResponse res) 
    throws ServletException, IOException {
    if (req.getParameter("_method") != null 
        && "put".equalsIgnoreCase(req.getParameter("_method"))) {
        doPut(req, res);
Previous Post
Next Post