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
