|
1、问题背景
现在，越来越多人开始尝试基于Ajax进行无刷新的Web开发，不过，在.Net环境下，应用Ajax并不是非常方便，这主要可能是由以下一些原因造成的： ·由于Ajax基于javascript的本质，使得开发者必须对javascript非常了解，起码，其javascript能力足以实现对callback返回内容对页面的更新，所以开发的门槛就有一定程度的上升 ·当基于Ajax机制进行开发时，原有的基于postback方式下时，asp.net由后台逻辑代码（Model），aspx页面(View)、aspx.cs(Controller)构成的MVC构架其实失效了，当callback返回数据时，要么在client端用javascript解析返回内容以实现更新，要么则必须在server端构造好比较完整的html代码，再直接由javascript将该构造好的html设置给某个页面对象，很显然，这样一来，要实现一个最简单的callback功能，都要不少代码，并且是相对比较乱的代码，即使在即将到来的asp.net2.0该问题依然不会得到有效解决 2、本文目的 本文旨在充分利于现有的asp.net本身的特点和ajax的特性，提出一个用于在asp.net环境下进行基于ajax的web开发的MVC方案，以实现以下主要目的： ·Asp.Net环境下用于Ajax的清晰的MVC构架 ·降低编程人员对过多javascript编码的依赖以降低编程门槛 ·灵活的支持ajax模式下的常用开发方式 3、问题分析 如何实现以上几个主要目的呢？ １）要对xmlhttprequest对更良好的封装，以使调用方式更简单； ２）尽量在server端进行更新数据的构造，但是也要避免每次返回数据都手工构造，因此，就想到可以充分使用UserControl，由UserControl作为"View"，对应的由ascx.cs文件作为"Controller"，这样构成的MVC也是比较清晰的； 4、问题解决 基于以上思想，本人实现了以下一个组类库以简化该过程： 源码及范例下载 代码简析： １）首先在client端，AjaxHelper.js封装了xmlhttprequest，并提供一个将现有的<form>序列化为形如param1=v1¶m2=v2&...形式用于post的参数； Updater(ajaxTemplate, output, params, onComplete)函数，用于实现一次callback调用 ajaxTemplate（必选）：指定执行需要功能的UserControl路径 output（可选）：填充返回数据的指定标签的引用或ID值 params（可选）：形如param1=v1¶m2=v2&...的post参数 onComplete（可选）：可用于对返回数据进行特殊处理的回调函数，函数格式function(str)，str为返回的数据 SerializeForm(form)函数，用于序列化<form> form：可以是对指定<form>的引用或ＩＤ值 ２）在server端，Ajax.aspx文件封装了对由客户端ajaxTemplate指定的UserControl的调用，其余的具体逻辑功能则在特定的UserControl及其ascx.cs内实现； ３）这样，具体执行一次callback时，编程人员只需在页面引用AjaxHelper.js，并在指定的位置通过javascript:Updater(ajaxTemplate, output, params, onComplete)进行调用，如果需要对某一form进行提交，则可调用javascript:SerializeForm(form)序列化该form并传给params，当然也可以手动构造params，并指定将返回数据通过设置output应用的页面或通过onComplete自定义处理。 ４）由于充分使用UserControl，意味着，可以充分利用asp.net原有的web服务器端控件和数据绑定机制，这样其实，已经很大程度上简化了返回数据的构造，在ascx.cs中，通过Request.Form[ParamName]就能访问到client端传入的params，再访问逻辑代码获取源数据。 5、范例 包含在源码中的范例实现了一个简单的无刷新获取博客园首页内容到一个textarea的功能，详见源码！ 部分范例源码： Default.aspx   <% @ Page language="c#" Codebehind="Default.aspx.cs" AutoEventWireup="false" Inherits="CN.Teddy.AjaxHelper.WebForm1" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > <HTML> <HEAD> <title>WebForm1</title> <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1"> <meta name="CODE_LANGUAGE" Content="C#"> <meta name="vs_defaultClientScript" content="JavaScript"> <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5"> <script type="text/javascript" language="javascript" src="js/AjaxHelper.js"></script> </HEAD> <body> <form id="Form1" method="post" runat="server"> <div id="view2">loading </div>  <script type="text/javascript">  Updater(‘AjaxTemplate/GetPageSrc‘, ‘view2‘, ‘url=http://www.cnblogs.com‘); </script>  </form> </body> </HTML> AjaxHelper.js摘要：  var AjaxHelperUrl = new String("Ajax.aspx");    var Updater = function(ajaxTemplate, output, params, onComplete)  {  if (typeof output == ‘string‘)  {  output = $(output);  }    new Ajax.Request( ‘Ajax.aspx‘, { onComplete: function(transport) { if (output != null) { output.innerHTML = FormatContent(transport.responseText); } if (onComplete != null) { onComplete(FormatContent(transport.responseText)) } }, parameters: params + ‘&AjaxTemplate=‘ + ajaxTemplate });  }    var SerializeForm = function(form)  {  return Form.serialize(form);  }    var FormatContent = function(str)  {  var content = new String(str);  var prefix = new String("<!--AjaxContent-->");  content = content.substring(content.indexOf(prefix, 0) + prefix.length, content.length - 9);  return content;  }UserControl GetPageSrc.ascx.cs摘要：  private void Page_Load(object sender, System.EventArgs e)   { lbUrl.Text = Request.Form["url"];  System.Net.WebClient client = new System.Net.WebClient (); client.Headers.Add("User-Agent", "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; .NET CLR 1.1.4322)"); try  { txtPageSource.Text = new System.IO.StreamReader(client.OpenRead(lbUrl.Text), System.Text.Encoding.UTF8).ReadToEnd(); } catch(Exception ex)  { throw ex; } } Enjoy! //文章结束 |
|
|
Feedback
关于Ajax技术的讨论，我建议你可以和李锟（MSN：unruly_wind@sina.com）多多交流，他对此已经有很多的经验，尤其是对http://maps.google.com的应用研究，当然，如果能够得到你的联系方式更好了
你说的两个东西都是对xmlhttprequest的不同封装实现而已，我都花时间研究过，这两个封装和我的代码在callback机制上本质是一样的，我的代码中的ajax封装，基于prototype1.2的一个ajax实现，是与后台语言独立的，调用方式也比你说的这两个简单，并且我的框架可以很容易的移植到非.net平台。
而最重要的是，你说的这两个ajax实现，会造成本文要解决的问题之一asp.net原有的mvc构架在这两种应用模式下会被破坏，我的框架的设计初衷就是解决这一问题，重新搭建一个清晰的mvc。
第一感觉就是必须在Client端进行数据的绑定，觉得这比较麻烦。
刚刚看过Teddy的，使数据在Server端绑定，确定方便了不少。
不过刚刚没有调试成功，现在正在找原因。
个人愚见，没仔细研究过，说错了请指正。
只是，
好像没办法成功访问ajdx.aspx文件。
这是什么原因呢？
js里面默认是用‘Post‘方式传递参数的，可是，不知道是因为什么原因，合使用Post参数导致根本无法访问到ajax.aspx文件，于是我改成用‘get‘方式，就可以了。请问这是什么原因呢？
发现‘post‘不行是因为我期间把请求源码的地址改为‘http://www.‘，它会返回一个关于‘post‘的错误页面，于是就发现了这个问题。
你们调试是不是这样的呢？
你的情况我没遇到过，不过，通过get方式传递对参数长度有限制，一般应该在255个字符之内，post应该能大一点，你可以再试试能不能找到post错误的真正原因，找到原因的话希望能共享一下！
Net环境下基于Ajax的MVC方案，有没有更新版呢？
http:///index.php
这个网站这样的用户体验，由于我这个方案数据的填充构造基于UserControl，可以更多利用asp.net原有控件的数据绑定能力，代码量应该能减少不少！
1、下载并解压缩到某路经比如：d:\AjaxHelper
2、为AjaxHelper目录建一个虚拟目录AjaxHelper
3、用VS.Net打开AjaxHelper.sln
4、编译
5、将Default.aspx设为起始页
6、按F5运行
7、页面显示loading...时请稍作等待，此时正在下载指定的网页源码
8、下载源码完毕页面会显示源码内容
再次感谢！
或者说说看你主要在哪一步出错，是编译不通过，还是运行时脚本报错呢？
另外在就是你可以在页面的Updater函数前后加上try{}catch(ex){window.alert(ex)},看看是什么错误！
try{Updater(‘AjaxTemplate/GetPageSrc‘, ‘view2‘, ‘url=http://www.‘);}catch(ex){window.alert(ex)}
也不报错，就是loading没完。
我的QQ是9842766
用了这个技术很久，突然今天发现它有个新名字：Ajax，有意思！
上面的兄弟：
try{Updater(‘AjaxTemplate/GetPageSrc‘, ‘view2‘, ‘url=http://www.‘);}catch(ex){window.alert(ex)}
没用的，访问不到页面并不是JS代码发生异常，catch不到错误的！
http://www.cnblogs.com/teddyma/archive/2005/06/16/175298.html
http://www.cnblogs.com/teddyma/archive/2005/06/19/176859.html
是不是search egine friendly的问题，其实看你的整个网站结构设计，比如，我可以通过site map和url rewrite重写的形式暴露整个站点的页面结构给搜索引擎，完全可以达到需要的效果！