如何在大数据发布中使用jQueryAjax加速HTTP响应接收？

问题： pythonwebapp2+jqueryajax在接收大文本数据响应方面表现极差（1.7MB负载往返需要10分钟以上）

问题： 原因是什么？如何改进？我是否可以使用任何经过验证的技术将大文本主干划分为小有效负载，以避免“浏览器挂起”问题

背景： 我一直在学习使用webapp2+googleappengine进行python网络编程。 我正试图用jqueryajax构建一个“输入就是看到”的编辑区域。它非常类似于stackoverflow post editor:wmd input vs wmd preview，后者提供实时预览功能。（在短文本中不断显示“草稿已保存”。另一个例子是谷歌文档实时编辑功能）

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

我的前端代码：

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

将小于500KB的纯文本复制并粘贴到输入区域：效果很好。 但是，1.7MB的文本会使浏览器在>10分钟内忙起来，这看起来完全没有响应

比较：我将相同的文本粘贴到stackoverflow post编辑器，预览立即出现！我注意到这次没有草稿保存提示。这里有一些javascript代码判断文本长度。好。可能不涉及服务器通信但这是一种变通办法，而不是解决我的问题。（谷歌文档自动保存功能必须使用某种技术来解决问题！）

Firebug xhr监视器结果：

有趣的事情：

jQueryAjax向服务器发送2MB而不是1.7MB纯负载。多大的开销啊！ 这可能是由于内容类型：application/x-www-form-urlencoded

服务器需要1.03秒来响应，jQuery需要14分钟来接收响应

---

这背后是怎么回事？感谢您的帮助！我想让服务器在Ajax请求后“推送”很多东西到客户端，但这个问题使其无法实现。

考虑使用HTML5 WebSocket和Worker API的组合，在不影响UI线程性能的情况下从服务器异步发送/接收数据

（本教程假设PHP是服务器端技术）

另一个选项

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

>记录光标位置-将其存储在C2中。
>仅将C1和C2之间的内容发送到服务器。还将值C1和C2发送到服务器，即您的AJAX负载将类似于：
{c1:c1，c2:c2，数据：}

您需要查看是否

c1>c2

，并适当地获取子字符串，反之亦然

---

这样，每次只向服务器发送“更改”，而不是全文。但是，如果您复制并粘贴5MB的内容，这不会带来任何改进。但对于单个字符的更改（如键入、粘贴小片段等），这应该可以很好地工作。

太棒了。但似乎很少有浏览器支持它。我想在长轮询中使用ajax streamline。您是否尝试过使用任何类型的压缩技术？+1用于设计良好的问题，而不考虑堆栈溢出reputation@Kishore不，因为我的目的是测试大数据通信，而不是解决它D@Kishore而且，如果数据不可压缩，压缩不会有任何机会大幅减少有效负载。

#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

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

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