`
zendj
  • 浏览: 115699 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
文章分类
社区版块
存档分类
最新评论

详解如何实现最基本的AJAX框架

阅读更多

详解如何实现最基本的AJAX框架


Asp.Net 2.0自带的客户端回调

Asp.Net 2.0已经发布。2.0有了许多新特性,客户端回调就是其中之一。客户端回调允许我们不经过回发而调用服务器端的方法,与AJAX提供的功能是一致的,但是不如AJAX灵活,AJAX可以自定义调用的方法,2.0自带的回调功能却不行。要使用客户端回调功能必须实现System.Web.UI.IcallbackEventHandler接口。

这个接口包含两个方法

//客户端回调时固定调用此方法

public void RaiseCallbackEvent(String eventArgument)

//执行完RaiseCallbackEvent后将调用此方法。此方法的返回值将被发回客户端

public string GetCallbackResult()

例:

.cs:

String cbReference = Page.ClientScript.GetCallbackEventReference(

this,"arg", "ReceiveServerData", "context");

String callbackScript;

callbackScript = "function CallServer(arg, context)" + "{ " + cbReference + "} ;";

Page.ClientScript.RegisterClientScriptBlock(

this.GetType(),"CallServer", callbackScript, true);

javascript:

AJAX介绍

AJAX并不是一种新的技术,而是一些已有技术的有机结合,主要包括:XmlHttp、Reflect。一个AJAX框架基本上包括:一个自定义的HttpHandler、一段JavaScript代码。

AJAX运行机制

以前我们使用XmlHttp实现无刷新页面的时候,是用XmlHttp来请求一个隐藏的页面,使用(Asp/Asp.Net)自带的HttpHandler,而在AJAX中,我们请求的也是一个隐藏的页面,不同的是这个页面的HttpHandler是由我们自己来实现。

打造自己的AJAX:

1.首先我们要实现一个Http处理程序(HttpHandler)来响应客户端的请求:

实现自定义的HttpHandler需要实现IHttpHandler接口。

该接口包含一个属性和一个方法:

bool IHttpHandler.IsReusable

void IHttpHandler.ProcessRequest(HttpContext context)

Example:

bool IHttpHandler.IsReusable

{

 get { return true; }

}

void IHttpHandler.ProcessRequest(HttpContext context)

{

 context.Response.Clear(); //获取要调用的方法

 string methodName = context.Request.QueryString["me"];

 //获取程序集信息。

 //Czhenq.AJAX.Class1.Dencode是自定义的字符串编码方法

 string AssemblyName = Czhenq.AJAX.Class1.Dencode(context.Request.QueryString["as"]);

//获取方法的参数

 string Arguments = context.Request.QueryString["ar"]; //开始调用方法

 Type type = Type.GetType(AssemblyName);

 MethodInfo method = type.GetMethod(methodName,

BindingFlags.NonPublic | BindingFlags.Public | BindingFlags.Static | BindingFlags.Instance);

 if (method != null)

 {

//参数使用","分隔

string[] args = Arguments.Split(",".ToCharArray());

ParameterInfo[] paras = method.GetParameters();

object[] argument = new object[paras.Length];

for (int i = 0; i < argument.Length; i++)

{

 if (i < args.Length) {

//因为XmlHttp传递过来的参数全部时String类型,所以必须进行转换

//这里只将参数转换为Int32,并不做其他考虑。

argument[i] = Convert.ToInt32(args[i]);

 }

}

object value = method.Invoke(Activator.CreateInstance(type, true), argument);

if (value != null) context.Response.Write(value.ToString());

else context.Response.Write("error");

 }

 //处理结束

 context.Response.End();

2. 客户端Javascript代码:

function CallMethod(AssemblyName,MethodName,Argus)

{

 var args = "";

 for(var i=0;i
args += Argus[i] + ",";

if(args.length>0) args = args.substr(0,args.length-1);

var xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');

url = "AJAX/AJAX.czhenq?as=" + AssemblyName + "&me=" + MethodName +"&ar="+ args;

xmlhttp.open("POST",url,false);

xmlhttp.send();

alert(xmlhttp.responseText);

}

3.一个简单的AJAX框架已经实现。现在写段代码来测试.
使用自己的AJAX

1.新建一个网站,并应用刚才你编写的HttpHandler。并在网站的Web.config中注册你的HttpHandler,说明那些请求将使用你编写的Handler来处理。下面的内容说明:所有以"czq"结尾的请求,都将使用"Czhenq.HttpHandlerFactory"来处理。

type="Czhenq.HttpHandlerFactory, Czhenq.AJAX"/>

2.添加一个web页面,将刚才的脚本拷贝到页面中,并添加一个你要调用的方法。

private string Add(int i, int j)

{

 return TextBox1.Text;

}

3.在页面中放置一个HiddenField控件,命名为AssemblyName。 并在Page_Load中添加如下代码:

string assemblyName = Czhenq.AJAX.Class1.Encode(

typeof(_Default).AssemblyQualifiedName);

AssemblyName.Value = assemblyName;

4.页面中添加如下脚本:

var assemblyName = document.getElementById("AssemblyName");

var argus = new Array();

argus.push("100");

argus.push("200");

CallMethod(assemblyName,"Add",argus)

总结 AJAX并不是一种新的技术,它只是一些已有技术的有机结合,我们可以将AJAX简单的理解为:AjAx是对JavaScript调用XmlHttp的封装,它改变的是代码书写方式。

附 Encode 与 Dencode实现:

public static string Encode(string value)

{

 byte[] bytes = ASCIIEncoding.ASCII.GetBytes(value);

 return Convert.ToBase64String(bytes);

}

public static string Dencode(string value)

{

 byte[] bytes = Convert.FromBase64String(value);

 return ASCIIEncoding.ASCII.GetString(bytes);

}

分享到:
评论

相关推荐

    SSH框架ajax获取的json格式数据处理过程

    ajax里response返回的数据是一个二维数组,比如这样的[{key,val},{key,val},{key,val}],以这样的形式数据传到前台,实现菜单联动下拉框,具体详解,请看文档

    Ajax详解.rar

    第 11 部分: 借鉴最优秀的 Ajax 应用程序 117 1.1 Google 地图 117 1.2 TaDaList 119 1.3 Campfire 122 1.4 YourMinis 123 1.5 其他 Web 2.0 站点 126 第 11 部分:将 Ajax 带入 Eclipse 的 Ajax Toolkit ...

    详解PHP+AJAX无刷新分页实现方法

    PHP+AJAX无刷新分页实现代码详解,最近在看ajax 教程,就想写个简单入门的PHP+AJAX无刷新分页,我们依据ajax开发框架,代码如下: var http_request=false; function send_request(url){//初始化,指定处理函数,发送...

    javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】

    本文实例讲述了javascript和 jQuery中的AJAX技术。分享给大家供大家参考,具体如下: 1.什么是AJAX? AJAX即“Asynchronous Javascript And XML”...尽管随着JS框架的盛行,在jQuery中,实现AJAX过程相当简单,但是对于

    ajax框架:dwr与ext实战

    8.DWR综合实践:用户管理模块实现..................................................................................................................................18 1 . 系统功能界面: . . . . . . . . ....

    基于jquery ajax 用户无刷新登录方法详解

    Ajax框架就是提供模块化实现Ajax功能的集合,Ajax框架可以是各种语言实现的(比如SAJAX有各种语言的实现),Ajax只是jquery中的一部分, 实例1 代码如下: $.ajax({ type:’post’,//可选get url:’action.php’,//...

    CI框架(ajax分页,全选,反选,不选,批量删除)完整代码详解

    CodeIgniter 是一个小巧但功能强大的 PHP 框架。这篇文章主要介绍了CI框架(ajax分页,全选,反选,不选,批量删除)完整代码,需要的朋友可以参考下

    node.js express框架实现文件上传与下载功能实例详解

    主要介绍了node.js express框架实现文件上传与下载功能,结合具体实例形式详细分析了node.js express框架针对文件上传与下载的前后台相关实现技巧,需要的朋友可以参考下

    多功能选项卡界面美观

    DIV CSS模板下载2 DIV CSS布局实例:用css网站布局之...3 c#操作word表格4 GridView 分页导航5 ...处理Asp.net Ajax框架12029,12007错误详解如何实现最基本的AJAX框架 [四天学会ajax]学习ajax教程第一天[四天学会ajax...

    Flask框架 CSRF 保护实现方法详解

    本文实例讲述了Flask框架 CSRF 保护实现方法。分享给大家供大家参考,具体如下: Flask CSRF 保护 为什么需要 CSRF? 具体操作步骤 实现 后端书写 在表单添加保护 自定义错误响应和关闭保护 ajax提交数据 ...

    Struts2和Ajax数据交互示例详解

    我们从Web 2.0的随波逐流,Ajax的大放异彩说起,Struts2框架自己整合了对Ajax的原生支持(struts 2.1.7+,之前的版本可以通过插件实现),框架的整合只是使得JSON的创建变得异常简单,并且可以简单的融入到Struts2...

    java web 开发详解

    Java 的 Web框架虽然各不相同,但基本也都是遵循特定的路数的:使用Servlet或者Filter拦截请求,使用MVC的思想设计架构,使用约定,XML或 Annotation实现配置,运用Java面向对象的特点,面向抽象实现请求和响应的...

    精通JS脚本之ExtJS框架.part2.rar

    12.1.1 Ext.Ajax.request方法详解 12.1.2 Ext.Ajax.request操作示例 12.1.3 Ext.Ajax.request提交XML数据 12.2 Ext.Updater基础 12.2.1 Ext.Updater.update方法 12.2.2 Ext.Updater.update操作示例 12.3 利用...

    J2EE应用开发详解

    104 第8章 Struts2框架 105 8.1 Web应用的发展 105 8.2 Struts2的起源和体系结构 106 8.3 Struts2核心部分详解 108 8.3.1 核心控制器FilterDispatcher 108 8.3.2 业务逻辑控制器Action 111 8.3.3 业务逻辑组件 116 ...

    Python Web框架之Django框架文件上传功能详解

    – 基于form表单和iframe自己实现ajax请求 1,创建项目 2,settings配置(注册app01,static路径等等这些)及url添加(略过) 3,views视图函数 form的视图收到了在request.FILES中的文件数据。从上述form来的数据...

    最新Python3.5零基础+高级+完整项目(28周全)培训视频学习资料

    Ajax内容基本整理 编辑一对多示例 创建多对多以及增加示例 本节内容梳理 本周作业 第21周 今日知识点概要 上节内容回顾以及URL的补充 视图获取用户请求相关信息以及请求头 模板之继承 模板之导入 上节作业情况 ...

    详解vue与后端数据交互(ajax):vue-resource

    本篇文章主要介绍了详解vue与后端数据交互(ajax):vue-resource,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。

    低清版 大型门户网站是这样炼成的.pdf

    第3章 struts 2标签库详解与ajax技术应用 103 3.1 struts 2主题与模板 103 3.2 struts 2控制标签详解 105 3.2.1 if/elseif/else标签详解 105 3.2.2 iterator标签详解 106 3.2.3 append标签详解 108 3.2.4 ...

    轻量级asp.net ajax解决方案详解

    主要介绍了轻量级asp.net ajax解决方案,结合实例形式较为详细的分析了asp.net ajax的实现技巧与技术细节,需要的朋友可以参考下

    AJAX在JQuery中的应用详解

    $.ajax()方法是一个功能十分强悍的一个底层方法,基于该方法实现的$.get()和$.post()都是常用的向服务器请求数据的方法。 1.1 $.ajax()中的参数及使用方法 $.ajax()调用的语法格式为: $.ajax([options]) 其中,可...

Global site tag (gtag.js) - Google Analytics