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 == )    //readyState==4表示服务器返回数据了额，之前可能经历  2（请求已发生，正在处理中）3表示（响应中有部分数据可以用，拂去其还没有完成响应的生成）

                {

                    if (xmlhttp.status == )  //状态码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 == )    //readyState==4表示服务器返回数据了额，之前可能经历  2（请求已发生，正在处理中）3表示（响应中有部分数据可以用，拂去其还没有完成响应的生成）

        {

            if (xmlhttp.status == )  //状态码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 <= )

            {

                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=,Email="111@q.com"});

            list.Add(new Person { Name = "aa", Age = , Email = "221@q.com" });

            list.Add(new Person { Name = "bb", Age = , 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 = ; 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就可以了

ajax测试Demo以及json简单的转化的更多相关文章

  1. struts1、ajax、jquery、json简单实例

    1.页面ajax代码,使用$.ajax,获得json对象后each $.ajax({ type:"GET", url:ctx + "/uploadImg.do" ...

  2. ADO.NET .net core2.0添加json文件并转化成类注入控制器使用 简单了解 iTextSharp实现HTML to PDF ASP.NET MVC 中 Autofac依赖注入DI 控制反转IOC 了解一下 C# AutoMapper 了解一下

    ADO.NET   一.ADO.NET概要 ADO.NET是.NET框架中的重要组件,主要用于完成C#应用程序访问数据库 二.ADO.NET的组成 ①System.Data  → DataTable, ...

  3. php+jquery+ajax+json简单小例子

    直接贴代码: <html> <title>php+jquery+ajax+json简单小例子</title> <?php header("Conte ...

  4. JSON 在Ajax数据交换中的简单运用

    随着浏览器内核更新,原先的json.js在最新的谷歌浏览下不管用了,运行报错,特此修改下代码,不使用json.js,使用Object自带的json转换方法,修改时间,2016年10月26日. 首先需要 ...

  5. .net core2.0添加json文件并转化成类注入控制器使用 让js调试更简单—console

    .net core2.0添加json文件并转化成类注入控制器使用 上一篇,我们介绍了如何读取自定义的json文件,数据是读取出来了,只是处理的时候太麻烦,需要一遍一遍写,很枯燥.那么有没有很好的办法呢 ...

  6. SpringMVC中使用Ajax POST请求以json格式传递参数服务端通过request.getParameter("name")无法获取参数值问题分析

    SpringMVC中使用Ajax POST请求以json格式传递参数服务端通过request.getParameter("name")无法获取参数值问题分析 一:问题demo展示 ...

  7. 【Spring学习笔记-MVC-5】利用spring MVC框架，实现ajax异步请求以及json数据的返回

    作者:ssslinppp      时间:2015年5月26日 15:32:51 1. 摘要 本文讲解如何利用spring MVC框架,实现ajax异步请求以及json数据的返回. Spring MV ...

  8. Ajax与服务器（JSON）通信介绍

    本文主要介绍使用Ajax与服务器(JSON)通信方法,谈谈Ajax提供的两类服务器通信手段:同步通信和异步通信.有需要的可以了解一下.毕竟这个时代出了很多东西,自动化构建工具,mvvm框架等等.Jav ...

  9. 原生ajax、XMLHttpRequest和FetchAPI简单描述

    什么是ajax ajax的出现,刚好解决了传统方法的缺陷.AJAX 是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个 ...

随机推荐

  1. Redis学习笔记(2) Redis基础类型及命令之一

    1. 基础命令 (1) 获取符合规则的键名列表 格式为:KEYS pattern 其中pattern表示支持通配符 # 建立一个名为bar的键 > SET bar OK # 获取Redis所有键 ...

  2. Linux学习笔记（11）软件包管理

    Linux中的软件包分为源码包(脚本安装包)及二进制包(RPM包.系统默认包).其中源码包的优点是: 1)源码包是开源的,如果有足够的能力,可以修改源代码: 2)可自由选择所需的功能: 3)源码包需编 ...

  3. bat

    1.输出系统时间,利用系统时间做文件名 @echo offset filename=%date:~0,4%%date:~5,2%%date:~8,2%%time:~0,2%%time:~3,2%%ti ...

  4. Adobe Flash Media Server安装

    Flash Media Server(FMS)是一个流媒体服务器 使用 实时消息传送协议(RTMP),RTMP是一种未加密的TCP/IP协议,专门设计用来高速传送音频.视频和数据信息. 3.5版32位 ...

  5. 什么是智能扫描开单打印进销存POS?安卓工业手持PDA设备上的POS销售开单,现场打印打票，用扫描枪太方便了

    安卓PDA版POS销售开单如果和扫描枪配合使用,和超市的POS销售一样的操作 什么是智能扫描开单打印进销存POS? 互联网特性,让它在数据统计分析.客户关系管理等方面表现出众.智能POS,不仅是一个收 ...

  6. jQuery-认识JQuery，jQuery选择器

    认识JQuery: 1.window.onload与$(document).ready()的区别 window.onload $(document).ready() 执行时机 必须等待网页中的所有内容 ...

  7. 修改WordPress中上传附件2M大小限制的方法/php+iis上传附件默认大小修改方法

    在服务器上架设好WordPress后,使用过程中发现,上传附件大小有2M的限制 话说服务器就是本机,可以直接把文件拖到附件存储文件夹下,然后在需要附件的地方引用链接 可是这种落后的方法终究不是办法,还 ...

  8. Kalman滤波器原理和实现

    Kalman滤波器原理和实现 kalman filter Kalman滤波器的直观理解[1] 假设我们要测量一个房间下一刻钟的温度.据经验判断,房间内的温度不可能短时大幅度变化,也就是说可以依经验认为 ...

  9. soapui中文操作手册(三)----使用SoapUI进行负载测试

    使用了SoapUI进行负载测试 负载测试是相当独特的,我们已经创建了一个功能,使您能够快速创建性能测试,并很容易地修改它们.SoapUI性能测试通常是从现有功能测试创建.这使您可以非常快速地创建先进的 ...

  10. UVa 11388 & 丝帛

    一直在想丝帛题要不要贴呢...后来觉得还是贴了吧...反正没人看...blog是开给自己看的...偶尔无聊打打blog也显得生活非常充实... 题意: 给一个gcd和lcm求满足啊他们的最小的a和b. ...