一、AJAX简介

什么是Ajax

Asynchronous JavaScript and XML (JavaScript执行异步网络请求)
如果仔细观察一个Form的提交，你就会发现，一旦用户点击“Submit”按钮，表单开始提交，浏览器就会刷新页面，然后在新页面里告诉你操作是成功了还是失败了。如果不幸由于网络太慢或者其他原因，就会得到一个404页面。
这就是Web的运作原理：一次HTTP请求对应一个页面。
如果要让用户留在当前页面中，同时发出新的HTTP请求，就必须用JavaScript发送这个新请求，接收到数据后，再用JavaScript更新页面，这样一来，用户就感觉自己仍然停留在当前页面，但是数据却可以不断地更新。
最早大规模使用AJAX的就是Gmail，Gmail的页面在首次加载后，剩下的所有数据都依赖于AJAX来更新。

Ajax的应用场景

分析目前的网站的注册、分页等功能。例如注册有一个功能是验证ID或者手机号是否已经注册过的这个功能。
按照之前的技术尝试实现，发现必须要通过提交整个表单，访问后台服务器，做出验证，导致页面刷新，这样降低网站的效率
而Ajax技术就是为了解决这个问题，需要的是页面无刷新访问服务器

二、Ajax的JS实现

用JavaScript写一个完整的AJAX代码并不复杂，但是需要注意：AJAX请求是异步执行的，也就是说，要通过回调函数获得响应。
在现代浏览器上写AJAX主要依靠XMLHttpRequest这个JS对象实现

window.onload = function () {
var txtckn = this.document.getElementById("ckn");
var txtName = this.document.getElementById("txtName");
//当文本框失去焦点，开始使用Ajax验证输入的姓名能够继续注册
txtName.onblur = function () {
// 【1】新建Ajax核心对象XMLHttpRequest
var request = null;
try
{
    //Firefox, Opera8.0+, Safari
    request=new XMLHttpRequest();
}
catch (e)
{
      try
      {
          // Internet Explorer
      	  request=new ActiveXObject("Msxml2.XMLHTTP");
      }
      catch (e)
      {
      try
         {
             //最低版本的IE浏览器支持的Ajax对象
            request=new ActiveXObject("Microsoft.XMLHTTP");
         }
         catch (e)
         {
         	alert("您的浏览器不支持AJAX！");
         	return false;
         }
   }
}
//【2】当Ajax对象状态发生变化时触发事件
request.onreadystatechange = function (data) {
        //【3】当Ajax对象的readyState == 4证明请求已完成
        if (request.readyState == 4) {
            //【4】当Ajax对象的status==200证明针对请求的响应是成功
            if (request.status==200) {
                //【5】针对响应结果做出新的处理
                if (request.responseText=="True") {
                   txtckn.innerText = "姓名可以使用！";
                }
                else {
                    txtckn.innerText = "该姓名已被注册！";
                    txtName.focus();
                 }
              }
           }
        }
   var uname = this.value;
   //【6】发送请求，指定请求的方式是post，请求的目标源是Manager控制器中的CheckName动作方法
   request.open("post", "CheckName");
   //【7】如果这个Ajax请求是post请求那么向传递参数的话必须声明这个请求头，如果这个Ajax请求是get请求的话那么参数直接以问号方式写在open的URL地址中，get传递不需要设置这个报文头
   request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    //【8】开始进行发送请求，post请求的话参数通过此处传递
    request.send( "name="+uname);
   }
}

针对于Ajax请求的处理在服务器中的处理代码

public class ManagerController : Controller
{
      public bool CheckName(string name)
     {
       UserServer server = new UserServer();
       //再判断姓名是否已经被注册过
       if (server.IsHave(name))
       {
          //注册
          return true;
        }
        else
        {
          //姓名已被注册
          return  false;
         }
   }
}

XMLHttpRequest的readyState和status

xhr.readyState

0：请求未初始化: 还没有调用 open()。
1：请求已经建立: 但是还没有发送，还没有调用 send()。
2：请求已发送: 正在处理中（通常现在可以从响应中获取内容头）。
3：请求在处理中: 正在解析响应内容
4：响应已完成: 内容解析完成，可以在客户端调用

