Kör asynkrona anrop med ett visst tidsintervall
Jag sitter för tillfället på ett flyg som är hyfsat försenat på grund av det härliga ovädret, så jag passade på att skriva en liten post om hur man använder jQuery för att hämta data asynkront med ett visst tidsintervall. Jag åkte 16:15 från Umeå, sen var vi över Stockholm i en halvtimme och är sedan runt 18 i Nyköping på grund av att det snöade för mycket på Arlanda (klockan är för tillfället 20:00)... Härligt, härligt! :-)
För att hämta data asynkront med jQuery så finns det en inställning som sätter cachen i webbläsaren. Den skall vi använda för att förhindra att datan cachas av webbläsaren, vilket skulle ge felaktiga resultat. Sedan använder vi en standardmetod i javascript för att anropa vår metod var 1000:e millisekund (dvs varje sekund).
Det som skall hämtas är aktuell tid från servern, och det presenteras via en web handler.
Först och främst så behöver vi en enkel HTML-sida:
1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2: <html xmlns="http://www.w3.org/1999/xhtml">
3: <head runat="server">
4: <title>Ajax</title>
5: <script src="scripts/jquery-1.2.6.js" type="text/javascript"></script>
6: <script src="scripts/ajax.js" type="text/javascript"></script>
7: </head>
8: <body>
9: <div id="currentTime"></div>
10: </body>
11: </html>
Tiden skall visas i klartext i div-elementet med ID satt till "currentTime". För att förhindra att HTML skickas in (vilket skulle kunna bero på någon sårbarhet i metoden som returnerar tiden) så använder vi text-metoden i jQuery.
1: $().ready(function() {
2: ShowCurrentTime();
3: window.setInterval('ShowCurrentTime()', 1000);
4: });
5:
6: function ShowCurrentTime() {
7: $.ajax({
8: url: "currenttime.ashx",
9: cache: false,
10: success: function(result) {
11: $("#currentTime").text(result);
12: }
13: });
14: }
Det som sker här är att vi först anropar metoden "ShowCurrentTime()" vid sidans laddning och då visar aktuell tid, sedan anropar vi den igen var 1000:e millisekund. Metoden window.setInterval() är en standardmetod i javascript som stöds av alla moderna webbläsare.
För att hämta datan så använder vi ajax-metoden i jQuery som låter oss skicka med en mängd inställningar, vilka som finns kan ni hitta i dokumentationen. Vi anropar currenttime.ashx med cachning inaktiverad och visar sedan (vid lyckad hämtning) resultatet i klartext i div-elementet.
Web handlern som används är en väldigt enkel och som enbart returnerar tiden i klartext.
1: <%@ WebHandler Language="C#" Class="currenttime" %>
2: using System;
3: using System.Web;
4:
5: public class currenttime : IHttpHandler {
6: public void ProcessRequest (HttpContext context) {
7: context.Response.ContentType = "text/plain";
8: context.Response.Write(DateTime.Now.ToLongTimeString());
9: }
10:
11: public bool IsReusable {
12: get {
13: return false;
14: }
15: }
16: }
Nu fick jag just höra att planet är tankat och redo att cirkulera runt Arlanda i ett par timmar, så förhoppninsvis så kommer jag hem ikväll. När det här postas så vet ni iaf att jag överlevde resan! ;-)
Jag kan meddela att vi landade på Arlanda strax efter 22.. Jippi!