Heim >Web-Frontend >js-Tutorial >JQuery implementiert den einfachen Serverabfrageeffekt example_jquery

JQuery implementiert den einfachen Serverabfrageeffekt example_jquery

WBOYOriginal: 2016-05-16 15:07:151203Durchsuche

Das Beispiel in diesem Artikel beschreibt, wie JQuery einen einfachen Server-Polling-Effekt implementiert. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Nach dem Betreten vieler Foren erscheint eine Meldung, die angibt, wie viele E-Mails nicht gelesen wurden, oder ein OA-System fragt, wie viele Aufgaben nach dem Betreten noch nicht erledigt wurden. Hin und wieder wird es eine Aufforderung geben, aber wie man es umsetzt. Tatsächlich ist die Verwendung von jquery relativ einfach. Die Kernelemente sind das Parsen des JSON-Formats und die Funktion setInterval(). Lass es uns gemeinsam umsetzen:

Zuerst sieht unsere default.aspx-Seite so aus:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title>服务器轮询</title>
  <link href="Content/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" />
  <link href="Content/ui.jqgrid.css" rel="stylesheet" type="text/css" />
  <script src="Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
  <script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
  <script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
  <script src="js/src/grid.base.js" type="text/javascript"></script>
  <script type="text/javascript">
  function showUnreadNews()
  {
    $(document).ready(function() {
      $.ajax({
        type: "GET",
        url: "Result.ashx",
        dataType: "json",
        success: function(msg) {
          //alert(msg);
          $.each(msg, function(id, title) {
            $("#news").append("<a href=detailnews.aspx&#63;id=" + id + ">" + title + "</a><br>");
          });
        }
      });
    });
  }
  setInterval('showUnreadNews()',5000);
  </script>
</head>
<body>
  <form id="form1" runat="server">
  <div id="news">
  </div>
  </form>
</body>
</html>

Der obige Code verwendet hauptsächlich die Ajax-Funktion, um eine Ajax-Anfrage an die Seite Result.ashx zu senden. Anschließend gibt die Seite Result.ashx die JSON-Daten zurück und analysiert sie. Schließlich wird die Funktion setInterval() verwendet, um Folgendes zu erreichen Polling-Effekt. Die spezifische Result.ashx-Seite Der Code lautet wie folgt:

<%@ WebHandler Language="C#" Class="Result" %>
using System;
using System.Web;
using System.Text;
using System.Data.SQLite;
using System.Data;
public class Result : IHttpHandler {
  public void ProcessRequest (HttpContext context) {
    string sql = "select * from Content where NewsFlag=0";
    DataTable dt = new DataTable();
    using (SQLiteConnection conn = new SQLiteConnection(InitSQLite().Connection))
    {
      SQLiteDataAdapter sda = new SQLiteDataAdapter(sql, conn);
      sda.Fill(dt);
    }
    string jsonStr = GetJson(dt);
    context.Response.ContentType = "text/json";
    context.Response.Buffer = true;
    context.Response.ExpiresAbsolute = DateTime.Now.AddDays(-1);
    context.Response.AddHeader("pragma", "no-cache");
    context.Response.AddHeader("cache-control", "");
    context.Response.CacheControl = "no-cache";
    context.Response.Write(jsonStr);
  }
  public static string GetJson(DataTable dt)
  {
    StringBuilder jsonBuilder = new StringBuilder();
    jsonBuilder.Append("{");
    for (int i = 0; i < dt.Rows.Count; i++)
    {
      jsonBuilder.Append( dt.Rows[i]["NewsID"].ToString() + ":" +"\""+ dt.Rows[i]["NewsTitle"].ToString()+"\",");
    }
    jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
    jsonBuilder.Append("}");
    return jsonBuilder.ToString();
  }
  public Sqlite InitSQLite()
  {
    Sqlite _sqLite = new Sqlite();
    _sqLite.ConnetStringBuilder.DataSource = AppDomain.CurrentDomain.BaseDirectory + "News.db3";
    _sqLite.ConnetStringBuilder.Pooling = true;
    _sqLite.ConnetStringBuilder.FailIfMissing = true;
    _sqLite.ConnetStringBuilder.UseUTF16Encoding = true;
    return _sqLite;
  }
  public bool IsReusable {
    get {
      return false;
    }
  }
}

Die Datenbank verwendet SQLite, bitte überprüfen Sie selbst die spezifische Verwendung. In dieser Verarbeitungsdatei besteht das Wichtigste darin, aus den datierbaren Daten JSON-Daten zu generieren, die dem Format entsprechen.

Auf diese Weise wird das System schließlich implementiert. Alle 5 Sekunden fragt die Homepage den Server nach Daten ab, um die neuesten Daten zu erhalten.

Leser, die an weiteren jQuery-bezogenen Inhalten interessiert sind, können sich die speziellen Themen auf dieser Website ansehen: „Zusammenfassung der JQuery-Umschalteffekte und -Techniken“, „Zusammenfassung der jQuery-Drag-Effekte und -Techniken", "Zusammenfassung der JQuery-Erweiterungsfähigkeiten", "Zusammenfassung allgemeiner klassischer Spezialeffekte von jQuery", "Zusammenfassung der Verwendung von jQuery-Animationen und Spezialeffekten", "Zusammenfassung der Verwendung des jQuery-Selektors “ und „Zusammenfassung der allgemeinen jQuery-Plug-ins und der Verwendung “

Ich hoffe, dass dieser Artikel für alle hilfreich ist, die sich mit der jQuery-Programmierung befassen.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So implementieren Sie jquery $.trim(), um Zeichenfolgenleerzeichen zu entfernen [mit Legende]_jqueryNächster Artikel：So implementieren Sie jquery $.trim(), um Zeichenfolgenleerzeichen zu entfernen [mit Legende]_jquery

In Verbindung stehende Artikel

Mehr sehen