xhr.status

1 xx - 信息提示.
2 xx - 成功服务器成功地接受了客户端请求.
3 xx - 重定向，浏览器直接跳转
4 xx - 客户端错误（客户端请求不存在的页面，客户端未提供有效的身份验证信息。）.
5 xx - 服务器错误服务器由于遇到错误而不能完成该请求.

常见

200 - OK 一切正常，对GET和POST请求的应答文档跟在后面.
300 - Multiple Choices 客户请求的文档可以在多个位置找到.
301 - Moved Permanently 永久重定向.
302 - Found 临时重定向.
304 - Not Modified 资源未改变,使用缓存的资源.
400 - Bad Request 请求出现语法错误。
403 - Unauthorized 没有权限访问，访问被拒绝.
404 - Not Found 请求地址有错误.

三、Ajax涉及的内容

在这里插入图片描述
动作方法处理Ajax

职责一：接收请求的数据(和非Ajax一样)
职责二：返回客户端需要的数据(纯文本，JSON，HTML，其他)

返回JSON数据

使用场合

客户端需要复杂结构的数据，比如一个集合，这个时候可以使用JSON格式和XML格式
对于ASP.NET MVC中，可以轻松的借助控制器方法输出JSON格式数据

认识JSON格式数据

JSON(JavaScript Object Notation)是一种轻量级的数据交换格式
JSON采用完全独立于语言的文本格式，是理想的数据交换语言，易于编写和阅读，同时也易于机器解析和生成(方便网络传输，传输速度快)

JSON和XML数据比较

XML格式数据

<UserList>
    <UserInfor>
        <Id>1</Id>
        <Name>张三</Name>
        <Sex>男</Sex>
        <Age>23</Age>
        <Pwd>123</Pwd>
    </UserInfor>
    <UserInfor>
        <Id>2</Id>
        <Name>李四</Name>
        <Sex>女</Sex>
        <Age>23</Age>
        <Pwd>123</Pwd>
    </UserInfor>
    ...
</UserList>

JSON格式数据

{
 "UserList":[
 {"Id":"1","Name":"张三","Sex":"男","Age":"23","Pwd":"123"},
 {"Id":"2","Name":"李四","Sex":"女","Age":"23","Pwd":"123"},
 ...
 ]
}

XML的优缺点

XML的优点

格式统一，符合标准
容易与其他系统进行远程交互，数据共享比较方便。

XML的缺点

XML文件庞大，文件格式复杂，传输占带宽；
服务器端和客户端都需要花费大量代码来解析XML，导致服务器端和客户端代码变得异常复杂且不易维护；
客户端不同浏览器之间解析XML的方式不一致，需要重复编写很多代码；
服务器端和客户端解析XML花费较多的资源和时间。

JSON的优缺点

JSON的优点:

1.数据格式比较简单，易于读写，格式都是压缩的，占用带宽小；
2.易于解析，客户端JavaScript可以简单的通过eval()进行JSON数据的读取；
3.支持多种语言，包括ActionScript, C, C#, ColdFusion, Java, JavaScript, Perl, PHP, Python, Ruby等服务器端语言，便于服务器端的解析；
4.在PHP世界，已经有PHP-JSON和JSON-PHP出现了，偏于PHP序列化后的程序直接调用，PHP服务器端的对象、数组等能直接生成JSON格式，便于客户端的访问提取；
5.因为JSON格式能直接为服务器端代码使用，大大简化了服务器端和客户端的代码开发量，且完成任务不变，并且易于维护。

扫描二维码关注公众号，回复： 11408071 查看本文章

JSON的缺点:

1.没有XML格式这么推广的深入人心和喜用广泛，没有XML那么通用性；
2.JSON格式目前在Web Service中推广还属于初级阶段。

JSON的语法规则

1.数据在“名称/值”对中
2.数据由“逗号”分割
3.“花括号”保存对象
4.“方块号”保存数组

