使用jQuery和&QUOT如何更新动态HTML页面与印HTTP服务器;长轮询"? [英] How can I update HTML pages dynamically with Indy HTTP server using jQuery and "Long Polling"?
问题描述
我看过一篇文章简单长轮询示例使用JavaScript和jQuery 。该段长轮询 - 高效的服务器推送技术解释说,
I have read the article Simple Long Polling Example with JavaScript and jQuery. The paragraph "Long Polling - An Efficient Server-Push Technique" explains that
长轮询技术结合最好的情况下传统的轮询 持续性的远程服务器连接。术语长轮询 本身是短期的长期持有的HTTP请求。
the Long Polling technique combines the best-case traditional polling with persistent remote server connections. The term Long Polling itself is short for long-held HTTP request.
我如何能够实现它使用长轮询一个印基于HTTP服务器?
How can I implement a Indy based HTTP server which uses Long Polling?
推荐答案
下面是一个自包含的示例项目,与印版10.5.9和德尔福2009年测试了。
Here is a self-contained example project, tested with Indy version 10.5.9 and Delphi 2009.
在应用程序运行时,导航到 http://127.0.0.1:8080/
。该服务器将成为一个HTML文件(以OnCommandGet处理器硬codeD)。
When the application runs, navigate to http://127.0.0.1:8080/
. The server will then serve a HTML document (hard-coded in the OnCommandGet handler).
这个文档包含将被用作容器的新数据div元素:
This document contains a div element which will be used as the container for new data:
<body>
<div>Server time is: <div class="time"></div></div>'
</body>
中的JavaScript code,然后将请求发送到资源 /的getData code>在一个循环(函数
民意调查()
)
The JavaScript code then send requests to the resource /getdata
in a loop (function poll()
).
服务器响应,其中包含一个新的℃的HTML片段; DIV&GT;
与当前服务器时间元素。 JavaScript的code,则取代了旧的&LT; DIV&GT;
的新元素
The server responds with a HTML fragment which contains a new <div>
element with the current server time. The JavaScript code then replaces the old <div>
element with the new.
要模拟服务器的工作,该方法返回的数据之前等待一秒钟。
To simulate server work, the method waits for one second before returning the data.
program IndyLongPollingDemo;
{$APPTYPE CONSOLE}
uses
IdHTTPServer, IdCustomHTTPServer, IdContext, IdSocketHandle, IdGlobal,
SysUtils, Classes;
type
TMyServer = class(TIdHTTPServer)
public
procedure InitComponent; override;
procedure DoCommandGet(AContext: TIdContext;
ARequestInfo: TIdHTTPRequestInfo; AResponseInfo: TIdHTTPResponseInfo); override;
end;
procedure Demo;
var
Server: TMyServer;
begin
Server := TMyServer.Create(nil);
try
try
Server.Active := True;
except
on E: Exception do
begin
WriteLn(E.ClassName + ' ' + E.Message);
end;
end;
WriteLn('Hit any key to terminate.');
ReadLn;
finally
Server.Free;
end;
end;
procedure TMyServer.InitComponent;
var
Binding: TIdSocketHandle;
begin
inherited;
Bindings.Clear;
Binding := Bindings.Add;
Binding.IP := '127.0.0.1';
Binding.Port := 8080;
KeepAlive := True;
end;
procedure TMyServer.DoCommandGet(AContext: TIdContext;
ARequestInfo: TIdHTTPRequestInfo; AResponseInfo: TIdHTTPResponseInfo);
begin
AResponseInfo.ContentType := 'text/html';
AResponseInfo.CharSet := 'UTF-8';
if ARequestInfo.Document = '/' then
begin
AResponseInfo.ContentText :=
'<html>' + #13#10
+ '<head>' + #13#10
+ '<title>Long Poll Example</title>' + #13#10
+ ' <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript" charset="utf-8"> ' +
#13#10
+ ' </script> ' + #13#10
+ ' <script type="text/javascript" charset="utf-8"> ' + #13#10
+ ' $(document).ready(function(){ ' + #13#10
+ ' (function poll(){' + #13#10
+ ' $.ajax({ url: "getdata", success: function(data){' + #13#10
+ ' $("div.time").replaceWith(data);' + #13#10
+ ' }, dataType: "html", complete: poll, timeout: 30000 });' + #13#10
+ ' })();' + #13#10
+ ' });' + #13#10
+ ' </script>' + #13#10
+ '</head>' + #13#10
+ '<body> ' + #13#10
+ ' <div>Server time is: <div class="time"></div></div>' + #13#10
+ '</body>' + #13#10
+ '</html>' + #13#10;
end
else
begin
Sleep(1000);
AResponseInfo.ContentText := '<div class="time">'+DateTimeToStr(Now)+'</div>';
end;
end;
begin
Demo;
end.
这篇关于使用jQuery和&QUOT如何更新动态HTML页面与印HTTP服务器;长轮询&QUOT;?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!