一起來學ASP.NET Ajax(四)之非同步通訊層

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

上載者：User

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

這篇部落格我們來看ASP.NET AJAX中資料的交換過程。

Employee類：

/// <summary>/// Employee類/// </summary>public class Employee{private string _FirstName;private string _LastName;private string _Title;public Employee() { }    /// <summary>    /// 帶參數建構函式    /// </summary>    /// <param name="firstName">姓</param>    /// <param name="lastName">名</param>    /// <param name="title">職位</param>public Employee(string firstName, string lastName, string title){this._FirstName = firstName;this._LastName = lastName;this._Title = title;}    /// <summary>    /// 姓    /// </summary>public string FirstName{get{return this._FirstName;}}    /// <summary>    /// 名    /// </summary>public string LastName{get{return this._LastName;}}    /// <summary>    /// 職位    /// </summary>public string Title{get{return this._Title;}}}

用戶端代碼

GetEmployee.ashx

<%@ WebHandler Language="C#" Class="AspNetAjaxOverview.GetEmployee" %>using System;using System.Web;using System.Web.Script.Serialization;namespace AspNetAjaxOverview{public class GetEmployee : IHttpHandler{public void ProcessRequest(HttpContext context){context.Response.ContentType = "text/plain";//擷取姓、名、職位string firstName = context.Request.Params["firstName"];string lastName = context.Request.Params["lastName"];string title = context.Request.Params["title"];            //執行個體Employee類Employee employee = new Employee(firstName, lastName, title);            //序列化為json字串JavaScriptSerializer serializer = new JavaScriptSerializer();string jsonEmp = serializer.Serialize(employee);//響應請求context.Response.Write(jsonEmp);}public bool IsReusable{get{return false;}}}}

服務端代碼

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="2非同步通訊.aspx.cs" Inherits="_2非同步通訊" %><!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></head><body>    <form id="form1" runat="server">        <asp:ScriptManager ID="ScriptManager1" runat="server">        </asp:ScriptManager>    <script type="text/javascript" >        function showEmployee(firstName, lastName, title) {                //將字串轉義    var requestBody = String.format("firstName={0}&lastName={1}&title={2}",encodeURIComponent(firstName),encodeURIComponent(lastName),encodeURIComponent(title));    var request = new Sys.Net.WebRequest();                //請求服務端地址    request.set_url('GetEmployee.ashx');                //請求方式：POST    request.set_httpVerb("POST");                //註冊回呼函數    request.add_completed(onGetEmployeeComplete);                //佈建要求    request.set_body(requestBody);                //提交請求request.invoke();}            //回呼函數function onGetEmployeeComplete(response) {            //響應是否可用if (response.get_responseAvailable()) {                //擷取對象    var employee = response.get_object();                    //直接使用對象的屬性即可alert(String.format("Hello I'm {0} {1}, my title is '{2}'",employee.FirstName,employee.LastName,employee.Title));}}</script><!--提示姓名、職位--><input id="Button1" type="button" value="Bill Gates"onclick="showEmployee('Bill', 'Gates', 'Chair man')" /><input id="Button2" type="button" value="Steve Ballmer"onclick="showEmployee('Steve', 'Ballmer', 'CEO')" />    </form></body></html>

運行結果

資料交換過程，為了直觀展示，採用時序圖方式：

可以看到中間的JavaScript就相當於一個非同步通訊層，負責對browser和server之間進行資料交換。

本文章原先以中文撰寫並發佈於 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