异步Ajax

Ajax异步刷新应用在Web开发中经常用到,在过去WebForm中通常是使用JQuery和一般处理程序或者aspx页面来实现;

在MVC中,虽然依然可以使用一般处理程序,但是一般还是通过在Controller中新建Action方法来实现。

一、 JQuery+一般处理程序

1.新建一个空MVC项目,命名为AjaxDemo

2. 右键项目,选择“添加->HTML页”,命名为ShowDateTime.html,引入jquery文件(NuGet下载jquery),代码如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <meta charset="utf-8" />
    <script src="Scripts/jquery-3.1.1.min.js"></script>
    <script>
        $(function () {
            $("#btnGetDateTime").click(function () {
                $.post(
                    "GetDateTimeHandler.ashx",
                    {},
                    function (data) {
                        $("#divDateTime").html(data);
                    });
            });
        })
    </script>
</head>
<body>
    <input type="button" value="获取时间" id="btnGetDateTime" />
    <div id="divDateTime"></div>
</body>
</html>

3. 右键项目,选择“添加->新建项->一般处理程序”,并设置名称为GetDateTimeHandler.ashx,修改代码:

 public class GetDateTimeHandler : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            context.Response.Write(DateTime.Now.ToString());
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }

4. 运行ShowDateTime.html(右键该文件,在浏览器中查看),如下图:

时间: 2024-08-24 06:24:55

异步Ajax的相关文章

vue和jQuery嵌套实现异步ajax通信

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible&qu

纯JavaScript实现异步Ajax的基本原理

Ajax实际就是XMLHttpRequest对象和DOM.(X)HTML和CSS的简称,用于概括异步加载页面内容的技术. Ajax实例 HTML代码如下,包含一个h5标题和一个按钮: JS代码如下: 上述代码中核心对象是XMLHttpRequest,这正是Ajax的技术基础.所有现代浏览器均支持XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject). XMLHttpRequest 用于在后台与服务器交换数据.这意味着可以在不重新加载整个网页的情况下,对网页的某

jQuery之异步Ajax请求使用

$.ajax({type:'',data:'',async:''...}) 参数: 1.cache: true缓存页面 false 不缓存页面 (默认: true,dataType为script和jsonp时默认为false) 1.type:  GET /POST 请求方式 ("POST" 或 "GET"), 默认为 "GET".注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但仅部分浏览器支持. 2.async: tr

同步 异步 AJAX JS

jQuery:$post.$get.$ajax与php,实现异步加载 什么是异步加载? 整个最通俗的说法就是将另外一个页面上的数据通过append() 或者 html()等函数插入到本页上.纯js写法responseXML 或 responseText插入到页面中. 另外一个页可以是静态页面的可以是动态页面的,更可以是json.xml数据. 原理基本都差不多,页面方便很多只要得到我们想要的代码插入来就行,json和xml那就需要我们解析并将适当的数据放到适当的位置就行. 动态页面只要生成json

异步ajax请求数据处理

jQuery.ajax(url,[settings]) 概述 通过 HTTP 请求加载远程数据. jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax() 返回其创建的 XMLHttpRequest  对象.大多数情况下你无需直接操作该函数,除非你需要操作不常用的选项,以获得更多的灵活性. 最简单的情况下,$.ajax()可以不带任何参数直接使用. 注意,所有的选项都可以通过$.ajaxSetup()函数来全局设置. 回调函数 如果要处理$.aj

多个异步ajax请求指定顺序执行

1.比如2个ajax请求,把第二个ajax请求放在第一个ajax请求success方法里面. 2.ajax请求时添加 async: false,//使用同步的方式,true为异步方式.结果是只有等服务器返回信息以后才会继续执行后面的代码.默认为true. 3. ajax6 = $.ajax( { url: "/Home2/SelectyjLoginuser", dataType: "json", type: "post", success: fu

关于异步——AJAX

MTV 与 MVC MVC : Model View Controller 模型-视图-控制器 是一种Web架构的模式.特点:把业务逻辑.模型数据.用户界面分离开来,让开发者将数据与表现解耦. Model: 代表数据存取层, View 代表的是系统中选择显示什么和怎么显示的部分, Controller 指的是系统中根据用户输入并视需要访问模型,以决定使用哪个视图的那部分. MTV : Model Templates View 模型-模板-视图 1.Models:数据存取层. 该层处理与数据相关的

jquery异步ajax与服务器通信过程中如何通过then方法链式传递多层数据

我们在有些地方可能需要对服务器返回的参数做多步处理,或者很多复杂的操作必须等到服务器返回结果之后才会执行,那么我们可以用链式调用的then方法让这里做到更加易于扩展,也更加容易分离出各个功能模块.基本的方法如下. 1 doSubmit: function(){ 3 $.ajax({ 4 url: url, 5 type: 'post', 6 data: $("#fm").serialize(), 7 dataType: 'html' 8 }).then(function(data){

jQuery ajaxFileUpload.js 文件异步ajax上传

jQuery.extend({ createUploadIframe: function(id, uri)    {        //create frame        var frameId = 'jUploadFrame' + id; if(window.ActiveXObject) {            var io = document.createElement('<iframe id="' + frameId + '" name="' + fram