Google App Engine & jQuery Ajax causes a Broken Pi

Question

I have a pretty standard case, where I try to submit some JSON data via jQuery's Ajax.

My Java Script code looks like this:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type='text/javascript' src='script.js'></script>
<script type='text/javascript'>
    $(document).ready(function() {
        $("#submit").click(function() {
            $.post('/test', {test : '123'}, function(data) { alert("callback received"); }, 'json');
        });
    });
</script>

On the App Engine side I have this:

class Submit(webapp.RequestHandler):
    def post(self):
        logging.info(self.request.body)
        self.response.out.write("test_response")

I receive the JSON data logging.info(self.request.body) perfectly, but then it triggers an error as soon as I send out the response. The error log I get is the following:

Exception happened during processing of request from ('192.168.2.8', 38875)
Traceback (most recent call last):
  File "/usr/lib/python2.6/SocketServer.py", line 283, in handle_request_noblock
    self.process_request(request, client_address)
  File "/usr/lib/python2.6/SocketServer.py", line 309, in process_request
    self.finish_request(request, client_address)
  File "/usr/lib/python2.6/SocketServer.py", line 322, in finish_request
    self.RequestHandlerClass(request, client_address, self)
  File "/home/hw/Siine/google_appengine/google/appengine/tools/dev_appserver.py", line 3123, in init_
    BaseHTTPServer.BaseHTTPRequestHandler.__init__(self, *args, **kwargs)
  File "/usr/lib/python2.6/SocketServer.py", line 618, in __init__
    self.finish()
  File "/usr/lib/python2.6/SocketServer.py", line 661, in finish
    self.wfile.flush()
  File "/usr/lib/python2.6/socket.py", line 297, in flush
    self._sock.sendall(buffer(data, write_offset, buffer_size))
error: [Errno 32] Broken pipe

I have absolutely no idea what I do wrong, since this seems straightforward.

Answer 1

My guess is that you need to cancel the submit action by calling .preventDefault() on the event object or by returning false from your handler. When the default submit behavior fires it navigates the browser away from the page.

Answer 2

The solution was quite simple, although it took me a while to figure it out.

In the submit button <input type="submit" id="submit" value="Submit"> you cannot use type="submit".

I changed it to type="button" and since then it works perfectly.

If anyone knows why that is, feel free to enlighten me. Thanks.

Answer 3

This is because the dev_appserver is single-threaded and it runs in a single process in your dev machine therefore it cannot handle two requests at the same time.

As John pointed out, and as you already discovered, you were sending two simultaneous requests to the dev_server breaking the pipe.