不论是看电视剧还是新闻之类的视频，出于读者或者用户的某种对于视频的感受，我们可以点击一下发表一下自己的意见，比如说博客上的“顶”或者“赞”，“踩”，影视剧的评判“赞”，“踩”等等，还有优酷、土豆视频播放器下面的发表评论等等都是我们常见的东西。
细心的你可能会发现，当我们点击赞、踩或者发现评论的时候页面并不会全部刷新或者说页面重新加载，只是赞或者踩的次数加一又或者评论的数目加多并且发布出来而已。
这是怎么实现的，没错这就是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. 总结
以前看视频下面的踩或者赞，从来没有想过自己有一天可以做出来，感兴趣可以自己去试试。看着自己的一点点进步，觉得苦点累点都是值得的，学习仍在继续，为自己加油~
原文链接：https://www.f2er.com/ajax/163924.html