ASP.NET MVC中Ajax

一、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

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

返回JSON数据

使用场合

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

认识JSON格式数据

  1. JSON(JavaScript Object Notation)是一种轻量级的数据交换格式
  2. 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的优点

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

XML的缺点

  1. XML文件庞大,文件格式复杂,传输占带宽;
  2. 服务器端和客户端都需要花费大量代码来解析XML,导致服务器端和客户端代码变得异常复杂且不易维护;
  3. 客户端不同浏览器之间解析XML的方式不一致,需要重复编写很多代码;
  4. 服务器端和客户端解析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格式能直接为服务器端代码使用,大大简化了服务器端和客户端的代码开发量,且完成任务不变,并且易于维护。

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

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

Ajax数据格式比较

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

AjaxHelper成员

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

AjaxHelper的应用

  1. 修改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>
    }
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 撸撸猫 设计师:C马雯娟 返回首页