Heim > Web-Frontend > js-Tutorial > Verwendung von Ajax unter ASP.NET

Verwendung von Ajax unter ASP.NET

coldplay.xixi
Freigeben: 2020-10-12 17:35:24
nach vorne
2146 Leute haben es durchsucht

Verwendung von Ajax unter ASP.NET

Zuvor wurde das vorläufige Verständnis von Ajax in Ajax verstehen Vorläufiges Verständnis vorgestellt, wie man Ajax bequem in ASP.NET verwendet. Der erste ist natürlich die Verwendung von jQuerys Ajax, das leistungsstark und einfach ist Die zweite Möglichkeit besteht darin, den .NET-gekapselten ScriptManager zu verwenden.

Verwandte kostenlose Lernempfehlungen: ajax (Video)

$.ajax sendet eine Get-Anfrage an eine normale Seite

Dies ist der einfachste Weg. Verstehen Sie zunächst kurz die jQuery-Ajax-Syntax Die am häufigsten verwendete Aufrufmethode ist wie folgt: $.ajax({settings}); Alle Parameter und ihre Erklärungen finden Sie im offiziellen jQuery-API-Dokument

1

2. URL: Angeforderter Uri

4. Header: Benutzerdefinierte Header-Parameter

6. Datentyp: Parameterformat, allgemein sind String, JSON, XML usw.

7. Inhalt: eine „String/regulärer Ausdruck“-Zuordnung, die bestimmt, wie die Antwort analysiert wird

8. Inhaltstyp: der Inhaltskodierungstyp der an den Server gesendeten Daten, der Standardwert Wert Es ist „application/x-www-form-urlencoded; charset=UTF-8““.

9. Erfolg: Das aufgerufene Handle, nachdem die Anfrage erfolgreich war

10.Fehler: Das aufgerufene Handle, nachdem die Anfrage fehlgeschlagen ist

Ich habe jQuery noch nie verwendet. Ajax ist etwas verwirrend, wenn man es so betrachtet. Schauen wir uns ein einfaches Beispiel an.

Erstellen Sie zunächst mit Visual Studio eine Webanwendung, führen Sie jQuery.js in das Projekt ein und fügen Sie dann zwei hinzu Seiten, Default.aspx zum Testen

Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Web.Default" %>
<!DOCTYPE html >
<html>
<head runat="server">
    <title>Ajax</title>
    <script src="jQuery.js" type="text/javascript"></script>
    <style type="text/css">
        html, body, form
        {
            width: 100%;
            height: 100%;
            padding: 0px;
            margin: 0px;
        }
        
        #container
        {
            margin: 100px;
            height: 300px;
            width: 500px;
            background-color: #eee;
            border: dached 1px #0e0;
        }    </style>
