運用WCF來簡化Ajax代碼

最後更新：2018-12-03 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

一般的ajax程式是HTML+ASHX,要寫很多通訊代碼,但是微軟的WCF整合了通訊代碼,簡化了代碼.

1，建立一個WCF伺服器頁面,建立一個給用戶端使用的方法,及資料類.

using System;using System.Linq;using System.Runtime.Serialization;using System.ServiceModel;using System.ServiceModel.Activation;using System.ServiceModel.Web;namespace WebApplication1{    [ServiceContract(Namespace = "")]    [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]    public class WCFService1    {        /// <summary>        /// 擷取使用者資訊        /// </summary>        /// <param name="id">使用者id</param>        /// <returns>存放使用者資訊的使用者類</returns>        [OperationContract]        public user GetUser(int id) {            return new user() {username="小江",age=22,address="浙江溫州" };                }        // 添加 [WebGet] 屬性以使用 HTTP GET        [OperationContract]        public void DoWork()        {            // 在此處添加操作實現            return;        }        // 在此處添加更多操作並使用 [OperationContract] 標記它們    }    /// <summary>    /// 定義使用者類,存放使用者資料    /// </summary>    public class user    {        public string username { get; set; }        public int age { get; set; }        public string address { get; set; }    }}

2，添加一個aspx頁面,在頁面頂部添加一個ScriptManager控制項,在這個控制項的資料集裡添加伺服器頁面進來,

最後寫js代碼,直接像寫C#程式一樣寫js代碼,很方便.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WCFAjax.aspx.cs" Inherits="WebApplication1.WCFAjax" %><!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>    <style type="text/css">        #Text3        {            height: 50px;            width: 181px;        }    </style>    <script type="text/javascript">        function $(id) { return document.getElementById(id); }        function Button1_onclick() {            WCFService1.GetUser(1, function(data) {//調用伺服器Getuser(id,fn,fn)方法,第一個為參數,第二個為返回成功的匿名函數,第三個為返回失敗的匿名函數            $("Text1").value = data.username;            $("Text2").value = data.age;            $("Text3").value = data.address;            }, function() { alert("擷取失敗"); });        }    </script></head><body>    <form id="form1" runat="server">    <div>        <p>        <asp:ScriptManager ID="ScriptManager1" runat="server">            <Services>                <asp:ServiceReference Path="~/WCFService1.svc" />            </Services>        </asp:ScriptManager>        使用者名稱<input id="Text1" type="text" /></p>    <p>        年齡<input id="Text2" type="text" /></p>    <p>        地址<input id="Text3" type="text" /></p>    <p>        <input id="Button1" type="button" value="button" onclick="return Button1_onclick()" /></p>    </div>    </form></body></html>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More