jquery - 如何在大数据发布中使用 jQuery Ajax 加速 HTTP 响应接收？

Question

问题:python webapp2 + jQuery Ajax 在接收大文本数据响应方面表现极其糟糕(在 1.7MB 的有效负载往返中需要超过 10 分钟)

问题:什么原因？如何改善呢？我可以使用任何经过充分验证的技术将大文本主干分成小的有效负载以避免“浏览器挂起”问题吗？

背景:我一直在学习使用 webapp2 + Google App Engine 进行 python 网络编程。我正在尝试使用 jQuery Ajax 构建一个“所输入即所见”的编辑区。它与提供实时预览功能的 stackoverflow post editor: wmd-input vs wmd-preview 非常相似。 (它一直提示'草稿已保存'到短文本。另一个例子是Google Docs实时编辑功能)

我的例子是这样的:textchange jQuery 插件触发由每个输入文本区域更改触发的 Ajax 发布 ---> Python 后端接收文本并在其上添加一些消息 ---> 发回文本+messages ---> jQuery 使用服务器响应更新预览文本区域(嗯，发回接收到的文本的全部内容只是为了测试目的。)

我的前端代码:

<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>

我的后端代码:

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)

测试用例和症状:本地服务器 + 纯文本负载

将小于 500KB 的纯文本复制并粘贴到输入区域:非常有效。然而，一个 1.7MB 的文本会使浏览器在 >10 分钟内忙碌，看起来完全没有响应。

比较:我将相同的文本粘贴到 stackoverflow 帖子编辑器，预览立即出现!这次我没有注意到草稿保存的提示。并且这里有一些判断文本长度的javascript代码。出色地。有可能不涉及服务器通信。 但这只是一种变通方法，而不是解决我的问题的方法。(Google 文档自动保存功能必须利用某种技术来解决这个问题!)

Firebug xhr 监控结果:

#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

#Response Headers:
Server: Development/1.0
Date: Fri, 04 Nov 2011 03:29:05 GMT
Cache-Control: no-cache
Content-Type: application/json; charset=utf-8
Content-Length: 1790407

#Firebug Timeline:
TimePoints       TimeElapsed      Actions
0                 1ms           DNS Lookup
+1ms              1ms           Connecting
+2ms              82ms          Sending
+84ms            1.03s          Waiting
+1.11s           14m22s         Receiving
+14m23.11s                       Done

有趣的事情:

1. jQuery Ajax 向服务器发送 2MB 而不是 1.7MB 的纯负载。多么大的开销!这可能是由于 Content-Type: application/x-www-form-urlencoded ?
2. 服务器需要 1.03 秒响应，而 jQuery 需要 14 分钟才能收到响应!!!

这背后发生了什么？任何帮助表示赞赏!我想让服务器在 Ajax 请求后将很多东西“推送”到客户端，但这个问题使它变得不可能。

Answer 1

考虑结合使用 HTML5 WebSockets 和 Worker API 从服务器异步发送/接收数据，而不影响 UI 线程性能。

http://dev.w3.org/html5/websockets/

http://net.tutsplus.com/tutorials/javascript-ajax/start-using-html5-websockets-today/ (教程假设PHP为服务端技术)

http://www.whatwg.org/specs/web-apps/current-work/multipage/workers.html

另一种选择

a) 在 mousedown 和 keyup 上

- record the cursor position in the text-box - store it in C1.

b) 在 textchange

上

> record the cursor position - store it in C2.

> send only the content between C1 and C2 to your server. Also send the values C1 and C2 to the server, i.e your AJAX payload will look something like: 

{ c1: C1, c2: C2, data: <text in the text-box from C1 to C2> }

您需要查看是否 c1 > c2，并适本地获取子字符串，反之亦然

这样，每次只将“更改”发送到服务器 - 而不是全文。但是，如果您复制并粘贴 5MB 的内容，则不会有任何改善。但对于单个字符的更改(如键入、粘贴小段等)，这应该工作得很好。