本文共 15126 字，大约阅读时间需要 50 分钟。
1、JSON对象【重点】
2、Ajax【难点】
3、正则表达式【重点】
4、Url重写【了解】
知识点讲解
1、why：
轻量级传递数据，便于人和机器阅读
2、what：
JavaScript object notation，轻量级数据交换格式，是JavaScript的一个子集
注：1、json完全独立于语言（json格式的数据可以在任何的语言c#、Java、Python等使用）
3、组成：键值对
4、how：
（一）定义json格式的数据（存储数据）
简单：值是基本类型字符串、数字、布尔
<script> //var jsonobj= {key1:value1,key2:value2,key3:value3}var jsonobj = { name: "猪八戒", age: 18, money: 9.9, married: false };//键值对 属性值</script>注：（1）键是字符串,如果键包含“-” ，必须用“”括起来
（2）值的类型：字符串“”、数字、布尔true|false、对象、数组、函数function、null
复杂：值是对象类型、数组类型、函数类型
（1）属性值是对象类型 ，用{}
//var jsonobj={ key1:value1,key2:object }var jsonobj2 = { name: "猪八戒", age: 18, money: 9.9, married: false, wife: { name: "潘金莲", age: 18 } }（2）属性值是数组，用[]
var jsonobj2 = { name: "猪八戒", age: 18, money: 9.9, married: false, wife: { name: "潘金莲", age: 18 }, sons: [{ name: "猪大", age: 2 }, { name: "猪二",age:1}]};（3）属性值是函数，用function(){}
var jsonobj2 = { name: "猪八戒", age: 18, money: 9.9, married: false, wife: { name: "潘金莲", age: 18 }, sons: [{ name: "猪大", age: 2 }, { name: "猪二", age: 1 }], say: function () { alert("大师兄，师傅被妖怪抓走了") }};（二）取数据
语法：json对象.属性名 或者 json对象[“属性名”]
注：什么时候必须用"[]"取值，当属性名称有“-”连接符时
简单：
语法：json对象.键名 或json对象[“键名”]
//取猪八戒的名字和年龄var n = jsonobj .name;var a = jsonobj .age;复杂：
值是对象： jsonobj.key1.key2.属性名 或者 jsonobj[“key1”][“key2”].属性名
// 取猪八戒媳妇的名字var v2 = jsonobj2.wife.name;值是数组： jsonobj.key[0]
//数组 取猪八戒第一个儿子的名字 var v3 = jsonobj3.sons[0].name值是函数： jsonobj.key
//函数 聆听猪八戒唠叨var s = jsonobj4.say;s();（三）c#后台输出json格式的字符串
using System.Web.Script.Serialization;//引入JavaScript序列号包public void ProcessRequest(HttpContext context)//处理用户的请求 { //设置输出的内容的类型 context.Response.ContentType = "text/plain"; //重点输出json格式的信息// //这是c#后台程序 var stu = new { name = "王勤", age = 18, married = false }; //将c#对象转换为JavaScript里面的json格式的字符串 //创建一个JavaScript序列化对象 JavaScriptSerializer jss = new JavaScriptSerializer(); //转换为json格式的字符串"{ name: "王勤", age: 18, married: false }" string jsonstr = jss.Serialize(stu); //输出给浏览器 context.Response.Write(jsonstr); }1、what：
Asynchronous Javascript And XML 用于与服务器进行数据交互：获取或提交数据。
2、why：
局部刷新 （不需要刷新整个页面，就能从服务获取数据并更新到界面）
3、how：
原生ajax、第三方ajax框架
原生
var xmlHttpRequest = new XMLHttpRequest()第三方框架：兼容型好、使用便捷，jQuery的ajax函数
jQuery通用语法：（常用）
$.ajax( { url: "请求的网页地址", type: "请求方式get|post，默认get，上传大的数据post", dataType: "要求服务器返回的数据类型json|html|xml|script，常返回json数据", data:{ username: "纪好靓",age: 18},//用于传递到服务器的数据 success:function(result,status){ //请求成功事件。result由服务器返回的结果,并根据dataType参数进行处理后的数据；状态字符串 alert(result); }, error:function (xhr,status,error) { //请求失败事件 三个参数：XMLHttpRequest 象、错误信息、可选）捕获的异常对象 alert(status); } } ); （一）取数据：异步从服务器获取json数据
$.ajax({ url: "请求的网页地址", dataType: "json", success:function(result,status){ //请求成功事件。 $("#面板id").html(result); }, error:function (xhr,status,error) { //请求失败事件 alert(status); } }); （二）取数据：异步从服务器获取HTML或XML
$.ajax({ url: "请求的网页地址", dataType: "html", success:function(result,status){ //请求成功事件。 $("#面板id").html(result); }, error:function (xhr,status,error) { //请求失败事件 alert(status); } }); （三）提交数据
//第一步：客户端异步请求服务器网页提交数据 $.ajax({ url: "请求的网页地址", dataType: "json", //data:{参数名:参数值},//需要提交的json数据 data:$("#表单id").serialize(),//需要提交的表单数据 success:function(result,status){ //请求成功事件。 console.log(result); }, error:function (xhr,status,error) { //请求失败事件 alert(status); } }); //第二步：服务端接收数据 String v=Request["表单名称"]; //或者 String v=context.Request["表单名称"]; 例题：获取数据（新建HTML页）
前端
<!--前端--><!DOCTYPE html><html><head> <meta charset="utf-8" /> <title></title> <!-- 新 Bootstrap4 核心 CSS 文件 --> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js --> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <!-- 最新的 Bootstrap4 核心 JavaScript 文件 --> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script></head><body> <table class="table table-bordered"> <thead> <tr> <th>产品价格</th> <th>价格</th> <th>Email</th> </tr> </thead> <tbody></tbody> </table> <script> $.ajax({ url: "/ProductListJson", type: "get", dataType: "json", success: function (ret, status) { //请求成功事件。result由服务器返回的结果,并根据dataType参数进行处理后的数据；状态字符串 for (var i in ret) { //行 var row = ret[i] //构建一个元素 行 节点 var $row = $(`<tr><td>${ row.pname}</td><td>${ row.price}</td><td>john@example.com</td></tr>`) //将行添加到文档树 $(".table tbody").append($row); } } }); </script></body></html>后端
public class ProductListJson : IHttpHandler { public bool IsReusable => false; public void ProcessRequest(HttpContext context) { //设置输出的内容的类型 context.Response.ContentType = "text/plain"; //查询 meixinEntities db=new meixinEntities(); List<m_product> obj = db.m_product.ToList(); //将c#对象转换为JavaScript里面的json格式的字符串 //创建一个JavaScript序列化对象 JavaScriptSerializer jss = new JavaScriptSerializer(); //转换为json格式的字符串 string jsonstr = jss.Serialize(obj); //输出给浏览器 context.Response.Write(jsonstr); } }创建处理程序==》》Web.config添加处理程序命令（ProductListJson ）
例题：添加
前端
<!--前端--><!DOCTYPE html><html><head> <meta charset="utf-8" /> <title></title> <!-- 新 Bootstrap4 核心 CSS 文件 --> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js --> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <!-- 最新的 Bootstrap4 核心 JavaScript 文件 --> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script></head><body> <form id="theForm"> <div class="form-group"> <label for="email">名称:</label> <input type="text" class="form-control" name="name"> </div> <div class="form-group"> <label for="pwd">价格:</label> <input type="text" class="form-control" name="price"> </div> <button type="submit" class="btn btn-primary" id="btn">提交</button> </form> <a href="default.html">列表</a> <script> $(function () { //按钮单击，提交数据 $("#btn").on("click", function () { $.ajax({ url: "/ProductAddJson", type:"get", dataType: "json", //data:{参数名:参数值},//需要提交的json数据 data: $("#theForm").serialize(),//需要提交的表单数据 “”表单ID success: function (result, status) { //请求成功事件。 alert(result.msg) } }) return false }) }) </script></body></html>后端
public class ProductAddJson: IHttpHandler { public bool IsReusable => false; /// <summary> /// 公开的接口：name 名称 price价格 /// </summary> /// <param name="context"></param> public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; //接受客户端传递过来参数数据 string n = context.Request["name"]; string p = context.Request["price"]; //保存到数据库 meixinEntities db = new meixinEntities(); m_product obj = new m_product();//创建实体对象 obj.pname = n; obj.price = Convert.ToDouble(p); db.m_product.Add(obj);//添加到实体对象集合 db.SaveChanges();//同步到物理数据库 //返回给客户端结结果 var ret = new { status = true, msg = "添加成功" }; //转换为json格式的字符串 //转换为jsog格式的字符串数据 JavaScriptSerializer jss = new JavaScriptSerializer(); context.Response.Write(jss.Serialize(ret));//调用方法将ret转换为json格式的字符串 } }创建处理程序==》》Web.config添加处理程序命令（ProductAddJson）
例题：删除
前端
<!--前端--><!DOCTYPE html><html><head> <meta charset="utf-8" /> <title></title> <!-- 新 Bootstrap4 核心 CSS 文件 --> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js --> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <!-- 最新的 Bootstrap4 核心 JavaScript 文件 --> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script></head><body> <table class="table table-bordered"> <thead> <tr> <th>产品价格</th> <th>价格</th> <th>口味</th> <th>操作</th> </tr> </thead> <tbody></tbody> </table> <button id="btn">异步加载</button> <a href="Add.html">添加</a> <script> //删除函数 function del(id) { $.ajax({ url: "/ProductDeleteJson?id=" + id, type: "get", dataType: "json", success: function (ret, status) { //请求成功事件。result由服务器返回的结果,并根据dataType参数进行处理后的数据；状态字符串 if (ret.status) { alert(ret.msg) //刷新==》清空table $(".table tbody").html("") $.ajax({ url: "/ProductListJson", type: "get", dataType: "json", success: function (ret, status) { //请求成功事件。result由服务器返回的结果,并根据dataType参数进行处理后的数据；状态字符串 for (var i in ret) { var row = ret[i] //构建一个元素 行 节点 var $row = $(`<tr><td>${ row.pname}</td><td>${ row.price}</td><td>${ row.category}</td><td onClick="del(${ row.id})">删除</td></tr>`) //将行添加到文档树 $(".table tbody").append($row); } } }) } } }) } $(function () { //按钮单击，显示数据 $("#btn").on("click", function () { $.ajax({ url: "/ProductListJson", type: "get", dataType: "json", success: function (ret, status) { //请求成功事件。result由服务器返回的结果,并根据dataType参数进行处理后的数据；状态字符串 for (var i in ret) { var row = ret[i] //构建一个元素 行 节点 var $row = $(`<tr><td>${ row.pname}</td><td>${ row.price}</td><td>${ row.category}</td><td onClick="del(${ row.id})">删除</td></tr>`) //将行添加到文档树 $(".table tbody").append($row); } } }) }) }) </script></body></html>后端
public class ProductDeleteJson : IHttpHandler { public bool IsReusable => false; /// <summary> /// 公开的接口：name 名称 price价格 /// </summary> /// <param name="context"></param> public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; //接受客户端传递过来参数数据 string id = context.Request["id"]; //创建数据库对象 meixinEntities db = new meixinEntities(); m_product o = db.m_product.Find(Convert.ToInt32(id)); db.m_product.Remove(o);//将0从实体对象集合移除 db.SaveChanges();//同步到物理数据库 //返回给客户端结结果 var ret = new { status = true, msg = "删除成功" }; //转换为json格式的字符串 //转换为jsog格式的字符串数据 JavaScriptSerializer jss = new JavaScriptSerializer(); context.Response.Write(jss.Serialize(ret));//调用方法将ret转换为json格式的字符串 } }创建处理程序==》》Web.config添加处理程序命令（ProductDeleteJson）
1、what：
regular expression ，描述了一种字符串匹配的模式（模板、模样 ）（pattern） =》模糊查询
2、why：
可以用来检查一个字符串是否含有某种子串、将匹配的子串替换或者从某个串中取出符合某个条件的子串等 （匹配包含、替换子字符串）
3、how：
由普通字符（abc）和特殊字符（元字符）组成字符模板
//a、引入命名空间using System.Text.RegularExpressionsstring zbj = "猪八戒提着200斤米高老庄提亲，被赶出来了"; //b、创建正则表达式对象 //Regex reg = new Regex(@"正则表达式"); Regex reg = new Regex(@"(\d{3})斤米");//c、调用Regex对象的匹配方法 reg.Match(path);Match match = reg.Match(path);//d、判断是是否匹配成功 if(match.Success){ Response.Write("猪八戒提亲成功。"); }//e、获取匹配项的子字符串match.Groups[1].Value if(match.Success){ Response.Write("猪八戒提亲成功。彩礼"+match.Groups[0].Value); }what：
将网页真实的URL隐藏起来，使用户通过相应的虚拟URL访问网页资源以弥补真实URL的不足。常用于页面静态化技术，静态化技术：
a、伪静态（url重写） b、真静态 c、折中法
why：
a、满足搜索引擎需要，实现 搜索引擎中的排名优化 （SEO） =》将网页收录在搜索引擎数据库
b、隐藏网页实现技术，增强网站安全
c、提高网站的可用性和专业性 便于记网址
how：
1、urlMappings：url映射，不灵活，配置的地址是固定的，不支持通配符和正则表达式
2、正则表达式（通过过滤器）
using System.Text.RegularExpressions;//引入 private void Context_BeginRequest(object sender, EventArgs e){ HttpApplication contenx = sender as HttpApplication; //1获取网页访问路径 string path = contenx.Request.Path;// /fff_4774_4664.html //2 创建一个正则表达式对象 匹配 访问路径path 如果是“字母_数字_数字.html”的格式 Regex reg = new Regex(@"\w+_(\d+)_(\d+)\.html");//3 调用reg的匹配方法 拿着 模板去与字符串 pathMatch match = reg.Match(path); if (match.Success) { //重定向 跳转到真实的页面 //contenx.Response.Redirect("/money.aspx"); //转发 转发后的地址不在浏览器显示出来 contenx.Server.Transfer("/money.aspx?id="+match.Groups[1]+"&price="+ match.Groups[2]); }}3、使用URLRewriter 第三方插件
a、引入第三方类库
b、在web.config文件中配置访问规则
<!--a、在<configuration>节点下，添加如下节点--><configSections> <section name="RewriterConfig" type="URLRewriter.Config.RewriterConfigSerializerSectionHandler,URLRewriter"/></configSections> <!--b、在<configuration>节点下，添加如下节点--><system.webServer> <handlers> <add verb="*" path="*.html" type="URLRewriter.RewriterFactoryHandler, URLRewriter" name="urlrewriter"/> </handlers></system.webServer><!--c、在<configuration>节点下，添加URL重写规则 --><RewriterConfig> <Rules> <RewriterRule> <LookFor>~/goods_(\d)+\.html</LookFor> <SendTo>~/goodsList.aspx?id=$1</SendTo> </RewriterRule> </Rules></RewriterConfig>转载地址：http://ofie.baihongyu.com/