您的位置：首页 > 编程语言 > C#

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

2009-11-29 19:35 453 查看

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"><!--
// 设置数据到画面显示
function GetUserName()
{
var reqParam = document.getElementById("tbx_UserId").value;
var url = 'AjaxBlankPage.aspx?reqParam=' + reqParam;
ExecuteCall(SetDataToView, url);
}
// 回调函数
function SetDataToView()
{
var xmlHttpObj = xmlHttpReq_Obj;
if(xmlHttpObj != null)
{
// 判断页面加载完成否
if(xmlHttpObj.readyState == 4)
{
if (xmlHttpObj.status == 200)
{
document.getElementById("tbx_UserName").value = xmlHttpObj.responseText;
}
else if (request.status == 404)
{
alert("Request URL does not exist");
}
else
{
alert("Error: status code is " + request.status);
}
}
}
}
// --></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内容默认

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航