asp.net ajax Jquery 简单实现
项目结构：
1.Page1.html (简单的用XMLHTTP 对象无刷新实现获取服务器时间并显示)
<!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>ajax实例1，页面无刷新获取并显示服务器端的时间</title>
<script language="javascript" type="text/javascript">
function btnGetTime_onclick() {
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //创建XMLHTTP对象
if (!xmlhttp) {
alert("创建xmlhttp对象失败!");
return false;
}
xmlhttp.open("POST", "Ajax1.ashx?ds" + new Date(), false); //准备向服务器的Ajax1.ashx发出post请求
//XMLHTTP默认的不是同步请求的，open方法在这里并没有立即去执行，它是需要最后通过xmlhttp.send()方法发送请求
//然后监听onreadystatechange事件，异步获得请求结果
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4) {
if (xmlhttp.status == 200) {//200表示成功
document.getElementById("txtTimeValue").value = xmlhttp.responseText; //xmlhttp.responseText为服务器Ajax1.ashx页面返回的时间
}
else {
alert("服务器返回错误！");
}
}
}
xmlhttp.send();//发送http请求
}
</script>
</head>
<body>
<p>
<input id="txtTimeValue" type="text" />
<input id="btnGetTime" type="button" value="获取时间" onclick="btnGetTime_onclick()" /></p>
</body>
</html>
2.Ajax1.ashx 一般处理页 (响应 page1.htm和Page2.html中的XMLHTTP请求，并返回服务器时间)
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace AjaxProj
{
///<summary>
/// Ajax1 的摘要说明
///</summary>
public class Ajax1 : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
context.Response.Write(DateTime.Now.ToString());//返回服务器当前时间
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
3.Page2.htm (Jquery Ajax 实现无刷新获取并显示服务器时间)
<!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>ajax实例2，JQuery 实现 页面无刷新获取并显示服务器端的时间</title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(function () {
$("#btnGetTime").click(function () {
$.post("Ajax1.ashx", CallBack);//发送post请求
});
});
//回调函数
function CallBack(data, status) {//data:返回值,status:请求处理的状态
if (status == "success") {//success，处理成功
$("#txtTimeValue").val(data);
}
else {
alert("发生错误！");
}
}
</script>
</head>
<body>
<input id="txtTimeValue" type="text" />
<input id="btnGetTime" type="button" value="获取时间"/></p>
</body>
</html>
4.Page3.htm (用户注册时，输入用户名后，验证用户名是否已被注册！)
<!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>ajax实例3，JQuery 实现 验证用户名是否已被注册！</title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(function () {
$("#txtUserName").blur(function () {
var userName = $("#txtUserName").val(); //获得用户输入的用户名
$.post("Ajax3.ashx", { "name": userName }, TestCallBack);
});
});
//ajax post提交的回调函数,data表示服务器返回的数据;status表示请求处理的状态，success表示处理成功
function TestCallBack(data, status) {
if (status == "success") {//处理成功
if (data == "0") {//用户名未被注册，可用
$("#spnTipInfo").html("<span style='color:green;'>该用户名可用!</span>");
}
else if (data == "1")//用户名被使用，不可用
{
$("#spnTipInfo").html("<span style='color:red;'>该用户名已被使用，请使用其它用户名!</span>");
}
else {
$("#spnTipInfo").html("<span style='color:red;'>您输入的用户名无意义，请重新输入!</span>");
}
}
else {
alert("请求发生了错误！");
}
}
</script>
</head>
<body>
<p>用户名：<input id="txtUserName" type="text" /><span id="spnTipInfo"></span></p>
<p>密 码: <input id="Password1" type="password" /></p>
<p>确认密码：<input id="Password2" type="password" /></p>
</body>
</html>
5.Ajax3.ashx (相应Page3.htm的XMLHTTP 请求，验证Page3.htm提交的用户是否已被注册并返回结果)
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace AjaxProj
{
///<summary>
/// Ajax3 验证用户名是否可用
///</summary>
public class Ajax3 : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string _UserName = context.Request["name"];
string _outValue = "2";//无意义的用户名
if (!string.IsNullOrEmpty(_UserName.Trim()))
{
if (IsExt(_UserName))//如果存在
{
_outValue = "1";
}
else
{
_outValue = "0";//不存在
}
}
context.Response.Write(_outValue);
}
///<summary>
/// 验证用户名是否已被注册
///</summary>
///<param name="_name">用户名</param>
///<returns>true</returns>
private bool IsExt(string _name)
{
bool IsExt = false;
//这里只做为演示使用，实际应该连接数据库，判断数据库中是否存在当前用户名的用户
List<string> NameList = new List<string>();
NameList.Add("aaaaa");
NameList.Add("bbbbb");
NameList.Add("ccccc");
NameList.Add("ddddd");
NameList.Add("eeeee");
NameList.Add("fffff");
if (NameList.Contains(_name))
{
IsExt = true;
}
return IsExt;
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
浙公网安备 33010602011771号