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="贊" 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 == 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" 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 <= 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 onload="go()"> </body> </html>
注意：一般瀏覽器支持JSON.parse,不支持的引用json2,js就可以了