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 == 4) //readyState==4表示服务器返回数据了额，之前可能经历 2（请求已发生，正在处理中）3表示（响应中有部分数据可以用，拂去其还没有完成响应的生成） { if (xmlhttp.status == 200) //状态码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="赞" οnclick="zan()"/><label id="ZanCount"></label></p> <p><input type="button" name="Cai" value="踩"οnclick="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 == 4) //readyState==4表示服务器返回数据了额，之前可能经历 2（请求已发生，正在处理中）3表示（响应中有部分数据可以用，拂去其还没有完成响应的生成） { if (xmlhttp.status == 200) //状态码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" οnblur="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 <= 0) { 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=11,Email="111@q.com"}); list.Add(new Person { Name = "aa", Age = 11, Email = "221@q.com" }); list.Add(new Person { Name = "bb", Age = 11, 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 = 0; i < person.length; i++) { var p=person[i]; alert("姓名："+p.Name+"年龄："+p.Age+"邮箱："+p.Email); } }); } </script> </head> <body οnlοad="go()"> </body> </html>
注意：一般浏览器支持JSON.parse,不支持的引用json2,js就可以了