htmhtml:
<!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>
<title></title>
<script src="Scripts/jquery-1.9.1.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
function Button1_onclick() {
//创建一个浏览器通用的XMLHTTPRequest对象
var request = false;
try
{
request = new XMLHttpRequest();
}
catch (trymicrosoft)
{
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (othermicrosoft)
{
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (failed)
{
request = false;
}
}
}
if (!request) {
alert("Error initializing XMLHttpRequest!");
}
// else {
// alert("OK");
// }
var amount = document.getElementById("Text1").value;
var moneytype = document.getElementById("Select1").value;
request.open("POST", "huilv.ashx?amount="+amount+"&moneytype=" + moneytype+"&ts="+new Date(), true); //准备向服务器的GetDate1.ashx发送请求,最后&ts防止有缓存的，ajax一般不用缓存
//XMLHTTP默认（也推荐）不是同步请求的，也就是open方法并不像webClient的DownloadString那样把服务器返回的数据拿到才返回，是异步的，因此需要监听onreadystatechange事件
request.onreadystatechange = function () {
if (request.readyState == 4) {
if (request.status == 200) {//如果状态是200表示成功
document.getElementById("Text2").value = request.responseText;//responseText属性为服务器返回的数据
}
else {
alert("Ajax服务器返回错误！");
}
}
}
request.send();//这时才开始发送请求
}
//使用jQuery版本ajax
function Button2_onclick() {
var amount = $("#Text1").val();
var moneytype = $("#Select1").val();
//通过jquery的post方法来调用ajax技术
//第一个参数是要访问的页面，第二个参数是传递的数据，第三个参数是匿名函数
$.post("huilv.ashx",{"amount":amount,"moneytype":moneytype}, function (data,textStatus) {
if (textStatus = "success") {
$("#Text2").val(data);
}
else {
alert("ajax失败");
}
});
}
</script>
</head>
<body>
<input type="text" id="Text1"/>
<select id="Select1" name="D1">
<option value="1">美元</option>
<option value="2">日元</option>
<option value="3">港币</option>
</select>
<input type="button" id="Button1" value="计算" onclick="Button1_onclick()" />
<input type="button" id="Button2" value="jQuery版Ajax" onclick="Button2_onclick()" />
<input type="text" id="Text2"/>
</body>
</html>
ashx:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace AJax
{
/// <summary>
/// huilv 的摘要说明
/// </summary>
public class huilv : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
//一个下拉列表（美元，日元，港币），一个按钮，点击按钮在一个span中显示转换后的金额，汇率计算在服务器端完成，假设汇率（人民币/外币）:7 10
string amount = context.Request["amount"];
string moneytype = context.Request["moneytype"];
int iAmount = Convert.ToInt32(amount);
if (moneytype == "1")//美元
{
context.Response.Write(iAmount / 7);
}
else if (moneytype=="2")
{
context.Response.Write(iAmount * 10);
}
else if (moneytype=="3")
{
context.Response.Write(iAmount);
}
}
public bool IsReusable
{
get
{
return false;
}
}
}
}