使用Ajax做简单的页面局部刷新视频点赞和检测用户名

一个菜鸟的学习笔记 QQ:2529354857

Ajax 即“AsynchronousJavascriptAndXML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。Ajax = 异步JavaScript和XML（标准通用标记语言的子集）。Ajax 是一种用于创建快速动态网页的技术。Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。

其实很简单，我们平常在看视频的时候，给视频点赞只会刷新赞的数量，并不影响视频的播放，这就是局部刷新。还有就是在注册表单的时候，不会在我们填完所有信息之后点击注册提示我们用户名不可用，而是在我们填完用户名之后就立即进行相关提示，这也用到了Ajax.

Ajax代码：(已经封装成函数的)

function ajax(url,onsuccess)//‘url’：想要将请求发现的处理程序  'onsuccess':委托函数，用于返回值
{
    var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); //创建XMLHTTP对象，考虑兼容性
    xmlhttp.open("POST", url, true); //“准备”向服务器的URL.ashx发出Post请求（GET可能会有缓存问题）。这里还没有发出请求
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4) //readyState == 4 表示服务器返回完成数据了。之前可能会经历
            //2（请求已发送，正在处理中）、3（响应中已有部分数据可用了，但是服务器还没有完成响应的生成）
        {
            if (xmlhttp.status == 200) //如果状态码为200则是成功
            {
                //alert(xmlhttp.responseText);
                onsuccess(xmlhttp.responseText);
                //document.getElementById("ZanCount").innerHTML = xmlhttp.responseText;
            }
            else {
                alert("AJAX服务器返回错误！");
            }
        }
    }
    //不要以为if (xmlhttp.readyState == 4) 在send之前执行！！！！
    xmlhttp.send()
    //发出请求后不等服务器返回数据，就继续向下执行，所以不会阻塞，界面就不卡了，
    // 这就是AJAX中“A”的含义“异步”。试着在ashx加一句Thread.Sleep(3000);
 }

视频点赞：

**思路：**点击赞或者踩，调用JS函数，使用AJax对赞或踩的数量进行局部刷新

主要代码：

Video.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="js/ajax.js"></script>
    <script type="text/javascript">
        function zan()  //没有封装的的Ajax
        {
            var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); 
            xmlhttp.open("POST", "VideoAjax.ashx?Action=zan", true); 
            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4) 
                {
                    if (xmlhttp.status == 200) //如果状态码为200则是成功
                    {
                        //alert(xmlhttp.responseText);
                        document.getElementById("ZanCount").innerHTML = xmlhttp.responseText;
                    }
                    else {
                        alert("AJAX服务器返回错误！");
                    }
                }
            }
            //不要以为if (xmlhttp.readyState == 4) {在send之前执行！！！！
            xmlhttp.send(); //这时才开始发送请求
          
        }
        function cai() //已经封装好的Ajax
        {
            ajax("VideoAjax.ashx?Action = cai",function (restext)
            {
                document.getElementById("CaiCount").innerHTML = restext;
            })
            
        }

    </script>
</head>
<body>
    <video src="video.mp4" autoplay controls></video>
        <input type="button" value="赞" name="Zan" onclick="zan()"/><label id="ZanCount"></label>
        <br>
        <input type="button" value="踩" name="Cai" onclick="cai()" /><label id="CaiCount"></label>
</body>
</html>

VideoAjax.ashx（在数据库的查询到赞或踩的数量+1后返回值）

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace VideoZanCai
{
    /// <summary>
    /// VideoAjax 的摘要说明
    /// </summary>
    public class VideoAjax : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            string action = context.Request["Action"];
            if (action=="zan")
            {
                SqlHelper.ExecuteNonQuery("update T_VideoZanCai set zan=zan+1");
                int zanCount = Convert.ToInt32(SqlHelper.ExecuteScalar("select zan from T_VideoZanCai"));
                context.Response.Write(zanCount);
            }
            else
            {
                SqlHelper.ExecuteNonQuery("update T_VideoZanCai set cai=cai+1");
                int caiCount = Convert.ToInt32(SqlHelper.ExecuteScalar("select cai from T_VideoZanCai"));
                context.Response.Write(caiCount);
            }
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

检查用户名

思路：在用户名填完之后，鼠标焦点离开，调用Check函数，使用Ajax对提示信息进行局部刷新（根据不同情况返回不同提示）

主要代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="js/ajax.js"></script>
    <script type="text/javascript">
        function Check() {
            var username = document.getElementById("Username").value;
            ajax("CheckUsername.ashx?Username=" + username, function (resText) {
                if (resText == "OK") {
                    document.getElementById("tips").innerHTML = "用户名可用";
                }
                else if (resText == "Repeat") {
                    document.getElementById("tips").innerHTML = "用户名重复";
                }
                else if (resText == "Error") {
                    document.getElementById("tips").innerHTML = "用户名包含非法字符";
                }
                else {
                    document.getElementById("tips").innerHTML ="返回信息错误";
                }
            });
        }
    </script >
</head>
<body>
    <form action="CheckUsername.ashx" method="post">
        用户名：<input type="text"id="Username" name="Username" onblur="Check()"/><label id="tips"></label>
        <br>
        密 码：<input type="password" name="Password"/>
        <input type="submit" value="注册"/>
     </form>
</body>
</html>

CheckUsername.ashx

using System;
using System.Collections.Generic;
using System.Data.SqlClient;
using System.Linq;
using System.Web;

namespace UsernameCheck
{
    /// <summary>
    /// CheckUsername 的摘要说明
    /// </summary>
    public class CheckUsername : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            string username = context.Request["Username"];
            if (username.Contains("我爱你")) {
                context.Response.Write("Error");
                return;
            }
           int count=Convert.ToInt32( SqlHelper.ExecuteScalar("select count(*) from T_Person where [email protected]",
               new SqlParameter("@Username", username)));
            if (count <= 0)
            {
                context.Response.Write("OK");
            }
            else {
                context.Response.Write("Repeat");
            }

        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

使用Ajax做简单的页面局部刷新视频点赞和检测用户名