ASP.NET之Ajax系列2

 在上一次的Ajax操作中,我们使用了ASP.NET原生控件实现,但是弊端很多,效率低下,而且有个文件上传的BUG:

  于是我们寻求更好的实现方式,jQuery的Ajax方法配合ashx一般处理程序。jQuery的好处是兼容性强(背后有一个团队专门负责开发),易用(找个API几分钟就学会了),功能强大(对原生js进行了封装,直接调用方法即可实现很多功能)。Ashx一般处理程序则是MS自家的,从名字可以看出它是用来处理一些东西的(原谅我才疏学浅),而且它在执行的过程中不会对整个页面的生命周期重建,这就避免了控件树生成带来的开销问题。好了,下面我们来讲讲,这两者如何结合可以实现ajax,首先我们建立一个页面:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ashxAjax.aspx.cs" Inherits="WebApplication1.ashxAjax" %>

<!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>jQuery实现Ajax</title>
<script type="text/javascript" src="JavaScript/jquery-11.js"></script>
<script type="text/javascript">
$(function () {
$("#txtId").blur(function () {
var a = $("#txtId").val();
$.ajax({
type: "post",
url: "Handler1.ashx",
data: { m: a },
success: function (result) {
var res = result.toString();
$("#lblShow").html(res);
}
});
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
昵称:<asp:TextBox ID="txtId" runat="server"></asp:TextBox><asp:Label ID="lblShow" runat="server"
ForeColor="Red"></asp:Label><br />
</div>
</form>
</body>
</html>

在这里面我在页面头部引用了最新的jQuery-1.11(好吧那个js文件名字没取好),然后在页面放入一个文本框用于输入昵称,同时在后面有个Label,用于显示用户名是否被注册的消息。

  接下来我们就可以用到jQuery的ajax方法,在本例中,我们的需求是输入昵称后,文本框失去焦点,然后检测该昵称是否存在,于是就有了$("#txtId").blur方法。接下来失去焦点后,我们需要获取文本框的值,然后向ashx文件发起ajax请求:$.ajax({type: "post",url: "Handler1.ashx",data: { m: a },success: function (result) {var res =result.toString();$("#lblShow").html(res);}});

  注意这几个参数一定要写全,首先是提交的方式,我们这里用的是post的方式。然后是URL,就是我们的ashx文件的路径,接下来是参数,在这里我们传入文本框输入的昵称。最后有个success,它表示在请求成功后后续的操作,这里我们是将处理的结果用于Label文字的显示。

  在前端写好js后,我们来看看我们的ashx文件中的代码:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace WebApplication1
{
/// <summary>
/// Handler1 的摘要说明
/// </summary>
public class Handler1 : IHttpHandler
{

public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string Name = context.Request.Params["m"].ToString();
if (userHelper.CheckName(Name) == false)
{
context.Response.Write("该昵称已被注册!");
}
else 
{
context.Response.Write("恭喜,此昵称可以使用!");
}
}

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

 在这个ashx文件中,我们先将传进来的名称作为参数,去调用我们上一节的userHelper类检测昵称是否存在,然后在返回值后再返回不同的文字,用于显示,我们来一起看看效果:

此时发现失去焦点后,代码已经进入断点,这表明我们的ajax请求已经成功!

豆豆这个昵称是存在的,因此我们会在userHelper类中进行处理,并返回false之后,提示用户该昵称已经存在:

我们再来看看输入一个不存在的:最终的结果是提示用户可以使用。

这样表明我们已经实现了jQuery+ashx一般处理程序的方式实现了无页面刷新检测用户名的ajax方式。

  目前在大多数企业开发中,这种ajax实现方式用的较为广泛,它不仅操作容易,而且是轻量级实现,ashx可以返回json字符串,也可以返回xml文件,极为灵活,所以推荐大家都使用这种方式去实现ajax。但是这样的ajax依然不是最原始的实现方式,因为ajax的本意是“Asynchronous Javascript + XML”(异步JavaScript和XML),下次我们一起来探索最后一种用原生的javascript去实现ajax功能的方式,敬请期待!

本文来自http://www.1314721.com.cn/

ASP.NET之Ajax系列2,布布扣,bubuko.com

时间: 2024-10-09 07:27:55

ASP.NET之Ajax系列2的相关文章

ASP.NET之Ajax系列(一)

我们在Web开发中经常会接触到Ajax技术,同时Ajax技术也有很多种实现方式,那么,我们今天从第一种方式说起:ASP.NET原生控件实现Ajax. ASP.NET原生控件用于Ajax技术的主要是UpdatePanel和ScriptManager,前者顾名思义,是一个可以用于盛放内容的容器,用于实现页面的局部更新,在使用的时候直接将需要更新的内容放入即可.后者用于调用一些服务和脚本:例如我们本次Demo中使用JavaScript调用WebService服务. 本次Demo主要包含一个页面,一个W

ASP.NET之Ajax系列(三)

我们通过前两篇文章的学习,已经大致掌握了Ajax的实现方法,同时也可以对比出两种方式的优劣.但是我们还是没有搞清楚真正的ajax的实现原理,以及最原始的,未经过封装的ajax是什么样的,今天我们一起来探索这些之前不了解的地方. 首先在上一篇也提到过,Ajax是异步的Javascript和XML,那么聪明的你应该已经猜到,js脚本是必不可少的.我们在这里先引入一个浏览器对象:XMLHttpRequest,可能大家对这个对象比较陌生,那么我们就先从它的属性开始了解.它主要有三个属性:onreadys

ASP.NET MVC学习系列(二)-WebAPI请求

继续接着上文 ASP.NET MVC学习系列(一)-WebAPI初探 来看看对于一般前台页面发起的get和post请求,我们在Web API中要如何来处理. 这里我使用Jquery 来发起异步请求实现数据调用. 继续使用上一文章中的示例,添加一个index.html页面,添加对jquery的引用. 一.无参数Get请求 一般的get请求我们可以使用jquery提供的$.get() 或者$.ajax({type:"get"}) 来实现: 请求的后台Action方法仍为上篇文章中的GetU

基于DDD的现代ASP.NET开发框架--ABP系列之2、ABP入门教程

点这里进入ABP系列文章总目录 基于DDD的现代ASP.NET开发框架--ABP系列之2.ABP入门教程 ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)”的简称. ASP.NET Boilerplate是一个用最佳实践和流行技术开发现代WEB应用程序的新起点,它旨在成为一个通用的WEB应用程序框架和项目模板. ABP的官方网站:http://www.aspnetboilerplate.com ABP在Github上的开源项目:https://gith

Ajax系列之三:UpdatePanel

UpdatePanel控件也是Ajax里用得最多的控件之一,UpdatePanel控件是用来局部更新网页上的内容,网页上要局部更新的内容必须放在UpdatePanel控件里,他必须和上一次说的ScriptManager控件一起使用.现在来看UpdatePanel的属性 UpdatePanel重要的属性如下: 属性 说明 ChildrenAsTriggers 当UpdateMode属性为Conditional时,UpdatePanel中的子控件的异步回送是否会引发UpdatePanle的更新. R

ABP(现代ASP.NET样板开发框架)系列之23、ABP展现层——异常处理

点这里进入ABP系列文章总目录 基于DDD的现代ASP.NET开发框架--ABP系列之23.ABP展现层——异常处理 ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)”的简称. ABP的官方网站:http://www.aspnetboilerplate.com ABP在Github上的开源项目:https://github.com/aspnetboilerplate 在 web 应用程序中,异常通常是在 MVC Controller actions 和

基于DDD的现代ASP.NET开发框架--ABP系列之3、ABP分层架构

点这里进入ABP系列文章总目录 基于DDD的现代ASP.NET开发框架--ABP系列之3.ABP分层架构 ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)”的简称. ABP的官方网站:http://www.aspnetboilerplate.com ABP在Github上的开源项目:https://github.com/aspnetboilerplate 前言 为了减少复杂性和提高代码的可重用性,采用分层架构是一种被广泛接受的技术.为了实现分层的体系结

ASP.NET MVC学习系列(二)-WebAPI请求(转)

转自:http://www.cnblogs.com/babycool/p/3922738.html 继续接着上文 ASP.NET MVC学习系列(一)-WebAPI初探 来看看对于一般前台页面发起的get和post请求,我们在Web API中要如何来处理. 这里我使用Jquery 来发起异步请求实现数据调用. 继续使用上一文章中的示例,添加一个index.html页面,添加对jquery的引用. 一.无参数Get请求 一般的get请求我们可以使用jquery提供的$.get() 或者$.ajax

给Ajax一个漂亮的嫁衣——Ajax系列之五(下)之序列化和反序列化

给Ajax一个漂亮的嫁衣——Ajax系列之五(下)之序列化和反序列化 标签: ajaxdictionaryjsonobject服务器function 2012-07-25 18:41 2242人阅读 评论(6) 收藏 举报  分类: Ajax(6)  版权声明:本文为博主原创文章,未经博主允许不得转载. Ajax最强悍的功能莫过于服务器和客户端之间的异步交互,他们在交互的时候不是通过soap协议等,而是通过回调函数,以Json的格式传送数据. 由于Json格式的限制,在很多情况下,稍微复杂一些的