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

问题：
python webapp2 jQuery Ajax在接收大文本数据响应方面非常糟糕(在1.7MB有效负载往返中需要超过10分钟)

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

背景：
我一直在用webapp2 Google App Engine学习python web编程.
我正在尝试使用jQuery Ajax构建一个“你输入什么”的编辑区域.它与stackoverflow post editor非常相似：wmd-input vs wmd-preview,提供实时预览功能. (它一直表示“草稿已保存”为短文本.另一个例子是Google Docs实时编辑功能)

我的例子是这样的：
textchange jQuery插件触发由每个输入textarea更改触发的Ajax发布—> Python后端接收文本并在其上添加一些消息—>发回短信—> jQuery使用服务器响应来更新预览textarea
(好吧,发回收到的文本的全部内容仅用于测试目的.)

我的前端代码：

<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 post编辑器,并立即显示预览！这次我注意到没有草稿保存的提示.这里有一些javascript代码判断文本长度.好.有可能不涉及服务器通信.但这是一个解决方法而不是我的问题的解决方案.(Google Docs自动保存功能必须使用某种技术来解决问题！)

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

有趣的东西：

> jQuery Ajax向服务器发送2MB而不是1.7MB纯净负载.多大的开销！
这可能是由于Content-Type：application / x-www-form-urlencoded？
>服务器需要1.03秒才能响应,jQuery需要14分钟才能收到响应！

这背后发生了什么？任何帮助表示赞赏！在Ajax请求之后,我想让服务器向客户端“推送”很多东西,但这个问题使得它无法实现.

解决方法

考虑使用HTML5 WebSockets和amp;组合. 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的内容,这将不会有任何改进.但是对于单个字符的更改(比如键入,粘贴小段等等),这应该可以很好地工作.

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

解决方法

相关文章