</head>
<body>
    <form id="form1" runat="server">
    <p id="container">
        <input type="button" value="Test Ajax" onclick="testGet()" />
        <br />
    </p>
    <script type="text/javascript">
        function setContainer(text) {
            document.getElementById("container").innerHTML += (&#39;<br/>&#39; + text);
        }

        function testGet() {
            $.ajax({
                type: &#39;get&#39;,
                url: &#39;NormalPage.aspx&#39;,                async: true,
                success: function (result) {
                    alert(result);
                },
                error: function () {
                    setContainer(&#39;ERROR!&#39;);
                }
            });
        }    </script>
    </form>
</body>
</html>
Nach dem Login kopieren

NormalPage.aspx wird ohne Verarbeitung als Anforderungsseite verwendet. Im JavaScript auf der Seite Default.aspx können Sie sehen dass die testGet-Funktion den Ajax von jQuery verwendet, um eine Get-Anfrage zu senden, und die ungeschriebenen Parameter die Standardparameter von jQuery verwenden. Es wird lediglich eine Anfrage an die Seite Normal.aspx gesendet Wenn die Anfrage erfolgreich ist, werden alle Antworten benachrichtigt (d. h. der Erfolgsmethodenparameter: Ergebnis, jQuery sendet den Antworttext Übergeben Sie den ersten Parameter der Erfolgsmethode). Wenn die Anfrage fehlschlägt, fügen Sie eine Fehlermeldung hinzu Text an p. Wenn alles normal ist, wird auf der Seite ein Dialogfeld angezeigt, und der Inhalt im Dialogfeld ist der Inhalt der Seite „Normal.aspx“. Eine einfache Abrufanforderung ist abgeschlossen Ein Ergebnis ist im Allgemeinen nicht sehr nützlich und auch nicht die Absicht von Ajax. Der Hauptzweck der Verwendung von Ajax besteht darin, mithilfe von JavaScript bestimmte Anforderungen asynchron an den Server zu senden, um serverbezogene Daten zu erhalten, z. B. den Server nach dem Wetter zu fragen. und dann wird durch das Abrufen der Wetterdaten die Seite aktualisiert, anstatt die gesamte Seite abzurufen. Mit anderen Worten: Die Verwendung von Ajax selbst besteht darin, das Muster der Aktualisierung der gesamten Seite zu beseitigen, um die Seitendaten zu aktualisieren , was den Aufruf einer bestimmten Methode auf der Serverseite erfordert.


$.ajax GET-Anfrage ruft serverspezifische Methoden auf

Wir müssen zu diesem Zeitpunkt NormalPage.aspx ändern, mehrere Methoden für den Default.aspx-Testaufruf hinzufügen

Verwendung von Ajax unter ASP.NET

using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI;using System.Web.UI.WebControls;namespace Web
{    public partial class NormalPage : System.Web.UI.Page
    {        protected void Page_Load(object sender, EventArgs e)
        {            string action = Request.QueryString["action"];
            Response.Clear(); //清除所有之前生成的Response内容
            if (!string.IsNullOrEmpty(action))
            {                switch (action)
                {                    case "getTime":
                        Response.Write(GetTime());                        break;                    case "getDate":
                        Response.Write(GetDate());                        break;
                }
            }
            Response.End(); //停止Response后续写入动作,保证Response内只有我们写入内容        }        private string GetDate()
        {            return DateTime.Now.ToShortDateString();
        }        private string GetTime() 
        {            return DateTime.Now.ToShortTimeString();
        }
    }
}
Nach dem Login kopieren

Dann fügen Sie eine neue Methode zu Default hinzu. aspx und ändern Sie die Onclick-Methode der Schaltfläche in eine neu geschriebene Funktion

function testGet2() {
            $.ajax({
                type: &#39;get&#39;,
                url: &#39;NormalPage.aspx&#39;,
                async: true,
                data:{action:&#39;getTime&#39;},
                success: function (result) {
                    setContainer(result);
                },
                error: function () {
                    setContainer(&#39;ERROR!&#39;);
                }
            });
        }
Nach dem Login kopieren

Die testGet2-Funktion wird basierend auf der testGet-Funktion leicht geändert. Zuerst wird die Erfolgsmethode geändert und die erhaltene Antwort auf die Seite geschrieben. dann Die Anfrage fügt einen Datenparameter hinzu und die Anfrage sendet ein Aktion: getTime-Schlüssel-Wert-Paar an den Server. In der Get-Anfrage konvertiert jQuery diesen Parameter in einen URL-Parameter. Die obige Schreibmethode hat den gleichen Effekt wie dieses Schreiben Methode


function testGet3() {
            $.ajax({
                type: &#39;get&#39;,
                url: &#39;NormalPage.aspx?action=getTime&#39;,
                async: true,
                success: function (result) {
                    setContainer(result);
                },
                error: function () {
                    setContainer(&#39;ERROR!&#39;);
                }
            });
        }
Nach dem Login kopieren

Schauen wir uns den Ausführungseffekt an. Dies ist das Überwachungsergebnis von Chrome


如果调试我们发现这个请求调用的服务器页面NormalPage.aspx的GETime方法,并且response中只包含对有用的数据,如果把请求中参数的值改为getDate,那么就会调用对应GetDate方法。

$.ajax POST与json

这样向一个页面发送请求然后在Load事件处理程序中根据参数调用不同方法,清除Response,写入Response,终止Response,而且传入的参数局限性太大,好业余的赶脚,看看专业些解决方法。为project添加一个General Handler类型文件,关于HttpHandler相关内容本文不做详细解释,只需知道它可以非常轻量级的处理HTTP请求,不用走繁琐的页面生命周期处理各种非必需数据。

Handler.ashx.cs


using System;using System.Collections.Generic;using System.Linq;using System.Web;using Newtonsoft.Json;namespace Web
{    /// <summary>
    /// Summary description for Handler    /// </summary>
    public class Handler : IHttpHandler
    {        public void ProcessRequest(HttpContext context)
        {
            Student stu = new Student();            int Id = Convert.ToInt32(context.Request.Form["ID"]);            if (Id == 1)
            {
                stu.Name = "Byron";
            }            else
            {
                stu.Name = "Frank";
            }           string stuJsonString= JsonConvert.SerializeObject(stu);
           context.Response.Write(stuJsonString);
        }        public bool IsReusable
        {            get
            {                return false;
            }
        }
    }
}
Nach dem Login kopieren

关于这个类语法本文不做详细说明,每次发起HTTP请求ProcessRequest方法都会被调用到,Post类型请求参数和一再Request对象的Form中取得,每次根据参数ID值返回对应json对象字符串,为了展示json格式数据交互,需要为项目引入json.net这一开源类库处理对象序列化反序列化问题,然后创建一个Student类文件

Student.cs


using System;using System.Collections.Generic;using System.Linq;using System.Web;namespace Web
{    public class Student
    {        public int ID { get; set; }        public string Name { get; set; }
    }
}
Nach dem Login kopieren

看看页面如何处理


function testPost() {
            $.ajax({
                type: &#39;post&#39;,
                url: &#39;Handler.ashx&#39;,
                async: true,
                data: { ID: &#39;1&#39; },
                success: function (result) {
                    setContainer(result);                    var stu =eval (&#39;(&#39;+result+&#39;)&#39;);
                    setContainer(stu.ID);
                    setContainer(stu.Name);
                },
                error: function () {
                    setContainer(&#39;ERROR!&#39;);
                }
            });
        }
Nach dem Login kopieren

结果是这个样子的

Verwendung von Ajax unter ASP.NET

上面代码向Handler.ashx发送一Post请求,比且带有参数{ID:’1’},可以看到结果,如果用调试工具可以发现,得到的result是一个json格式的字符串,也就是往Response写的对象序列化后的结果。这样就实现了比较专业些的方式调用Ajax,但是有一个问题依旧存在,HttpHandler会自动调用ProcessRequest方法,但是也只能调用该方法,如果想调用不同方法只能像普通页面那样传递一个参数表明调用哪个方法,或者写不同的Handler文件。

WebService与ScriptManager

微软向来很贴心,看看微软怎么处理上面的困惑,那就是利用WebService,WebService配合SCriptManager有客户端调用的能力,在项目中添加一个Webservice文件

WebService.asmx


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;

namespace Web
{    /// <summary>
    /// Summary description for WebService
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]    // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.     [System.Web.Script.Services.ScriptService]
    public class WebService : System.Web.Services.WebService
    {

        [WebMethod]
        public Student GetStudent(int  ID)
        {            if (ID == 1)
            {                return new Student() { ID = 1, Name = "Byron" };
            }            else
            {                return new Student() { ID = 2, Name = "Frank" };
            }
        }
Nach dem Login kopieren
  [WebMethod]         
  public string GetDateTime(bool isLong)          
    {               
     if (isLong)               
      {                   
       return DateTime.Now.ToLongDateString();           
            }             
               else             
                  {                
                      return DateTime.Now.ToShortDateString();       
                    }       
                         
        }
    }
    
    
}
Nach dem Login kopieren

代码中加黄的code默认是被注释掉的,要想让客户端调用需要把注释去掉,Service中定义了两个方法,写个测试方法让客户端调用第一个方法根据参数返回对应对象,首先需要在页面from内加上ScriptManager,引用刚才写的WebService文件

Default.aspx


<form id="form1" runat="server">
    <asp:ScriptManager ID="clientService" runat="server">
        <Services>
            <asp:ServiceReference Path="~/WebService.asmx" />
        </Services>
    </asp:ScriptManager>
    <p id="container">
        <input type="button" value="Test Ajax" onclick="testPost2()" />
        <br />
    </p>...
Nach dem Login kopieren

然后添加JavaScript测试代码


function testPost2() {
            Web.WebService.GetStudent(1, function (result) {
                setContainer(result.ID);
                setContainer(result.Name);
            }, function () {
                setContainer(&#39;ERROR!&#39;);
            });
        }
Nach dem Login kopieren

测试代码中需要显示书写WebService定义方法完整路径,WebService命名空间.WebService类名.方法名,而出入的参数列表前几个是调用方法的参数列表,因为GetStudent只有一个参数,所以只写一个,如果有两个参数就顺序写两个,另外两个参数可以很明显看出来是响应成功/失败处理程序。看看执行结果:

Verwendung von Ajax unter ASP.NET

观察仔细会发现使用ScriptManager和WebService组合有福利,在WebService中传回Student对象的时候并没有序列化成字符串,而是直接返回,看上面图发现对象已经自动转换为一json对象,result结果可以直接操作,果真非常贴心。而上一个例子中我们得到的response是一个json字符串,在客户端需要用eval使其转换为json对象。

ScriptManager+WebSefvice调用ajax带来了很大的便利性,但同时牺牲了很多灵活性,我们没法像jQuery那样指定很多设置有没有两全其美的办法呢

$.ajax+WebService

jQuery调用Handler几乎完美了,但是不能处理多个方法,上面例子我们可以发现WebService可以实现这一功能,那么能不能jQUery调用WebService的不同方法呢?答案是肯定的,试一试用jQuery调用刚才WebService定义的第二个方法。写一个测试函数


function testPost3() {
            $.ajax({
                type: &#39;post&#39;,
                url: &#39;WebService.asmx/GetDateTime&#39;,
                async: true,
                data: { isLong: true },
                success: function (result) {
                    setContainer($(result).find(&#39;string&#39;).text());
                },
                error: function () {
                    setContainer(&#39;ERROR!&#39;);
                }
            });
        }
Nach dem Login kopieren

调用方式没有多大变化,简单依旧,只要把URL改为WebService路径+需要调用的方法名,然后把参数放到data里就可以了。我们看看结果:

Verwendung von Ajax unter ASP.NET

通过上图可以看到,jQuery调用WebService默认会返回一个XML文档,而需要的数据在 节点中,只需要使用jQuery解析xml的语法就可以轻松得到数据。如果希望返回一个json对象怎么办?那就得和调用Handler一样使用json.net序列化,然后前端使用eval转换了,也不会过于复杂。我在项目中最常使用这个模式,这样既保持了jQuery的灵活性又可以在一个Service中书写多个方法供调用,还不用走复杂的页面生命周期

json.net和本文示例源代码

json.net是一个开源的.net平台处理json的库,可以序列化Dictionay嵌套等复杂对象,关于其简单使用有时间会总结一下,可以自codeplex上得到其源码和官方说明。本文的源代码可以点击这里获得。

其他相关免费学习推荐:js视频教程

Das obige ist der detaillierte Inhalt vonVerwendung von Ajax unter ASP.NET. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:cnblogs.com
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage