.net 平台的C#实现Ajax——无需任何框架。

最新推荐文章于 2021-03-22 20:21:31 发布

原创最新推荐文章于 2021-03-22 20:21:31 发布 · 4.8k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#c# #ajax #.net #平台 #xmlhttprequest #racket

本文介绍了一个使用Ajax技术的应用实例，包括创建Web应用程序、实现Ajax交互、客户端和服务端的通信流程等关键步骤。通过具体代码展示了如何利用XmlHttpRequest对象进行异步数据请求及处理。

1.创建WEB Application工程WebAjax。

2.建立目录文件AjaxCommon.js如下：

// 声明XmlHttpRequest成员变量 var xmlHttpReq_Obj = null; // 初始化获取XmlHttpRequest对象 ///<param>handler :回调函数名</param> function GetXmlHttpObject(handler) { var xmlHttpObj = null; try { // Microsoft xmlHttpObj = new ActiveXObject("Msxml2.XMLHTTP"); // 设置回调函数 if(xmlHttpObj != null) { xmlHttpObj.onreadystatechange = handler; } } catch (e){ try { // Mozilla | Netscape | Safari xmlHttpObj = new XMLHttpRequest(); // 设置回调函数 if(xmlHttpObj != null) { xmlHttpObj.onload = handler; xmlHttpObj.onerror = handler; } } catch (e) { } } if(xmlHttpObj == null) { alert("Error initialing XMLHttpRequest!"); } return xmlHttpObj; } // 发送请求 ///<param>xmlHttpObj :XmlHttpObject对象</param> ///<param>url :请求url</param> function SendXmlHttpRequest(xmlHttpObj,url) { xmlHttpObj.open('GET', url, true); xmlHttpObj.send(null); } // 执行回调函数 ///<param>handler :回调函数名</param> ///<param>url :请求url</param> function ExecuteCall(handler, url) { try{ xmlHttpReq_Obj = GetXmlHttpObject(handler); SendXmlHttpRequest(xmlHttpReq_Obj, url); } catch (e){ } }

3.建立文件AjaxBlankPage.aspx作为Ajax服务端处理数据Page

AjaxBlankPage.aspx内容为：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxBlankPage.aspx.cs" Inherits="WebAjax.AjaxBlankPage" %>

删除其他所有即可

AjaxBlankPage.aspx.cs内容为：

using System; using System.Data.OleDb; using System.Data; using System.Text; using AkCommon.Common.Conn; using AkCommon.Common.Log; namespace WebAjax { /// <summary> /// 处理概要 /// </summary> /// <remarks> /// <para>DATE ：2009/07/20</para> /// <para>AUTHOR：THINKINGALL</para> /// <para>变更履历</para> /// <items> /// <item></item> /// </items> /// </remarks> public partial class AjaxBlankPage : System.Web.UI.Page { #region 变量定义 /// <summary> 存储过程名sp_DisplayUserName_sel1 </summary> private const string SP_DISPLAYUSERNAME_SEL1 = "sp_DisplayUserName_sel1"; #endregion 变量定义 /// <summary> /// 画面初始化 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> protected void Page_Load(object sender, EventArgs e) { object obj = Request.QueryString["reqParam"]; string temp = obj == null ? string.Empty : obj.ToString(); if (!string.IsNullOrEmpty(temp)) { Response.Clear(); try { // 获取DataSet DataSet ds = this.GetDataSet(temp); // 设置响应 Response.Write(ds.Tables[0].Rows[0]["Eusr_UserName"].ToString()); } catch { } } } /// <summary> /// 从DB获取数据 /// </summary> /// <param name="userId">用户ID</param> /// <returns>DataSet数据集</returns> public DataSet GetDataSet(string userId) { // 获取连接 OleDbConnection conn = null; try { // 获取Command OleDbCommand command = OleDbHelper.CreateStoredProcedureCommand(SP_DISPLAYUSERNAME_SEL1, ref conn); // Pamramter设定 OleDbHelper.SetTypeParameters(command, "@_UserID", OleDbType.VarChar, 10, userId); return OleDbHelper.ExecuteDataset(command); } catch (System.Exception ex) { StringBuilder strbLogMsg = new StringBuilder(); strbLogMsg.Append("---------------------START-----------------------------"); strbLogMsg.Append("" + ex.Message); strbLogMsg.Append("/r/nErrorMethod : Display"); strbLogMsg.Append("/r/nStackContent: " + ex.StackTrace); strbLogMsg.Append("---------------------END-----------------------------"); throw; } finally { OleDbHelper.DestroyStoredProcedure(conn); } } } }

4.建立客服端Page

WebMain.aspx内容为：

<%@ Page Language="C#" debug="true" AutoEventWireup="true" CodeBehind="WebMain.aspx.cs" Inherits="WebAjax.WebMain" %> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>AjaxTest</title> <mce:script src="../Resource/Res/AjaxCommon.js" mce_src="Resource/Res/AjaxCommon.js" language="javascript" type="text/javascript"></mce:script> <mce:script type="text/javascript" language="javascript"></mce:script> </head> <body> <form id="Ajaxform" runat="server" method="post" action="/.do"> <div> <table border="0"> <tr> <td><span>Net实现</span></td> <td> </td> </tr> <tr> <td><span>用户ID</span></td> <td><span>用户名</span></td> </tr> <tr> <td><asp:TextBox ID="tbxUserId" runat="server" MaxLength="10" AutoPostBack="true" OnTextChanged="tbxUserId_TextChanged" /></td> <td><asp:TextBox ID="tbxUserName" runat="server" ReadOnly="true"/></td> </tr> <tr> <td><span>Ajax实现</span></td> <td> </td> </tr> <tr> <td><span>用户ID</span></td> <td><span>用户名</span></td> </tr> <tr> <td><input type="text" name="tbx_UserId" id="tbx_UserId" maxlength="10" onchange="GetUserName()" /></td> <td><input type="text" name="tbx_UserName" id="tbx_UserName" readonly="readonly"/></td> </tr> </table> <table> <tbody> <tr> <td><img alt="球拍性能分析图" src="Resource/Images/K_racket_Perf.bmp" mce_src="Resource/Images/K_racket_Perf.bmp" ismap="ismap"/></td> </tr> </tbody> </table> </div> </form> </body> </html>

WebMain.aspx.cs内容默认