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

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

新建一个ajaxTest.html页面

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5.     <title></title>
  6.     <script type="text/javascript" src="js/ajax.js"></script>
  7.     <script type="text/javascript">
  8.         function zan()
  9.         {
  10.             var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');//创建xmlhttp对象，考虑兼容性
  11.             xmlhttp.open("POST", "AjaxTest.ashx?action=Zan", true);//准备向服务器发出post请求
  12.             xmlhttp.onreadystatechange = function ()
  13.             {
  14.                 if (xmlhttp.readyState == )    //readyState==4表示服务器返回数据了额，之前可能经历  2（请求已发生，正在处理中）3表示（响应中有部分数据可以用，拂去其还没有完成响应的生成）
  15.                 {
  16.                     if (xmlhttp.status == )  //状态码200位成功
  17.                     {
  18.                         document.getElementById("ZanCount").innerHTML = xmlhttp.responseText;//responseText是服务器返回的报文正文
  19.                     }
  20.                     else {
  21.                         alert("ajax服务器返回错误");
  22.                     }
  23.                 }
  24.             }
  25.             xmlhttp.send();//这时才发送请求，发送完请求，并一定马上服务器响应，然后看上面的onreadystatechange状态，发送完继续执行下面的操作，不等服务器
  26.         }
  27.  
  28.         function cai()
  29.         {
  30.             ajax("AjaxTest.ashx?action=Cai", function (reText) {
  31.                 document.getElementById("CaiCount").innerHTML = reText;
  32.             })
  33.         }
  34.         </script>
  35. </head>
  36. <body>
  37.     <video src="video.mp4" controls="controls"></video>
  38.         <p><input type="button" name="Zan" value="赞" onclick="zan()"/><label id="ZanCount"></label></p>
  39.         <p><input type="button" name="Cai" value="踩"onclick="cai()"/><label id="CaiCount"></label></p>
  40. </body>
  41. </html>

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

  1. string action = context.Request["action"];
  2. if (action == "Zan") //赞加1
  3. {
  4. SqlHelper.ExecuteNonQuery("Update T_ZanCai set ZanCount=ZanCount+1");
  5. int zanCount = (int)SqlHelper.ExecuteScalar("select top 1 ZanCount from T_ZanCai");
  6. context.Response.Write(zanCount);
  7. }
  8. else//踩加1
  9. {
  10. SqlHelper.ExecuteNonQuery("Update T_ZanCai set CaiCount=CaiCount+1");
  11. int caiCount = (int)SqlHelper.ExecuteScalar("select top 1 CaiCount from T_ZanCai");
  12. context.Response.Write(caiCount);
  13. }

　　数据库test,新建表T_ZanCai

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

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

  1. function ajax(url, onsuccess)
  2. {
  3.     var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');//创建xmlhttp对象，考虑兼容性
  4.  
  5.     xmlhttp.open("POST", url, true);//准备向服务器发出post请求
  6.     xmlhttp.onreadystatechange = function () {
  7.         if (xmlhttp.readyState == )    //readyState==4表示服务器返回数据了额，之前可能经历  2（请求已发生，正在处理中）3表示（响应中有部分数据可以用，拂去其还没有完成响应的生成）
  8.         {
  9.             if (xmlhttp.status == )  //状态码200位成功
  10.             {
  11.                 //responseText是服务器返回的报文正文
  12.                 onsuccess(xmlhttp.responseText);
  13.             }
  14.             else {
  15.                 alert("ajax服务器返回错误");
  16.             }
  17.         }
  18.     }
  19.     xmlhttp.send();//这时才发送请求，发送完请求，并一定马上服务器响应，然后看上面的onreadystatechange状态，发送完继续执行下面的操作，不等服务器
  20. }

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

注册页面Register.html

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5.     <title>用户注册用户名ajax检测是否已用</title>
  6.     <script type="text/javascript" src="js/ajax.js"></script>
  7.     <script type="text/javascript">
  8.         function checkUserName()
  9.         {
  10.             var userName = document.getElementById("UserName").value;
  11.             ajax("checkuserName.ashx?UserName=" + userName, function (resText) {
  12.                 if (resText == "ok")
  13.                 {
  14.                     document.getElementById("UserNameMsg").innerHTML="用户名可用";
  15.                 }
  16.                 else if(resText == "error")
  17.                 {
  18.                     document.getElementById("UserNameMsg").innerHTML = "用户名不可用";
  19.                 }
  20.                 else if (resText == "forbidden")
  21.                 {
  22.                     document.getElementById("UserNameMsg").innerHTML = "用户名含有禁词，请换用其他用户名";
  23.                 }
  24.             });
  25.         }
  26.  
  27.     </script>
  28. </head>
  29. <body>
  30.     <form action="Register.ashx">
  31.         用户名:<input type="text" id="UserName" name="UserName" onblur="checkUserName()"/><span id="UserNameMsg" style="color:red"></span><br>
  32.         密码:<input type="password"/>
  33.     </form>
  34.  
  35. </body>
  36. </html>

