如果您有任何意见,请留下您宝贵的意见以便告知
操作环境:Visual Studio.Net2003
操作系统:window Xp SP2
就上次分析的简易Ajax框架一篇没能给你带来什么,只能告诉你,或者是对Ajax的进一步理解,现在用那个框架实现简单的加减乘除运算,希望能给你带来点什么
显示的页面:
Calculate.aspx
<%@ Page language="c#" Codebehind="Calculate.aspx.cs" AutoEventWireup="false" Inherits="AjaxFrmClass.Calculate.Calculate" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>Calculate</title>
<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" Content="C#">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<script language="jscript" src="../Javascript/CallBackObject.js"></script>
<script language="jscript">
function DoCalculate()
{
var f = document.Form1;
if((f.num1.value !="") && (f.num2.value!= ""))
{
var cbo = new CallBackObject();
cbo.OnComplete = Cbo_Complete;
cbo.onError = Cbo_Error;
cbo.DoCallBack("Ajax.aspx?num1="+f.num1.value+"&num2="+f.num2.value+"&drpSelect="+f.drpSelect.value);
}
else if(f.num1.value == "")
{
document.getElementById("lblMessage").innerHTML = "第一个数不能为空!";
}
else if(f.num2.value == "")
{
document.getElementById("lblMessage").innerHTML = "第二个数不能为空!";
}
}
function Cbo_Complete(responseText, responseXML)
{
alert(responseText);
}
function Cbo_Error()
{
alert(responseText);
}
</script>
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
<TABLE id="Table1" style="Z-INDEX: 105; LEFT: 224px; WIDTH: 192px; POSITION: absolute; TOP: 216px; HEIGHT: 80px"
cellSpacing="1" cellPadding="1" width="192" border="1">
<TR>
<TD bgcolor="#ff9933" style="WIDTH: 44px; HEIGHT: 7px" colSpan="4">
<DIV style="DISPLAY: inline; WIDTH: 224px; HEIGHT: 18px" ms_positioning="FlowLayout">基于Ajax的简单计算</DIV>
</TD>
</TR>
<TR>
<TD style="WIDTH: 56px; HEIGHT: 24px">
<INPUT id="num1" style="WIDTH: 59px; HEIGHT: 22px" type="text" size="4"></TD>
<TD style="WIDTH: 46px; HEIGHT: 24px">
<SELECT id="drpSelect" style="WIDTH: 50px">
<OPTION value="jia" selected>+</OPTION>
<OPTION value="jian">-</OPTION>
<OPTION value="cheng">*</OPTION>
<OPTION value="chu">/</OPTION>
</SELECT>
</TD>
<TD style="WIDTH: 50px; HEIGHT: 24px">
<INPUT id="num2" style="WIDTH: 48px; HEIGHT: 22px" type="text" size="2"></TD>
<TD style="HEIGHT: 24px">
<INPUT id="btnCalculate" type="button" onclick="DoCalculate()" value="计算"></TD>
</TR>
<TR>
<TD style="WIDTH: 56px" colSpan="4">
<DIV id="lblMessage" style="DISPLAY: inline; WIDTH: 224px; HEIGHT: 16px" ms_positioning="FlowLayout"></DIV>
</TD>
</TR>
</TABLE>
</form>
</body>
</HTML>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>Calculate</title>
<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" Content="C#">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<script language="jscript" src="../Javascript/CallBackObject.js"></script>
<script language="jscript">
function DoCalculate()
{
var f = document.Form1;
if((f.num1.value !="") && (f.num2.value!= ""))
{
var cbo = new CallBackObject();
cbo.OnComplete = Cbo_Complete;
cbo.onError = Cbo_Error;
cbo.DoCallBack("Ajax.aspx?num1="+f.num1.value+"&num2="+f.num2.value+"&drpSelect="+f.drpSelect.value);
}
else if(f.num1.value == "")
{
document.getElementById("lblMessage").innerHTML = "第一个数不能为空!";
}
else if(f.num2.value == "")
{
document.getElementById("lblMessage").innerHTML = "第二个数不能为空!";
}
}
function Cbo_Complete(responseText, responseXML)
{
alert(responseText);
}
function Cbo_Error()
{
alert(responseText);
}
</script>
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
<TABLE id="Table1" style="Z-INDEX: 105; LEFT: 224px; WIDTH: 192px; POSITION: absolute; TOP: 216px; HEIGHT: 80px"
cellSpacing="1" cellPadding="1" width="192" border="1">
<TR>
<TD bgcolor="#ff9933" style="WIDTH: 44px; HEIGHT: 7px" colSpan="4">
<DIV style="DISPLAY: inline; WIDTH: 224px; HEIGHT: 18px" ms_positioning="FlowLayout">基于Ajax的简单计算</DIV>
</TD>
</TR>
<TR>
<TD style="WIDTH: 56px; HEIGHT: 24px">
<INPUT id="num1" style="WIDTH: 59px; HEIGHT: 22px" type="text" size="4"></TD>
<TD style="WIDTH: 46px; HEIGHT: 24px">
<SELECT id="drpSelect" style="WIDTH: 50px">
<OPTION value="jia" selected>+</OPTION>
<OPTION value="jian">-</OPTION>
<OPTION value="cheng">*</OPTION>
<OPTION value="chu">/</OPTION>
</SELECT>
</TD>
<TD style="WIDTH: 50px; HEIGHT: 24px">
<INPUT id="num2" style="WIDTH: 48px; HEIGHT: 22px" type="text" size="2"></TD>
<TD style="HEIGHT: 24px">
<INPUT id="btnCalculate" type="button" onclick="DoCalculate()" value="计算"></TD>
</TR>
<TR>
<TD style="WIDTH: 56px" colSpan="4">
<DIV id="lblMessage" style="DISPLAY: inline; WIDTH: 224px; HEIGHT: 16px" ms_positioning="FlowLayout"></DIV>
</TD>
</TR>
</TABLE>
</form>
</body>
</HTML>
Calculate.aspx .cs里面不需要做处理,因为我们要的是客户端的异步回掉
解释下:<script language="jscript" src="../Javascript/CallBackObject.js"></script> 这里指代的CallBackObject.js就是另篇文章简易Ajax框架,你可以讲代码Copy出来就可以了
以上是客户端,Ajax已经发送请求到服务器端了,下面看看服务器端的处理过程
Ajax.aspx.cs
using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
namespace AjaxFrmClass.Calculate
{
/// <summary>
/// Ajax 的摘要说明。
/// </summary>
public class Ajax : System.Web.UI.Page
{
private void Page_Load(object sender, System.EventArgs e)
{
string number1 = HttpContext.Current.Request.QueryString["num1"];
string number2 = HttpContext.Current.Request.QueryString["num2"];
string fuhao = HttpContext.Current.Request.QueryString["drpSelect"];
int i = 0;
int j = 0;
bool status = true;
if(number1 != null)
{
try
{
i = int.Parse(number1);
}
catch(Exception errExce)
{
Response.Write(errExce.Message);
}
}
if(number2 != null)
{
try
{
j = int.Parse(number2);
}
catch(Exception errExce1)
{
Response.Write(errExce1.Message);
}
}
if(status)
{
switch(fuhao)
{
case "jia":
Response.Write(i+j);
break;
case "jian":
Response.Write(i-j);
break;
case "cheng":
Response.Write(i*j);
break;
default:
Response.Write(i/j);
break;
}
Response.End();
}
}
#region Web 窗体设计器生成的代码
override protected void OnInit(EventArgs e)
{
//
// CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
//
InitializeComponent();
base.OnInit(e);
}
/// <summary>
/// 设计器支持所需的方法 - 不要使用代码编辑器修改
/// 此方法的内容。
/// </summary>
private void InitializeComponent()
{
this.Load += new System.EventHandler(this.Page_Load);
}
#endregion
}
}
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
namespace AjaxFrmClass.Calculate
{
/// <summary>
/// Ajax 的摘要说明。
/// </summary>
public class Ajax : System.Web.UI.Page
{
private void Page_Load(object sender, System.EventArgs e)
{
string number1 = HttpContext.Current.Request.QueryString["num1"];
string number2 = HttpContext.Current.Request.QueryString["num2"];
string fuhao = HttpContext.Current.Request.QueryString["drpSelect"];
int i = 0;
int j = 0;
bool status = true;
if(number1 != null)
{
try
{
i = int.Parse(number1);
}
catch(Exception errExce)
{
Response.Write(errExce.Message);
}
}
if(number2 != null)
{
try
{
j = int.Parse(number2);
}
catch(Exception errExce1)
{
Response.Write(errExce1.Message);
}
}
if(status)
{
switch(fuhao)
{
case "jia":
Response.Write(i+j);
break;
case "jian":
Response.Write(i-j);
break;
case "cheng":
Response.Write(i*j);
break;
default:
Response.Write(i/j);
break;
}
Response.End();
}
}
#region Web 窗体设计器生成的代码
override protected void OnInit(EventArgs e)
{
//
// CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
//
InitializeComponent();
base.OnInit(e);
}
/// <summary>
/// 设计器支持所需的方法 - 不要使用代码编辑器修改
/// 此方法的内容。
/// </summary>
private void InitializeComponent()
{
this.Load += new System.EventHandler(this.Page_Load);
}
#endregion
}
}
同样,Ajax.aspx客户端中也不要做任何的处理,因为请求传到了服务器端,只要在服务器端做处理就行了
做到这步,如果你是按照我的步骤往下走的,Ctrl + F5 你就成功了,假如还有错你得好好检查,面对脚本错误不用着急,一些基本的错误还是会看出来的