我有一个Ajax调用更新数据库中的5,000条记录,因此这需要很多时间。我有一个Ajax“加载图像”显示发生了一些事情,但我正在寻找一个更好的方式来显示“更新50的5000。。”,“更新200的5000”或类似的东西。
什么是最好的方式来做这样的事情在Ajax / jQuery没有做5000个不同的帖子?
解决方法
最好的我认为是使用
Comet。
在Comet风格的应用程序中,服务器本质上可以将数据推送到客户端(而不是一次又一次地从服务器请求数据)。客户端只需要连接到服务器一次。然后服务器将继续将数据推回客户端。
维基百科:
Comet is a programming technique that enables web servers to send data to the client without having any need for the client to request it. It allows creation of event-driven web applications which are hosted in the browser.
现在让我们看看彗星如何工作。请参阅以下服务器端代码。这里使用一个while循环,你可以改为设置自己的条件。在while循环中,页面写入一个datetime并刷新,然后休眠1/2秒。
ASP.NET页面代码隐藏:Service.aspx.cs
public static string Delimiter = "|"; protected void Page_Load(object sender,EventArgs e) { Response.Buffer = false; while (true) { Response.Write(Delimiter + DateTime.Now.ToString("HH:mm:ss.FFF")); Response.Flush(); // Suspend the thread for 1/2 a second System.Threading.Thread.Sleep(500); } // Yes I know we'll never get here,// it's just hard not to include it! Response.End(); }
客户端代码 – 纯JavaScript
只做一次请求,然后继续检查XMLHttpRequest的readyState === 3中的数据。
function getData() { loadXMLDoc("Service.aspx"); } var req = false; function createRequest() { req = new XMLHttpRequest(); // http://msdn.microsoft.com/en-us/library/ms535874%28v=vs.85%29.aspx } function loadXMLDoc(url) { try { if (req) { req.abort(); req = false; } createRequest(); if (req) { req.onreadystatechange = processReqChange; req.open("GET",url,true); req.send(""); } else { alert('unable to create request'); } } catch (e) { alert(e.message); } } function processReqChange() { if (req.readyState == 3) { try { ProcessInput(req.responseText); // At some (artibrary) length recycle the connection if (req.responseText.length > 3000) { lastDelimiterPosition = -1; getData(); } } catch (e) { alert(e.message); } } } var lastDelimiterPosition = -1; function ProcessInput(input) { // Make a copy of the input var text = input; // Search for the last instance of the delimiter var nextDelimiter = text.indexOf('|',lastDelimiterPosition + 1); if (nextDelimiter != -1) { // Pull out the latest message var timeStamp = text.substring(nextDelimiter + 1); if (timeStamp.length > 0) { lastDelimiterPosition = nextDelimiter; document.getElementById('outputZone').innerHTML = timeStamp; } } } window.onload = function () { getData(); };
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。