一步一步学asp.net ajax

虽然学了1年多的asp.net,走了好多弯路,不过每一次体验都让人难以忘怀,马上要奔大四了,慢慢的开始总结,以前做过的东西,更多的是重新写以前的项目,以前虽然参加一些项目,但是感觉根本写的都是垃圾,堆砌功能,学校环境下,也能理解,不过,慢慢的开始学会自己总结,自己重构,也感受到每天的进步!

今天开始,在博客园写博客,慢慢的积累心得!与大家一起进步!


任务:做(母板页面)一个关于新闻类别加载的ajax

主要实现数据的动态加载

我们先查看数据内容

接下来我们要学习怎么用jquery 实现ajax的新闻类别

ajax请求我们首先要熟悉,json数据,我们的ajax通过json传输,

好处:数据与界面分离,界面的变化无关数据,后台只负责提供数据,我们的数据甚至可以直接调用后台类别管理的方法,重用性高

而且,性能极佳,我们甚至可以通过缓存的方式缓存类别,因为类别信息加载,前台页面的类别加载非常频繁,而且易于维护与修改.用户体验好.

坏处:需要js和jquery功底,需要手动编写jquery ajax的脚本.

我们首先要知道2个jquery函数,一个是$.ajax,主要是用来做ajax请求用的,一个是$.parseJSON用来转义ajax的,还有一个是$.each用来遍历的,相当于foreach,查阅jquery api:

$.parseJSON

接下来是$.each

有了这些准备,我们还要写一个后台的数据提供者,这个可以直接从后台调用,这里仅列出,后台json数据的

生成方法,

生成的json数据格式

然后就是对json数据的处理过程

首先我们要通过ajax获取后台的数据,ajax就通过这么调用

$(function(){

$.ajax({

url:"Admin/News/Data/GetNewsInfo.ashx?method=GetNewsTypeForCombox",

type:"get",

success:function(text){   //这个是回调函数

// alert(text);

var JsonData=$.parseJSON(text);

$("#m2").empty();//先清空m2子元素的内容

$.each(JsonData,function(key,value){   //注意这里

$("#m2").append("<a href="+value.TypeId+">"+value.TypeName+"</a>");

// alert(key+" "+value.TypeId+" "+JsonData[key].TypeId+" "+JsonData[key].TypeName);

//each方法,可以通过测试,查看具体含义

});

}

});

});

实现效果

接下来,我们要做的就是给类别信息加缓存,因为母板页频繁加载,而且,这些信息没有必要反复读取数据库,我们就通过缓存处理,在后台添加缓存机制

这样一个完整的ajax,就成功完成了!

是不是很有成就感?

一个ajax页面的响应速度,各方面要快得多,而且,配合缓存,性能非常好!

用三层改写以前的项目,后台采用了三层构架的设计,也第一次真正感受到了架构之美!扩展的便利性!配合手写的代码生成器和分布类修改更简洁更方便!

.

总结:这样我们一个简单的新闻类别就实现了,虽然简单,但是一个高性能可扩展的网站,更为重要的是主体架构,在这里ajax通过json传输数据,后台通过ashx页面实现,实现了业务与数据的分离,后台只负责数据的供应,前台实现数据的展示,这种UI与数据的分离,是网站架构的第一步.

作者 cnblogs tianzh

(0)

