ajax测试Demo以及json简单的转化

Ajax是局部刷新，并不影响页面其他的操作

实例1：本测试是演示利用Ajax在一个页面播放视频，点击赞和踩按钮，视频不会受影响,

新建一个ajaxTest.html页面

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript" src="js/ajax.js"></script>
    <script type="text/javascript">
        function zan()
        {
            var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');//创建xmlhttp对象，考虑兼容性
            xmlhttp.open("POST", "AjaxTest.ashx?action=Zan", true);//准备向服务器发出post请求
            xmlhttp.onreadystatechange = function ()
            {
                if (xmlhttp.readyState == 4)    //readyState==4表示服务器返回数据了额，之前可能经历  2（请求已发生，正在处理中）3表示（响应中有部分数据可以用，拂去其还没有完成响应的生成）
                {
                    if (xmlhttp.status == 200)  //状态码200位成功
                    {
                        document.getElementById("ZanCount").innerHTML = xmlhttp.responseText;//responseText是服务器返回的报文正文
                    }
                    else {
                        alert("ajax服务器返回错误");
                    }
                }
            }
            xmlhttp.send();//这时才发送请求，发送完请求，并一定马上服务器响应，然后看上面的onreadystatechange状态，发送完继续执行下面的操作，不等服务器
        }

        function cai()
        {
            ajax("AjaxTest.ashx?action=Cai", function (reText) {
                document.getElementById("CaiCount").innerHTML = reText;
            })
        }
        </script>
</head>
<body>
    <video src="video.mp4" controls="controls"></video>
        <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>
</body>
</html>

然后新建一个后台处理程序AjaxTest.ashx

string action = context.Request["action"];
if (action == "Zan") //赞加1
{
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//踩加1
{
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);
}

　　数据库test,新建表T_ZanCai

上面的ajax都有很多相似的部分，可以吧ajax封装起来

新建js文件夹，下新建ajax.js

function ajax(url, onsuccess)
{
    var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');//创建xmlhttp对象，考虑兼容性

    xmlhttp.open("POST", url, true);//准备向服务器发出post请求
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4)    //readyState==4表示服务器返回数据了额，之前可能经历  2（请求已发生，正在处理中）3表示（响应中有部分数据可以用，拂去其还没有完成响应的生成）
        {
            if (xmlhttp.status == 200)  //状态码200位成功
            {
                //responseText是服务器返回的报文正文
                onsuccess(xmlhttp.responseText);
            }
            else {
                alert("ajax服务器返回错误");
            }
        }
    }
    xmlhttp.send();//这时才发送请求，发送完请求，并一定马上服务器响应，然后看上面的onreadystatechange状态，发送完继续执行下面的操作，不等服务器
}

实例2：简单的用户注册页面，ajax检测用户名是否已被注册，没有注册功能，只是检测用户名是否合法

注册页面Register.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>用户注册用户名ajax检测是否已用</title>
    <script type="text/javascript" src="js/ajax.js"></script>
    <script type="text/javascript">
        function checkUserName()
        {
            var userName = document.getElementById("UserName").value;
            ajax("checkuserName.ashx?UserName=" + userName, function (resText) {
                if (resText == "ok")
                {
                    document.getElementById("UserNameMsg").innerHTML="用户名可用";
                }
                else if(resText == "error")
                {
                    document.getElementById("UserNameMsg").innerHTML = "用户名不可用";
                }
                else if (resText == "forbidden")
                {
                    document.getElementById("UserNameMsg").innerHTML = "用户名含有禁词，请换用其他用户名";
                }
            });
        }

    </script>
</head>
<body>
    <form action="Register.ashx">   
        用户名:<input type="text" id="UserName" name="UserName" onblur="checkUserName()"/><span id="UserNameMsg" style="color:red"></span><br>
        密码:<input type="password"/>
    </form>

</body>
</html>

ajax 后台处理checkUserName.ashx

 string userName=context.Request["UserName"];            
            if(userName.Contains("国家") || userName.Contains("管理员"))
            {
                context.Response.Write("forbidden");
            }
            int count = (int)SqlHelper.ExecuteScalar("select count(*) from tab_user where name=@UserName", new SqlParameter("@UserName", userName));
            if (count <= 0)
            {
                context.Response.Write("ok");
            }
            else
            {
                context.Response.Write("error");
            }

实例三：Json的使用：

C# 将.net对象转为json字符串，然后在前台页面js解析json为javascript对象使用

新建Person.cs类

 public class Person
    {
        public string Name { get; set; }
        public int Age { get; set; }
        public string Email { get; set; }
    }

jsonTest.ashx代码：

 List<Person> list =new List<Person>();
            list.Add(new Person { Name="hyb",Age=11,Email="111@q.com"});
            list.Add(new Person { Name = "aa", Age = 11, Email = "221@q.com" });
            list.Add(new Person { Name = "bb", Age = 11, Email = "23331@q.com" });
            //将对象序列号为json字符串的方法
            JavaScriptSerializer jss=new JavaScriptSerializer();
            string json=jss.Serialize(list);
            //string json = jss.Serialize(new Person { Name="哈哈",Age=23,Email="12345@qq.com"});

            context.Response.Write(json);

jsonTest.html前台代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript" src="js/ajax.js"></script>
    <script src="js/json2.js"></script>
    <script type="text/javascript" >
        function go()
        {
            ajax("jsonTest.ashx", function (resText) {
                //把json字符串转为javascrip对象
                var person = JSON.parse(resText);
                for (var i = 0; i < person.length; i++)
                {
                    var p=person[i];
                    alert("姓名："+p.Name+"年龄："+p.Age+"邮箱："+p.Email);
                }
            });
        }

    </script>
</head>
<body onload="go()">
</body>
</html>

注意：一般浏览器支持JSON.parse,不支持的引用json2,js就可以了

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/DonAndy/p/5986001.html