源栈培训:ASP.NET MVC-7:Ajax

更多
2019年08月06日 14点46分 作者:叶飞 修改

历史和现状

名称由来:Asynchronous Javascript And XML:

  • Asynchronous :异步
  • JavaScript:通过Javascript技术实现和应用
  • XML:XMLHttpRequest对象,在IE5中首次引入,是Ajax的核心

可以说,没有Ajax,就没有JavaScript的今天!

  1. 微软引入:
  2. 惊艳全场:Google提示和Google地图
  3. 蓬勃发展:
    • JQuery极大的简化了Ajax的应用
    • 目前的“前后端分离”运动,正试图使用Ajax作为前后台传输的唯一方式其阻碍:
      1. JavaScript语言本身的缺陷
      2. SEO需要

题外:Ajax甚至是ASP.NET WebForm衰落的一个重要原因(富服务器端 vs 富客户端)

主要特点:

  • 仍然是一个HTTP请求,所以遵守HTTP协议
  • 无页面刷新的交互,提升了用户体验
  • 可以只获取“部分页面”甚至是简单数据,降低了流量消耗


MVC内置Ajax


[Remote]:远程验证

  1. 首先在需要验证的属性上添加[Remote]特性,指定action/controller等
            [Remote("IsNameDuplicated", "Register", ErrorMessage = "* 用户名重复", HttpMethod = "GET")]
            public string UserName { get; set; }
  2. 然后按照上述action和controller,添加一个Action:
            //必须返回一个JsonResult
            public JsonResult IsNameDuplicated(string UserName)//UserName就是需要验证的属性名称
            {
                return Json(UserName != "zyfei",  //true:通过验证
                    JsonRequestBehavior.AllowGet);
            }
  3. 生成的HTML代码里面就会包含相关信息:
    <input data-val="true" data-val-remote="* 用户名重复" data-val-remote-additionalfields="*.UserName" data-val-remote-type="GET" 
    data-val-remote-url="/Register/IsNameDuplicated" id="UserName" name="UserName" type="text" value="">
  4. 当用户输入用户名后,焦点移出输入框,Ajax请求会自动发起:


Ajax Form

首先需要引入jquery.unobtrusive-ajax.js

<script type="text/javascript" src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
使用Ajax.BeginForm
@using (Ajax.BeginForm("Post", "Problem", 
    new { id = ViewContext.RouteData.Values["id"] }, 
    new AjaxOptions
    {
        Confirm = "确认提交",   //提交之前确认
        AllowCache = false,
        HttpMethod = "POST",
        UpdateTargetId = "comments",    //返回数据在id=comments的DOM元素中更新
        InsertionMode = InsertionMode.InsertAfter,  //更新方式
        LoadingElementDuration = 3,
        LoadingElementId = "wait",
        OnBegin = "alert('开始Ajax提交了')",
        OnSuccess = "alert('提交成功')",
        OnFailure = "alert('提交失败')",
        OnComplete = "alert('提交完成,无论成功还是失败')",
    }))
{
    @Html.TextAreaFor(m => m.NewPost)
    <button type="submit">提交</button>
}


JQuery实现

$.load():将结果直接填充到DOM元素

  • 注意:异步和callback。比较这两种写法的区别:
            $("#comments").load("/Problem/Posts", function () {
                alert('加载完成!');
            });
            $("#comments").load("/Problem/Posts");
            alert('加载完成!');
  • 三个常用的Ajax回调函数参数:responseText, textStatus, jqXHR(XmlHttpRequest)

$.get():获取数据,自定义callback函数处理

        $.get("/Problem/Posts", function (data) {
            //等同于$("#comments").load("/Problem/Posts");
            //$("#comments").html(data);

            //还可以做其他处理
            alert(data);
        })

$.post():同get,但使用POST发起请求,通常会要求带data。通常我们使用:

        ////把testform表单里面的所有数据序列化,效果类似于表单提交
        $("#formId").serialize()
获取form表单数据,或者使用自定义的对象格式:
        //传到后台Model绑定成IList<contents>
         { 'contents[]': ["oh, my God", "how smart!"] }