相关推荐

  • 一步一步学asp.net ajax

    虽然学了1年多的asp.net,走了好多弯路,不过每一次体验都让人难以忘怀,马上要奔大四了,慢慢的开始总结,以前做过的东西,更多的是重新写以前的项目,以前虽然参加一些项目,但是感觉根本写的都是垃圾,堆砌功能,学校环境下,也能理解,不过,慢慢的开始学会自己总结,自己重构,也感受到每天的进步! 今天开始,在博客园写博客,慢慢的积累心得!与大家一起进步! 任务:做(母板页面)一个关于新闻类别加载的ajax 主要实现数据的动态加载 我们先查看数据内容 接下来我们要学习怎么用jquery 实现ajax的新

  • 一步一步学asp.net Ajax登录设计实现解析

    任务需求:做一个登录,拥有自动记住账号和密码的功能,要保证安全性,ajax,无刷新,良好的用户体验.(母板页) 这是前台页面,要求实现用户登录 首先我们分析, 用户需求: 1. 登录以后,登录框隐藏,并且欢迎登录的框显示,并且,左上角登录的按钮消失,安全退出显示. 2. 如果选择记住帐号和密码,下次登录直接登录,并且保证安全性. 实现过程: 首先,登录的时候发出ajax请求,用户验证登录,登录以后,保存当前用户名和密码到cookies中,注意,密码要用md5加密,md5是根据用户的机器配置生成的

  • 一步一步跟我学易语言之认识窗口组件和子程序

    认识窗口组件(基本常用组件,扩展组件,外部组件) 看到了吗?易语言自带的组件.你会发现,组件工具箱里没有窗口这个组件,其实窗口是一个最基本的组件,其它组件都包容(画)在窗口上.如果要添加窗口,我们可以到易语言菜单的"插入"项,单击"新窗口".或者到工作夹(下图) 要编写出强大.实用的程序,光有窗口是远远不够的,还要有一些常用的组件,如:编辑框.图片框.外形框.画板.分组框.标签.按钮.选择夹.时钟等.它们的添加方法就要简单的多了.用鼠标左键单击要添加的组件,然后将鼠

  • 一步一步教你网站同步镜像(转载)

    1.介绍 现在的网站随着访问量的增加,单一服务器无法承担巨大的访问量,有没有什么方便快捷的方式解决这个问题呢,答案是"有"!比如建立服务器群,进行均衡负载. 但是如果要解决像电信网通这样的互访问题(中国网民的悲哀..),这个解决办法就无能为了了! 要解决这个问题最方便快捷的方式就是建立镜像网站!由访问者自己选择适合自己网络的速度最快的网站!这样即可以解决线路问题,又可以解决访问量问题! 2.网站同步的数据分类 网站数据基本分为两类: 一类是文件,比如HTML,ASP,PHP等网页文件,

  • [ASP.NET AJAX]Function对象及Type类的方法介绍

    上一回我们从总体上认识了JavaScript Microsoft AJAX Library由于临时有事,没有加入事例显得有点抽象,这一回一定会通过一些事例更加直观的来会一会Asp.NET Ajax脚本库中一个很是重要的类Type.这个类提供了一些扩展面向对象编程的一些反射方法,通过这个类我们可以注册类似.NET中的一些(如:命名空间,类,枚举等等)基本类型.这个Type类继承自window是一个Global类型,不属于任何命名空间.下面我们来看看Type中的一些基本方法以及是怎样实一些方法的实现

  • 一步一步封装自己的HtmlHelper组件BootstrapHelper(三)

    前言:之前的两篇封装了一些基础的表单组件,这篇继续来封装几个基于bootstrap的其他组件.和上篇不同的是,这篇的有几个组件需要某些js文件的支持. BootstrapHelper系列文章目录 C#进阶系列--一步一步封装自己的HtmlHelper组件:BootstrapHelper C#进阶系列--一步一步封装自己的HtmlHelper组件:BootstrapHelper(二) C#进阶系列--一步一步封装自己的HtmlHelper组件:BootstrapHelper(三:附源码) 一.Nu

  • asp.net AJAX注册类

    1.注册命名空间 Type.registerNamespace("wallis"); 就是将wallis加入window中,然后就可以直接在任何地方使用该命名空间(window是全局的,而且使用时可以省略) 2.注册类 wallis.Animal.registerClass("wallis.Animal"); 在MicrosoftAjax.js中可以找到 Type.prototype.registerClass = function Type$registerCla

  • 解决asp.net ajax sys未定义的解决方法

    出现这种错误,一般是缺少2个文件,放到项目或者服务器根目录下 新建记事本,随便打上几个字母,分别保存为以下2个文件,上传即可解决 WebResource.axd , ScriptResource.axd 或参考如下方法:每个人碰到的原因可能不一样. 首先,我们看一下网上出问题的同志们虽说都是"Sys 未定义",但是情况却不尽相同,有的人使用的是Atlas版本,有的使用的Asp.net ajax Beta,有的则是正式发行版Asp.net ajax Beta,所以解决的方法也有区别了.下

  • Asp.net ajax实现任务提示页面的简单代码

    复制代码 代码如下: <%@ Page Language="C#" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server">    void WaitFiveS

  • asp.net AJAX实现无刷新获得数据

    register.aspx页面代码: <script type="text/javascript"> function checkuser() { var option={ parameters:"userid="+$("userid").value, method:"post", onSuccess:function(transport){ var rp=transport.responseText; if(rp

随机推荐