Question: python webapp2 + jQuery Ajax perfroms is extremely bad at getting a response to large text data (takes more than 10 minutes in the opposite direction of 1.7 MB)
Question: What is the reason? how to improve it? could I use any well-established methods to split a large text trunk into small payloads to avoid a browser problem?
Background: I am learning python web programming using webapp2 + Google App Engine. I am trying to create an edit zone what-you-input-is-what-you-see with jQuery Ajax. It is very similar to the postoverflow post editor : wmd-input vs wmd-preview , which offers a real-time preview function. (He continues to indicate “draft saved” in short text. Another example is the editing function in Google Docs mode)
My example works as follows: The jQuery textchange plugin starts an Ajax submission, triggered by every change to the input text field ---> . Python backends receive text and add several messages to it ---> . Send text + messages ---> jQuery uses the server response to update the preview text field (Well, sending the full contents of the received text is for testing purposes only.)
My interface codes:
<script type="text/javascript"> function simpleajax() { $.ajax({ type: 'POST' ,url: '/simpleajax' ,dataType: 'json' ,data:{'esid':'#ajaxin','msgin':$('#ajaxin').val()} ,cache:false ,async:true ,success:function (resp){$('#ajaxout').text(resp.msgout);} ,error:function (jqXHR, textStatus, errorThrown){ {$('#ajaxout').text("Ajax Error:"+textStatus+","+errorThrown)}} }); } $(document).ready(function(){ $('#ajaxin').bind('textchange', function () { $('#ajaxstatus').html('<strong color="blue">Typing ...</strong>'); simpleajax(); }); }); </script>
My code codes are:
class simpleajax(BaseReqHandler): def get(self): content={'pagealert':'simpleAjax get response'} self.render_to_response('simpleAjax.html',**content) def post(self): esid=self.POST['esid'] msgin=self.POST['msgin'] msgout="Server noticed element " + esid + " value changed" + " and saved following message: " + msgin content={"msgout":msgout} self.writeout(content)
Test case and symptoms: Local server + text messages
Copy and paste plain text smaller than 500 KB into the input area: works like a charm. however, 1.7 MB text makes the browser busy for> 10 minutes, which does not respond fully.
Comparison: I paste the same text into the postoffflow post editor, and the preview appears instantly! This time I did not notice the sketches saved in the project. And there are several javascript codes judging the length of the text here. Well. There is a possibility that server communication will not be involved. But this solution is not the solution to my problem. (Google Docs autosave function should use some methods to solve the problem!)
Firebug xhr monitoring results:
#Request Headers: Host: localhost:8080 User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:7.0.1) Gecko/20100101 Firefox/7.0.1 Accept: application/json, text/javascript, */*; q=0.01 Accept-Language: en-us,en;q=0.5 Accept-Encoding: gzip, deflate Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 Connection: keep-alive Content-Type: application/x-www-form-urlencoded X-Requested-With: XMLHttpRequest Content-Length: 2075974 Referer: http://localhost:8080/ajax Cookie: __utma=111872281.1883490050.1319630129.1319630129.1319637523.2; __utmz=111872281.1319630129.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none) Pragma: no-cache Cache-Control: no-cache
Interesting things:
- jQuery Ajax sends 2MB instead of the 1.7MB payload to the server. What a big overhead! Could this be related to Content-Type: application / x-www-form-urlencoded ?
- The server takes 1.03s for a response, and jQuery takes 14 minutes to get a response !!!
What is going on behind this? Any help is appreciated! I would like to let the server “push” a lot of things to the client after an Ajax request, but this problem makes it impossible.