$.ajax():最底层最全面JQuery实现

  • 核心参数:url
  • callback函数执行顺序:
    1. beforeSend:$.ajax()方法调用之后,ajax请求发送之前,一般用于提示或防重复提交
    2. success:ajax请求成功完成,客户端获得请求结果:data
    3. error:服务器端未能成功返回请求结果。推荐总是使用,弹出错误提示(尤其是开发调试时)
    4. complete:无论成功失败,Ajax请求完成之后,通常用于恢复DOM状态
  • 其他:
    • method/type:GET/POST/PUT/DELETE……
    • cache:
    • contentType:request的类型,分为:
    • dataType:response的类型,分为:text/html/json……
    • async:是否异步
    • statusCode:根据repsonse的statusCode(比如404)设置相应的回调函数

原生JS代码写Ajax

    //获得ajax请求的核心对象
    var xmlhttp = new XMLHttpRequest();
    //GET: 请求方法,还可以是POST等
    //"/Problem/Posts":Ajax请求的地址
    //true: 异步执行
    xmlhttp.open("GET", "/Problem/Posts", true);
    //参数可选,通常POST时使用
    xmlhttp.send("name=fg&password=1234");

通过xmlhttp.responseText可以获取请求返回数据,但因为Ajax的异步执行,我们需要使用特定事件的callback函数,如:

    xmlhttp.onreadystatechange = function () {
        //readyState标记XMLHttpRequest的状态
        //0: 请求未初始化
        //1: 服务器连接已建立
        //2: 请求已接收
        //3: 请求处理中
        //4: 请求已完成,且响应已就绪
        if (xmlhttp.readyState == 3) {  
            alert(xmlhttp.readyState + ":" + xmlhttp.responseText);
        }
    }
    xmlhttp.onloadend = function () {
        document.getElementById("comments").appendChild(xmlhttp.responseText);
    }
    xmlhttp.addEventListener("load", function () {
        console.log(this.responseText);
    })

作业

使用Jquery的post()实现求助的应答



源栈培训 ASP.NET Ajax
赞: 4 踩: 2

打赏
已收到打赏的 帮帮币

你的 打赏 非常重要!
为了保证文章的质量,每一篇文章的发布,都已经消耗了作者 1 枚 帮帮币
没有“帮帮币”,作者无法发布新的文章。

全系列阅读
评论 / 0
叶飞的系列文章

源栈培训:ASP.NET全栈开发

飞哥的源栈培训:线上全程直播,免费收看;线下拎包入住,按周计费。本系列收录所有讲义(含视频录播地址)

编程那些事:菜鸟入门

大飞哥倾力之作,面向有意入行IT/开发/编程的初学者,欢迎任何形式的留言建议……

从包工头到程序猿

真实故事,讲述我在家装公司关门之后,如何转行成为一个程序猿的故事。(《折腾》第三卷)

《折腾》(卷一)青涩

时间段:从大学毕业到开始创业。离开青葱校园,涉世之初的那些往事……

《折腾》(卷二)风雨 之(1)工地

我一个完全的门外汉(无论装修还是管理),开始给黎叔装修房子。从踌躅满志,到四处碰壁;从一往直前,到左右为难……

《折腾》(卷二)风雨 之(2)胸怀

作为一个律师,接工程没签合同,被狠狠的坑了一把!年轻人暴烈的想要复仇,黎叔教他一个企业家的胸怀……

《折腾》(卷二)风雨 之(3)渠道

成立了公司,招聘了员工,开始大力的拓展业务,一个接一个的坑,摔倒了又爬起来……

《折腾》(卷二)风雨 之(4)视野

经历残酷现实的磨砺,终于明白:干啥事,都不能闭门造车,人要走出去,开阔视野……

未分类

系统自动生成的未分类系列

一锅大杂烩

从律师到包工头,从码农到写手,读书交友生活创业,各种零零碎碎,乱七八糟……

人人都是程序猿

计算机编程普及课程,视频:https://space.bilibili.com/55410301/#/channel/detail?cid=49491

全部
关键字



帮助

反馈