四、Ajax的JQ实现

<script src="~/Scripts/jquery-3.4.1.js"></script>
    <script>
        $(function () {
            $("#btn").click(function () {
                //get方式的Ajax请求
                //$.get();
                //post方式的Ajax请求
                //$.post();

                $(".new").remove();            
                var sex = $("input:checked").val();
                //回调函数
                $.post("GetUserList", { "Sex": sex }, function (data, status) {
                    //data参数就是Ajax请求之后响应的数据
                    var list = $.parseJSON(data);
                    //遍历集合显示数据
                    for (var i = 0; i < list.length; i++) {
                        var tr = "<tr class='new'><td> " + list[i].Id + "</td><td>" + list[i].Name + "</td><td>" + list[i].Sex + "</td><td>" + list[i].Age + "</td><td>" + list[i].Tel + "</td><td>" + list[i].Pwd + "</td></tr >";
                        $("#tb").append(tr);
                    }
                });
            });
        });
    </script>

//JSON格式数据必备命名空间
using System.Web.Script.Serialization;
public ActionResult GetUserList(string Sex)
        {
            //【1】先准备数据
            UserServer server = new UserServer();
            List<UserInfor> list = server.GetUserInforsBySex(Sex);
            //【2】JSON格式转换
            JavaScriptSerializer serializer = new JavaScriptSerializer();
            //将当前的List集合转成字符串(JSON格式)
            string stringList = serializer.Serialize(list);
            //【3】返回JSON格式数据
            return Json(stringList, JsonRequestBehavior.AllowGet);
        }

JSON()方法的定义

protected internal virtual JsonResult Json(
    object data, //要序列化的对象
    string contentType, //内容类型
    Encoding contentEncoding, //内容编码
    JsonRequestBehavior behavior //JSON请求行为
);

JsonRequestBehavior

枚举类型
包含AllGet/DenyGet两种值，分别代表允许Get请求和不允许Get请求
提示：如果客户端是Get请求，则务必写上该参数

Ajax数据格式比较

分类	特点	应用场景
纯文本	适合保存单个数据，数据传输量小，客户端处理较多	保存数据处理结果，比如0,1等标识符
结构化数据(JSON等)	适合保存一行或多行数据，数据传输量较小，客户端处理较多	展示列表数据，客户端使用jQuery网格或树等插件来表示数据
HTML(分部视图等)	任意数据，数据传输量大，客户端处理较少	显示一定结构的任意内容，列表数据，表单等

AjaxHelper成员

主要属性	说明
string UpdateTargetId	服务器响应来更新的DOM元素的ID
string Confirm	提交请求之前显示在确认窗口中的消息
string HttpMethod	HTTP的请求方法{Get或者Post}
InsertionMode InsertionMode	将响应插入目标DOM元素的模式
int LoadingElementDuration	控制在显示或隐藏加载元素时的动画持续时间
string OnBegin	在更新页面之前调用的JavaScript函数
string OnSuccess	在成功更新页面之后调用的JavaScript函数

AjaxHelper的应用

修改Index视图和控制器实现无刷新查询
1. 添加两个jQuery引用
2. 修改成无刷新表单

	<script src="~/Scripts/jquery-3.4.1.js"></script>
    <script src="~/Scripts/jquery.validate.js"></script>
    <script src="~/Scripts/jquery.validate.unobtrusive.js"></script>

@using (Ajax.BeginForm("GetUserList", new AjaxOptions { UpdateTargetId = "Surebtn" ,OnSuccess = "Success",  HttpMethod="post",Confirm = "确定查询"}))
    {
        <input type="radio" name="Sex" value="男" />@("男")
        <input type="radio" name="Sex" value="女" />@("女")
        <input type="submit" value="加载所有用户" id="Surebtn"/>
        <hr />
        <table id="tb">
            <tr id="title">
                <td>账号</td>
                <td>姓名</td>
                <td>性别</td>
                <td>年龄</td>
                <td>电话</td>
                <td>密码</td>
            </tr>
        </table>
    }

ASP.NET MVC中Ajax

文章目录