Ajax是局部刷新，并不影响页面其他的操作
实例1：本测试是演示利用Ajax在一个页面播放视频，点击赞和踩按钮，视频不会受影响,
新建一个ajaxTest.html页面
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript">
function zan()
{
var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');//创建xmlhttp对象，考虑兼容性
xmlhttp.open("POST", "AjaxTest.ashx?action=Zan", true);//准备向服务器发出post请求
xmlhttp.onreadystatechange = function ()
{
if (xmlhttp.readyState == ) //readyState==4表示服务器返回数据了额，之前可能经历 2（请求已发生，正在处理中）3表示（响应中有部分数据可以用，拂去其还没有完成响应的生成）
{
if (xmlhttp.status == ) //状态码200位成功
{
document.getElementById("ZanCount").innerHTML = xmlhttp.responseText;//responseText是服务器返回的报文正文
}
else {
alert("ajax服务器返回错误");
}
}
}
xmlhttp.send();//这时才发送请求，发送完请求，并一定马上服务器响应，然后看上面的onreadystatechange状态，发送完继续执行下面的操作，不等服务器
} function cai()
{
ajax("AjaxTest.ashx?action=Cai", function (reText) {
document.getElementById("CaiCount").innerHTML = reText;
})
}
</script>
</head>
<body>
<video src="video.mp4" controls="controls"></video>
<p><input type="button" name="Zan" value="赞" onclick="zan()"/><label id="ZanCount"></label></p>
<p><input type="button" name="Cai" value="踩"onclick="cai()"/><label id="CaiCount"></label></p>
</body>
</html>
然后新建一个后台处理程序AjaxTest.ashx
string action = context.Request["action"];
if (action == "Zan") //赞加1
{
SqlHelper.ExecuteNonQuery("Update T_ZanCai set ZanCount=ZanCount+1");
int zanCount = (int)SqlHelper.ExecuteScalar("select top 1 ZanCount from T_ZanCai");
context.Response.Write(zanCount);
}
else//踩加1
{
SqlHelper.ExecuteNonQuery("Update T_ZanCai set CaiCount=CaiCount+1");
int caiCount = (int)SqlHelper.ExecuteScalar("select top 1 CaiCount from T_ZanCai");
context.Response.Write(caiCount);
}
数据库test,新建表T_ZanCai
上面的ajax都有很多相似的部分，可以吧ajax封装起来
新建js文件夹，下新建ajax.js
function ajax(url, onsuccess)
{
var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');//创建xmlhttp对象，考虑兼容性 xmlhttp.open("POST", url, true);//准备向服务器发出post请求
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == ) //readyState==4表示服务器返回数据了额，之前可能经历 2（请求已发生，正在处理中）3表示（响应中有部分数据可以用，拂去其还没有完成响应的生成）
{
if (xmlhttp.status == ) //状态码200位成功
{
//responseText是服务器返回的报文正文
onsuccess(xmlhttp.responseText);
}
else {
alert("ajax服务器返回错误");
}
}
}
xmlhttp.send();//这时才发送请求，发送完请求，并一定马上服务器响应，然后看上面的onreadystatechange状态，发送完继续执行下面的操作，不等服务器
}
实例2：简单的用户注册页面，ajax检测用户名是否已被注册，没有注册功能，只是检测用户名是否合法
注册页面Register.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>用户注册用户名ajax检测是否已用</title>
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript">
function checkUserName()
{
var userName = document.getElementById("UserName").value;
ajax("checkuserName.ashx?UserName=" + userName, function (resText) {
if (resText == "ok")
{
document.getElementById("UserNameMsg").innerHTML="用户名可用";
}
else if(resText == "error")
{
document.getElementById("UserNameMsg").innerHTML = "用户名不可用";
}
else if (resText == "forbidden")
{
document.getElementById("UserNameMsg").innerHTML = "用户名含有禁词，请换用其他用户名";
}
});
} </script>
</head>
<body>
<form action="Register.ashx">
用户名:<input type="text" id="UserName" name="UserName" onblur="checkUserName()"/><span id="UserNameMsg" style="color:red"></span><br>
密码:<input type="password"/>
</form> </body>
</html>
ajax 后台处理checkUserName.ashx
string userName=context.Request["UserName"];
if(userName.Contains("国家") || userName.Contains("管理员"))
{
context.Response.Write("forbidden");
}
int count = (int)SqlHelper.ExecuteScalar("select count(*) from tab_user where name=@UserName", new SqlParameter("@UserName", userName));
if (count <= )
{
context.Response.Write("ok");
}
else
{
context.Response.Write("error");
}
实例三：Json的使用：
C# 将.net对象转为json字符串，然后在前台页面js解析json为javascript对象使用
新建Person.cs类
public class Person
{
public string Name { get; set; }
public int Age { get; set; }
public string Email { get; set; }
}
jsonTest.ashx代码：
List<Person> list =new List<Person>();
list.Add(new Person { Name="hyb",Age=,Email="111@q.com"});
list.Add(new Person { Name = "aa", Age = , Email = "221@q.com" });
list.Add(new Person { Name = "bb", Age = , Email = "23331@q.com" });
//将对象序列号为json字符串的方法
JavaScriptSerializer jss=new JavaScriptSerializer();
string json=jss.Serialize(list);
//string json = jss.Serialize(new Person { Name="哈哈",Age=23,Email="12345@qq.com"}); context.Response.Write(json);
jsonTest.html前台代码：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript" src="js/ajax.js"></script>
<script src="js/json2.js"></script>
<script type="text/javascript" >
function go()
{
ajax("jsonTest.ashx", function (resText) {
//把json字符串转为javascrip对象
var person = JSON.parse(resText);
for (var i = ; i < person.length; i++)
{
var p=person[i];
alert("姓名："+p.Name+"年龄："+p.Age+"邮箱："+p.Email);
}
});
} </script>
</head>
<body onload="go()">
</body>
</html>
注意：一般浏览器支持JSON.parse,不支持的引用json2,js就可以了