ajax 后台处理checkUserName.ashx

  1.  string userName=context.Request["UserName"];
  2.             if(userName.Contains("国家") || userName.Contains("管理员"))
  3.             {
  4.                 context.Response.Write("forbidden");
  5.             }
  6.             int count = (int)SqlHelper.ExecuteScalar("select count(*) from tab_user where name=@UserName", new SqlParameter("@UserName", userName));
  7.             if (count <= )
  8.             {
  9.                 context.Response.Write("ok");
  10.             }
  11.             else
  12.             {
  13.                 context.Response.Write("error");
  14.             }

实例三：Json的使用：

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

新建Person.cs类

  1.  public class Person
  2.     {
  3.         public string Name { get; set; }
  4.         public int Age { get; set; }
  5.         public string Email { get; set; }
  6.     }

jsonTest.ashx代码：

  1.  List<Person> list =new List<Person>();
  2.             list.Add(new Person { Name="hyb",Age=,Email="111@q.com"});
  3.             list.Add(new Person { Name = "aa", Age = , Email = "221@q.com" });
  4.             list.Add(new Person { Name = "bb", Age = , Email = "23331@q.com" });
  5.             //将对象序列号为json字符串的方法
  6.             JavaScriptSerializer jss=new JavaScriptSerializer();
  7.             string json=jss.Serialize(list);
  8.             //string json = jss.Serialize(new Person { Name="哈哈",Age=23,Email="12345@qq.com"});
  9.  
  10.             context.Response.Write(json);

jsonTest.html前台代码：

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5.     <title></title>
  6.     <script type="text/javascript" src="js/ajax.js"></script>
  7.     <script src="js/json2.js"></script>
  8.     <script type="text/javascript" >
  9.         function go()
  10.         {
  11.             ajax("jsonTest.ashx", function (resText) {
  12.                 //把json字符串转为javascrip对象
  13.                 var person = JSON.parse(resText);
  14.                 for (var i = ; i < person.length; i++)
  15.                 {
  16.                     var p=person[i];
  17.                     alert("姓名："+p.Name+"年龄："+p.Age+"邮箱："+p.Email);
  18.                 }
  19.             });
  20.         }
  21.  
  22.     </script>
  23. </head>
  24. <body onload="go()">
  25. </body>
  26. </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. 汇编学习（一）——win7 64位调出debug

    一.安装方法: 1.下载一个dosbox和win7 32位debug.exe,安装dosbox,打开页面 2. 将debug.exe放入磁盘根目录,这里以D盘为例.在dosbox中输入mount c ...

  2. (转载)Bash 中的特殊字符大全

    转自:https://linux.cn/article-5657-1.html Linux下无论如何都是要用到shell命令的,在Shell的实际使用中,有编程经验的很容易上手,但稍微有难度的是she ...

  3. js循环添加事件

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. SQL详解（下）

    约束 *约束是添加在列上的,用来约束列的! 1. 主键约束(唯一标识)  特点:非空,唯一,被引用  创建表时指定主键的两种方式,分别为:    CREATE TABLE stu(     sid   ...

  5. Linux定时，计划任务cron

    假如你有一些任务要定期执行,比如清理磁盘.删除过期文件.发送邮件和提醒,这个时候可以用cron来实现. crond是后台进程,而crontab则是定制好的计划任务表. 启动与停止 查看状态/sbin/ ...

  6. express－20 REST API和JSON

    简介 "Web服务"是一个通用术语,指任何可以通过HTTP访问的应用程序编程界面(API); 我们的重点是提供"REST风格"的服务,与其交互要更直接得多. R ...

  7. 通俗理解T检验与F检验的区别【转】

    转自:http://blog.sina.com.cn/s/blog_4ee13c2c01016div.html1,T检验和F检验的由来一般而言,为了确定从样本(sample)统计结果推论至总体时所犯错 ...

  8. 仓库如何盘点 打印扫描一体PDA盘点机提升库存盘点效率

    仓库盘点是对仓储货品的收发结存等活动进行有效控制,保证仓储货品完好无损.帐物相符,确保生产正常进行,规范公司物料的盘点作业.盘点需人工操作,费时费力,PDA盘点机的出现大幅提升了盘点效率,减轻了工作人 ...

  9. TestNg依赖高级用法之强制依赖与顺序依赖------TestNg依赖详解(二)

    TestNg使用dependsOnGroups属性来进行依赖测试, 测试方法依赖于某个或某些方法,这个/这些方法作为前置依赖条件 强制依赖:如果被依赖的某一个方法发生了异常,那么之后的方法都不会被执行 ...

  10. sql server 2008 跨服务器查询

    exec sp_addlinkedserver 'ITSV','','SQLOLEDB','192.168.202.53' exec sp_addlinkedsrvlogin 'ITSV','fals ...