Ajax与ashx异步请求的简单案例

Ajax与ashx异步请求的简单案例:

前台页面(aspx):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="js/jquery-1.5.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        function gettext() {
            var intxt = $("#intxt").val();
            $.ajax({
                type: "POST",
                cache: false,
                url: ‘OutText.ashx‘,
                data: { InText: intxt },
                dataType: "text",
                beforeSend: function () { },
                success: function (data) {
                    var outtext = document.getElementById("<%=outtxt.ClientID %>");
                    outtext.innerHTML = data;
                },
                error: function (XmlHttpRequest, textStatus, errorThrown) {
                    alert(XmlHttpRequest.responseText);
                }
            });
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input id="intxt" type="text" size="20" onblur="gettext()"/>
        <asp:Label ID="outtxt" runat="server"></asp:Label>
    </div>
    </form>
</body>
</html>

type: 传递方式。
cache:是否使用缓存。

url:接收的url地址。

data:传递参数。

datatype:传递参数的格式。

beforeSend:局部事件,请求开始时触发。

success:请求成功事件。

error:请求失败事件。

下面是OutText.ashx文件:

<%@ WebHandler Language="C#" Class="OutText" %>

using System;
using System.Web;

public class OutText : IHttpHandler {

    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";
        HttpRequest Request = context.Request;
        string intxt = context.Request["InText"].ToString();
        context.Response.Write(intxt);
        context.Response.End();
    }

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

好了!一个简单的Ajax异步请求就完成了。如果要与数据库交互的话,可以在ashx文件里面操作。

时间: 2024-08-24 03:19:36

Ajax与ashx异步请求的简单案例的相关文章

jQuery框架+DWR框架实现的Java Web中的Ajax效果(异步请求,局部刷新)

一 简介和实现效果 这里用一个小例子来简单举例说明,做一个搜索引擎搜索提示效果,通过不断输入字符,然后在下方给出搜索提示.效果图如下: 通过上图可以看到,当输入一个"a"时,提示了很多内容,然后继续输入一个"e"后,提示的范围明显就变小了. 注:在文末我会给出完整源代码的下载链接,以供大家参考 二 具体实现 1 在eclipse for java ee中创建一个Java Web工程,然后导入相应的jar包,特别说明的是:这里要导入一个额外的dwr.jar.也就是说,

使用AJAX技术发送异步请求,HTTP服务端推送

使用AJAX技术发送异步请求 什么是AJAX AJAX指一步Javascript和XML(Asynchronous JavaScript And XML),它是一些列技术的组合,简单来说AJAX基于XMLHttpRequest让我们在不重载页面的情况下和服务器进行数据交换. 加上JavaScript和DOM(Document Object Model,文档对象模型),我们就可以在接收到响应数据后局部更新页面.XML指的是数据的交互模式,可以是纯文本(Plain Text).HTML或JSON.

【转】关于“不同浏览器的并发异步请求”的简单研究

之前在开发过程中有发现在一个页面内同时对单个url发出多个Ajax请求最后完成回调的只有最后一个.具体是什么原因导致的呢?针对这个问题,本人做了进一步的测试. 对于单个页面内并发的异步请求分为以下几种情况: 并发多个相同url的请求 并发多个不同url的请求(参数不同,协议相同) 并发多个不同url的请求(参数和协议都不同) 测试方法: 客户端:同时发出N异步请求,并输出发出请求的时间:当服务器返回相应数据后将接受请求的时间输出,并输出之前所发送的请求的标识ID. 服务器:服务器接到请求后延时一

黑马eesy_15 Vue:03.生命周期与ajax异步请求&amp;&amp;04.vue案例

黑马eesy_15 Vue:02.常用语法 vue的生命周期与ajax异步请求 1.Vue的快速入门2.Vue的语法 插值表达式 事件的绑定 数据的显示 逻辑判断和循环输出3.Vue的生命周期 8个生命周期的执行点 4个基本的 4个特殊的4.axios的ajax异步请求 它和jquery的ajax比较相似 5.综合案例    实现用户的查询列表和更新操作        前端:Vue        后端:ssm 3.VueJS生命周期 每个 Vue 实例在被创建之前都要经过一系列的初始化过程. v

jQuery基础(Ajax,load(),getJSON(),getScript(),post(),ajax(),同步/异步请求数据)

1.使用load()方法异步请求数据 使用load()方法通过Ajax请求加载服务器中的数据,并把返回的数据放置到指定的元素中,它的调用格式为: load(url,[data],[callback]) 参数url为加载服务器地址,可选项data参数为请求时发送的数据,callback参数为数据请求成功后,执行的回调函数. 2.使用getJSON()方法异步加载JSON格式数据 使用getJSON()方法可以通过Ajax异步请求的方式,获取服务器中的数据,并对获取的数据进行解析,显示在页面中,它的

Ajax技术(异步请求)

Ajax技术 Ajax全称为Asynchronous Javascript And XML,它的核心技术是 XMLHttpRequest对象.指的是异步JavaScript和XML技术,是WEB 2.0中的一项关键技术,它允许把用户和WEB页面的交互性与web浏览器和服务器的通信分离开来. 他结合了CSS(Cascading Style Sheets 层叠样式表).HTML和DOM等多种技术,允许在客户端浏览器的ajax程序以异步的方式和web服务器通信,达到页面的局部更新效果,实现了丰富的用户

重写ajax方法实现异步请求session过期时跳转登录页面

jQuery(function($){ // 备份jquery的ajax方法 var _ajax=$.ajax; // 重写ajax方法, $.ajax=function(opt){ var _success = opt && opt.success || function(a, b){}; var _error = opt && opt.error || function(a, b){}; var _opt = $.extend(opt, { success:functi

使用JQuery 的$.ajax 方法进行异步请求,导致页面闪烁

情景 目前有个需求是在文本框填入内容,自动触发keyup事件,下拉列表会自动过滤相应的选项,但是使用了$,ajax后发现,每次触发事件时,都导致整个网页闪烁,触发了全局ajax事件 代码片段 $.ajax({ type: "POST", url: root + "/xxx, data: requestData, dataType: "json", success: function(data){ // 清空列表 $("#formOpinion #

Ajax异步请求(二)

业精于勤,荒于嬉:行成于思,毁于随. ----致自己 目录: 二.jQuery四种常用的Ajax请求方式简介 1.$.ajax() 2.$.get() 3.$.post() 4.$.getJSON() ==================1.$.ajax()======================== jQuery在异步请求方面封装的较好,直接使用Ajax比较麻烦,jQuery大大简化了我们的使用,不用考虑浏览器之间的差异了. $.ajax()是jQuery底层ajax的实现,$.get()