不论是看电视剧还是新闻之类的视频,出于读者或者用户的某种对于视频的感受,我们可以点击一下发表一下自己的意见,比如说博客上的“顶”或者“赞”,“踩”,影视剧的评判“赞”,“踩”等等,还有优酷、土豆视频播放器下面的发表评论等等都是我们常见的东西。
细心的你可能会发现,当我们点击赞、踩或者发现评论的时候页面并不会全部刷新或者说页面重新加载,只是赞或者踩的次数加一又或者评论的数目加多并且发布出来而已。
这是怎么实现的,没错这就是ajax技术,其实随处可见ajax技术,只要我们在刷新的时候不是整个页面的刷新,那么用到的就是ajax技术,这样的技术考虑了人的心理,谁都不希望自己点个赞或者踩视频从新播放吧。
1.实例展现
下面以播放视频赞或者踩为例,来看看ajax是如何实现这一功能的吧。
Ø 首先建立HTML页,命名为videoView,代码如下:
<span style="font-family:KaiTi_GB2312;font-size:18px;"><strong><strong><span style="font-family:KaiTi_GB2312;font-size:18px;"><!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <Meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style type="text/css"> video { width:300px; height:200px; } </style> <script src="js/ajax.js" type="text/javascript"></script> <script type="text/javascript"> function zan() { var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); //创建XMLHTTP对象,考虑兼容性。XHR xmlhttp.open("POST","ZanCai.ashx?action=Zan",true); //“准备”向服务器的GetDate1.ashx发出Post请求(GET可能会有缓存问题)。这里还没有发出请求 //DRY:不要复制粘贴代码 //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; //responseText为服务器端返回的报文正文 } else { alert("AJAX服务器返回错误!"); } } } //不要以为if (xmlhttp.readyState == 4) {在send之前执行!!!! xmlhttp.send(); //这时才开始发送请求。并不等于服务器端返回。请求发出去了,我不等!去监听onreadystatechange吧! } function cai() { ajax("ZanCai.ashx?action=Cai",function (resText) { document.getElementById("CaiCount").innerHTML = resText; }); } </script> </head> <body> <video src="Flash/video.mp4" autoplay controls></video> <!--<form action="video.ashx" method="post">--> <!--<input type="hidden" name="IsPostBack" value ="true" />--> <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> <!--</form>--> </body> </html> </span></strong></strong></span>
Ø 根据页面处理情况,建立一般处理程序:
<span style="font-family:KaiTi_GB2312;font-size:18px;"><strong><strong><span style="font-family:KaiTi_GB2312;font-size:18px;">using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace videoFlash { /// <summary> /// ZanCai 的摘要说明 /// </summary> public class ZanCai : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; string action = context.Request["action"]; if (action == "Zan") { 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 { 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); } } public bool IsReusable { get { return false; } } } }</span></strong></strong></span>
Ø 之后根据一般处理程序中需要建立数据库的连接,从而建立sqlHelper:
<span style="font-family:KaiTi_GB2312;font-size:18px;"><strong><strong><span style="font-family:KaiTi_GB2312;font-size:18px;">using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Configuration; using System.Data; using System.Data.sqlClient; namespace videoFlash { public static class sqlHelper { public static readonly string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString; //定义数据库连接 public static sqlConnection OpenConnection() { sqlConnection conn = new sqlConnection(constr); conn.Open(); return conn; } //返回的是对象 public static object ExecuteScalar(string cmdText)//,params sqlParameter[] parameters { using (sqlConnection conn = new sqlConnection(constr)) { conn.Open(); return ExecuteScalar(conn,cmdText); } } } }</span></strong></strong></span>
Ø 配置文件
<span style="font-family:KaiTi_GB2312;font-size:18px;"><strong><strong><span style="font-family:KaiTi_GB2312;font-size:18px;"><?xml version="1.0" encoding="utf-8"?> <!-- 有关如何配置 ASP.NET 应用程序的详细信息,请访问 http://go.microsoft.com/fwlink/?LinkId=169433 --> <configuration> <system.web> <compilation debug="true" targetFramework="4.5" /> <httpRuntime targetFramework="4.5" /> </system.web> <connectionStrings> <add name ="constr" connectionString="server=.;database=login;uid=sa;pwd=123456;"/> </connectionStrings> </configuration></span></strong></strong></span>
2.实例讲解
Ø Html页
这里我们采用的是ajax的封装,代码如下:
<span style="font-family:KaiTi_GB2312;font-size:18px;"><strong><span style="font-family:KaiTi_GB2312;font-size:18px;">function ajax(url,onsuccess) { var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); //创建XMLHTTP对象,考虑兼容性。XHR xmlhttp.open("POST",url,true); //“准备”向服务器的GetDate1.ashx发出Post请求(GET可能会有缓存问题)。这里还没有发出请求 //DRY:不要复制粘贴代码 //AJAX是异步的,并不是等到服务器端返回才继续执行 xmlhttp.onreadystatechange = function () { if (xmlhttp.readyState == 4) //readyState == 4 表示服务器返回完成数据了。之前可能会经历2(请求已发送,正在处理中)、3(响应中已有部分数据可用了,但是服务器还没有完成响应的生成) { if (xmlhttp.status == 200) //如果Http状态码为200则是成功 { onsuccess(xmlhttp.responseText); } else { alert("AJAX服务器返回错误!"); } } } //不要以为if (xmlhttp.readyState == 4) {在send之前执行!!!! xmlhttp.send(); //这时才开始发送请求。并不等于服务器端返回。请求发出去了,我不等!去监听onreadystatechange吧! }</span></strong></span>
从上节课的讲解,我们可以看出,ajax基本上的处理流程是一样的,不同的是交于谁处理,以及如何返回的报文,故而将这两项设为参数,调用时根据具体的情况进行参数传入即可,这样实现了ajax很好地重用性。
设计中两个按钮onclick事件响应相应的操作进而对其进行实现。
Ø 与数据库进行交互,获取数据库中的数据
根据传入的action来判断点击的是赞还是踩,进而去获取对应数据库中的数据。
Ø sqlhelper建立数据库连接
Ø 配置文件
Ø 效果图:
3. 总结
以前看视频下面的踩或者赞,从来没有想过自己有一天可以做出来,感兴趣可以自己去试试。看着自己的一点点进步,觉得苦点累点都是值得的,学习仍在继续,为自己加油~