Delphi-PRAXiS - Delphi How to: HTML teilweise aktualisieren ohne Reload (mit Indy und jQuery)

Wie man mit Indy HTTP Server und JavaScript (

jQuery) eine dynamische Aktualisierung eines Teilbereichs einer HTML Seite realisiert, zeigt das folgende Beispielprojekt. Weitere Informationen sind auf meiner Blogseite unter

How to: update HTML pages dynamically using jQuery and “Long Polling” zu finden.

Entwickelt und getestet ist es mit Delphi 2009 und Indy 10.5.9.

Es soll nur eine Anregung sein, zum Beispiel für webbasierte Administrationsoberflächen die mit wenig Traffic stets aktuelle Statistiken anzeigen. Viel Spass damit!

Delphi-Quellcode:

			program IndyLongPollingDemo;

{$APPTYPE CONSOLE}

uses

  IdHTTPServer, IdCustomHTTPServer, IdContext, IdSocketHandle, IdGlobal,

  SysUtils, Classes;

type

  TMyServer = class(TIdHTTPServer)

  public

    procedure InitComponent; override;

    procedure OnGet(AContext: TIdContext;

      ARequestInfo: TIdHTTPRequestInfo; AResponseInfo: TIdHTTPResponseInfo);

  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;

  OnCommandGet := OnGet;

  Bindings.Clear;

  Binding := Bindings.Add;

  Binding.IP := '127.0.0.1';

  Binding.Port := 8080;

  KeepAlive := True;

end;

procedure TMyServer.OnGet(AContext: TIdContext;

  ARequestInfo: TIdHTTPRequestInfo; AResponseInfo: TIdHTTPResponseInfo);

begin

  AResponseInfo.CharSet := 'UTF-8';

  AResponseInfo.ContentType := 'text/html';

  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

      + '  ' + #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.