ASP.NET之Ajax系列(二)
在上一次的Ajax操作中,我们使用了ASP.NET原生控件实现,但是弊端很多,效率低下,而且有个文件上传的BUG:http://blog.csdn.net/zhaoqiliang527/article/details/4457961。
于是我们寻求更好的实现方式,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功能的方式,敬请期待!
ASP.NET之Ajax系列(二)的更多相关文章
- [转]ASP.NET MVC学习系列(二)-WebAPI请求 传参
[转]ASP.NET MVC学习系列(二)-WebAPI请求 传参 本文转自:http://www.cnblogs.com/babycool/p/3922738.html ASP.NET MVC学习系 ...
- ASP.NET MVC学习系列(二)-WebAPI请求
继续接着上文 ASP.NET MVC学习系列(一)-WebAPI初探 来看看对于一般前台页面发起的get和post请求,我们在Web API中要如何来处理. 这里我使用Jquery 来发起异步请求实现 ...
- ASP.NET MVC学习系列(二)-WebAPI请求(转)
转自:http://www.cnblogs.com/babycool/p/3922738.html 继续接着上文 ASP.NET MVC学习系列(一)-WebAPI初探 来看看对于一般前台页面发起的g ...
- ASP.NET MVC学习系列(二)-WebAPI请求 转载https://www.cnblogs.com/babycool/p/3922738.html
继续接着上文 ASP.NET MVC学习系列(一)-WebAPI初探 来看看对于一般前台页面发起的get和post请求,我们在Web API中要如何来处理. 这里我使用Jquery 来发起异步请求实现 ...
- ASP.NET之Ajax系列(三)
我们通过前两篇文章的学习,已经大致掌握了Ajax的实现方法,同时也可以对比出两种方式的优劣.但是我们还是没有搞清楚真正的ajax的实现原理,以及最原始的,未经过封装的ajax是什么样的,今天我们一起来 ...
- ASP.NET之Ajax系列(一)
我们在Web开发中经常会接触到Ajax技术,同时Ajax技术也有很多种实现方式,那么,我们今天从第一种方式说起:ASP.NET原生控件实现Ajax. ASP.NET原生控件用于Ajax技术的主要是Up ...
- Asp.Net生命周期系列二
在上回书开始的时候我们提到博客园的IIS看了一眼我的请求后就直接交给ASP.NET去处理了,并且要求ASP.NET处理完之后返回HTML以供展示. 那么我们不仅要问: 1, IIS肯定是没有眼睛 ...
- ASP.NET Core部署系列二:发布到CentOS上
前言: 在上一节中,通过一系列的步骤,已经将项目部署到IIS上,虽然遇到了一些问题,但最终解决并成功运行了.而在这一节中,将尝试通过linux系统的环境下,部署项目,实现Net Core跨平台的亮点. ...
- Asp.Net生命周期系列三
上文讲到了HttpRunTime主要做了三个事情,我们先回忆一下. 第一:雇佣了项目经理(HttpApplication). 第二:建立了HttpModule列表,项目经理(HttpRunTime)就 ...
随机推荐
- python中range和xrange的区别
1.range生成一个列表:xrange生成一个生成器 2.用法都差不多
- hdu---(Tell me the area)(几何/三角形面积以及圆面积的一些知识)
Tell me the area Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) ...
- SQL数据库第一部分
数据库:程序用来存取数据的 ACCESS:自带,比较小,不是很专业 SQL Server:主要用在.NET语言中,比较专业.微软开发 MYSQL:主要用在PHP语言中,比SQL server体积比较小 ...
- 细谈HTML5
回顾过了html接下来我们就来看看HTML5吧! HTML5手机应用的最大优势就是可以在网页上直接调试和修改.原先应用的开发人员可能需要花费非常大的力气才能达到HTML5的效果,不断地重复编码.调试和 ...
- 减少HTTP请求之将图片转成二进制并生成Base64编码,可以在网页中通过url查看图片(大型网站优化技术)
在网站开发过程中,对于页面的加载效率一般都想尽办法求快.那么,怎么让才能更快呢?减少页面请求 是一个优化页面加载速度很好的方法.上一篇博文我们讲解了 “利用将小图标合成一张背景图来减少HTTP请求”, ...
- this和super关键字
this关键字: 1.引用成员变量 2.通过this(参数列表)调用类的重载的构造方法 3.返回对象的值:使用return this,来返回某个类的引用. super关键字: 1.super是一个引用 ...
- 建库和表的脚本.sql
1.一直都记不太清楚,需要新建一个数据库和表的脚本是怎样的,恰巧今天翻到了,特地记录下来,希望以后用的时候记住吧! create database testdb00; use testdb00; cr ...
- 重点关注之Filter的使用(性能计数和错误处理)
Web API中的filter与MVC中的filter非常类似,最主要的不同是,MVC中的filter放在命名空间System.Web.Mvc下,而Web API中的filter则放在命名空间Syst ...
- qml支持多平台的编译--尤其对于需要支持xp的情况
http://www.oschina.net/p/deepin-boot-maker 系统支持: Windows平台: Windows 7/ Windows 8 需要安装显卡驱动 Windows XP ...
- html标签marquee实现走马灯效果(文字浮动)
marquee标签实现文字或图片的移动效果 <marquee direction = "right">文字<marquee>