1、Ajax需求,例子。 -----------------------ViewVideo.ashx contex.Response.ContentType="text/html"; string strIsPostBack=context.Request["IsPostBack"]; bool isPostBack=Convert.ToBoolean(context.Request["IsPostBack"]); if(string.IsNullOrEmpty(strIsPostBack)) { ispostBack=false; } else { isPostBack=Convert.ToBoolean(strIsPostBack); } if(isPostBack)//如果是返回来的页面，则要统计 {//投票 string zan=context.Request["Zan"]; if(string.IsNullOrEmpty(zan)) { SqlHelper.ExecuteNonQuery("Update T_ZanCai set CaiCount=CaiCount+1"); context.Response.Redirect("ViewVideo.ashx"); } else { SqlHelper.ExecuteNonQuery("Update T_ZanCai set ZanCount=ZanCount+1"); context.Response.Redirect("ViewVideo.ashx"); } } else//如果只是进入这个页面，直接读出来。 { int zanCount=(int)SqlHelper.ExecuteScalar("select top 1 ZanCount from T_ZanCai"); int caiCount=(int)SqlHelper.ExecuteScalar("select top 1 CaiCount from T_ZanCai"); var data=new {ZanCount=zanCount,CaiCount=caiCount}; string html=CommonHelper.RenderHtml("ViewVideo.htm",data); context.Response.Write(html); } -----------------------ViewVideo.htm <body> <video src="diaosi.mp4" autoplay controls></video>//设置自动播放，html5里面的 <form action="ViewVideo.ashx" method="post"> <input type="hidden" name="IsPostBack" value="true"/>//设置隐藏字段，判断赞和踩 <p><input type="submit" name="Zan" value="赞"/>$Model.ZanCount</p> <p><input type="submit" name="Cai" value="踩"/>$Model.CaiCount</p> </form> </body> ----------------------Test1.mdf ZanCount int 允许为空 CaiCount int 允许为空 //这样就实现了赞和踩，但是。每点一次都要刷新重新进入视频。要实现Ajax刷新。 2、在HTML中使用JavaScript创建，XMLHTTPRequest对象来向服务器发出请求以及获得返回的数据。就像 JavaScript版的WebClient一样，在页面中由XMLHTTPRequest来发出，Http的请求和获得服务器的返回数据， 这样页面就不会刷新了。XMLHTTPRequest是AJAX的核心对象。 3、XMLHTTPRequest对象的用法。 ------------------------------------------------------ViewVideo2.htm重新弄个页面 <head> <script type="text/javascript"> function zan() { var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject ('Microsoft.XMLHTTP'); //创建XMLHTTP对象，考虑兼容性。XHR，不同浏览器创建xmlhttprequest不一样， 这种方法是兼容好多浏览器的创建。 xmlhttp.open("POST", "ZanCai.ashx?action=Zan", true); //“准备”向服务器的GetDate1.ashx发出Post请求（GET可能会有缓存问题）。这里还没有发出请求 //DRY：不要复制粘贴代码 要尽量封装成js库。 //AJAX是异步的，并不是等到服务器端返回才继续执行 xmlhttp.onreadystatechange = function (){ if (xmlhttp.readyState == 4) //readyState == 4 表示服务器返回完成数据了。之前可能会经历2（请求已发送，正在处理中） 、3（响应中已有部分数据可用了，但是服务器还没有完成响应的生成） { if (xmlhttp.status == 200) //如果Http状态码为200则是成功 { //alert(xmlhttp.responseText); document.getElementById("ZanCount").innerHTML = xmlhttp.responseText; //只有返回成功了，并且200才进行处理。 //responseText为服务 器端返回的报文正文 } else { alert("AJAX服务器返回错误！"); } } } //不要以为if (xmlhttp.readyState == 4) {在send之前执行！！！！ xmlhttp.send(); //这时才开始发送请求。并不等于服务器端返回。请求发出去了，我不等！去监听 onreadystatechange吧！ } </script> </head> <body> <video src="diaosi.mp4" autoplay controls></video>//设置自动播放，html5里面的 <p> <input type="submit" name="Zan" value="赞" onclick="zan()"/>//加入一个onclick <label id="ZanCount"></label> </p> <p> <input type="submit" name="Cai" value="踩"/> <label id="CaiCount"> </lable> </p> </body> ---------------------------------------------ZanCai.ashx string action=context.Request["action"]; if(action=="Zan") { SqlHelper.ExecuteNonQuery("Update T_ZanCai set ZanCount=ZanCount+1");//加1 int zanCount=(int)SqlHelper.ExecuteScalar("select top 1 ZanCount from T_ZanCai");//取最新 context.Response.Write(zanCount); } else { 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); } 4、封装Ajax请求。不用写那么一堆。可以封装Ajax库。 添加文件夹，建立JS文件。 ------------------------------------------ajax.js function ajax(data,onsuccess){ //onsuccess是指向function的变量，类似于C#委托，data是指向一个字符串 function ajax(url,onsuccess){//先假定onsuceess就只有一个参数，就是一个返回的报文。 var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject ('Microsoft.XMLHTTP'); xmlhttp.open("POST", "url", true); xmlhttp.onreadystatechange = function (){ if (xmlhttp.readyState == 4) { if (xmlhttp.status == 200) { //onsuccess();//处理成功后的逻辑是变的。 //document.getElementById("ZanCount").innerHTML = xmlhttp.responseText; onsuccess(xmlhttp.responseText); //假定onsuceess就只有一个参数，就是一个返回的报文。则可以这样写，直接把报文传过去 。 } else { alert("AJAX服务器返回错误！"); } } } xmlhttp.send(); } } 5、做Cai的Ajax-----------------------------------ViewVideo2.htm <script type="text/javascript" src="js/ajax.js">//路径为什么不../js/ajax.js </script> function cai() { ajax("ZanCai.ashx?action=Cai",function(resText){ document.getElementById("CaiCount").innerHTML=resText;});//为什么不../ZanCai.ashx? } ----------------------<input type="button" name="Cai" value="踩" onclick="cai()"> 6、5中的路径问题，为什么不同的文件夹，调用的时候没有..呢? <video src="diaosi.mp4" autoplay controls></video>//给我我这个文件夹下的diaosi.mp4