之前写了一篇

ASP.NET中一种超简单的Ajax解决方案

最近把他拿出来更新了下,把demo也搞的更详细了一点

  • 加入了blqw.Json,所以支持更多类型参数和返回值
  • 优化了对exception的处理
  • 增加了分页Pager对象
  • 优化了注册页面变量的方式,更安全了

特点

首先他不需要任何的配置文件

没有额外dll ,他是开源的,只要你愿意, 他只有2个cs文件

使用之后前台js调用后台方法都是采用同步模式,这样更加接近C#后台的编程方式

var user = PostAjax8();
var message = ["姓名:"+ user.Name, "年龄:"+ user.Age, "生日:"+ user.Birthday].join("\n\r");
alert(message);

如果想实现异步效果需要使用setTimeout方法,比如这样

text1.value = "正在获取数据...";
setTimeout(function () {
var a = PostAjax1();
text1.value = "服务器返回:" + a;
}, 0);

C#的异常可以反映到js中

所以你可以在js直接使用中的try..catch..来处理它

function ajax8() {
try {
var user = PostAjax8();
var message = ["姓名:" + user.Name, "年龄:" + user.Age, "生日:" + user.Birthday].join("\n\r");
alert(message);
} catch (e) {
alert("出现异常:" + e.message);
}
}

异常堆栈可以通过blqw.Ajax2.ThrowStack=true;设置,将详细堆栈信息也输出到前端页面js中

运行方式

首先是在Page_Load,或者前台页面中<% ... ... %>中加入

Ajax2.Register(this);

在该方法中,判断当前页面参数,如果普通请求,就注册js代码到页面中

debug模式中注册完整js

 #region javascript full
#if DEBUG
const string JAVASCRIPT = @"
window.blqw = window.blqw || {};
blqw.Ajax = blqw.Ajax || {};
blqw.Ajax.GetRequest = function () {
if (window.ActiveXObject) {
try {
return new ActiveXObject('Msxml2.XMLHTTP');
} catch (e) {
return new ActiveXObject('Microsoft.XMLHTTP');
}
}
else if (window.XMLHttpRequest) {
return new XMLHttpRequest();
}
} blqw.Ajax.Throw = function(e){{
function AjaxError(message,stack,type){{
this.name = 'AjaxError';
this.type = type;
this.message = message;
this.stack = stack;
this.innerError = null;
this.toString = function () {{
return 'message:' + this.message + '\r\n' + 'stack:' + e.stack;
}};
}};
var err = new AjaxError(e.message,e.stack,e.type);
var e1 = err;
while(e.innerError){{
e = e.innerError;
e1.innerError = new AjaxError(e.message,e.stack,e.type);
e1 = e1.innerError;
}}
return err;
}} blqw.Ajax.Exec = function (method, args) {
var getStr = function (obj) {
if (obj == null) return '';
var type = typeof (obj);
switch (type) {
case 'number':
case 'boolean':
return obj.toString();
case 'string':
return encodeURIComponent(obj.replace('\0', '\0\0'));
case 'undefined':
return '';
case 'function':
try {
return arguments.callee(obj());
} catch (e) {
return '';
}
case 'object':
type = Object.prototype.toString.apply(obj);
switch (type) {
case '[object Date]':
return encodeURIComponent(obj.getFullYear() + '-' +
(obj.getMonth() + 1) + '-' +
obj.getDate() + ' ' +
obj.getHours() + ':' +
obj.getMinutes() + ':' +
obj.getSeconds() + '.' +
obj.getMilliseconds());
case '[object RegExp]':
return arguments.callee(obj.toString());
case '[object Array]':
var arr = [];
for (var i in obj) {
arr.push(arguments.callee(obj[i]));
}
return '[' + arr.join(',') + ']';
case '[object Object]':
var arr = [];
for (var i in obj) {
arr.push(i + ':""' + arguments.callee(obj[i]).replace('%22','%5C%22') + '""');
}
if (arr.length === 0) {
return '{}';
}
return '{' + arr.join(',') + '}';
}
break;
}
}
var ajaxdata = '';
if (args.length > 0) {
var arr = [];
for (var i = 0; i < args.length; i++) {
arr.push(getStr(args[i]));
}
ajaxdata = 'blqw.ajaxdata=' + arr.join('\0');
}
url = window.location.href;
var req = blqw.Ajax.GetRequest();
req.open('POST', url, false);
req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=utf-8');
var ret = req.send(ajaxdata + '&blqw.ajaxmethod=' + method);
if (req.status == 200) {
var html = req.responseText;
var data = eval('(' + html+ ')');
if ('v' in data) {
eval(data.v);
}
if ('e' in data) {
throw blqw.Ajax.Throw(data.e);
} else {
return data.d;
}
} else {
alert('出现错误');
}
}
"; private static void Encode()
{
//var aaaa = new Yahoo.Yui.Compressor.JavaScriptCompressor(JAVASCRIPT, false, Encoding.UTF8, System.Globalization.CultureInfo.CurrentCulture).Compress().Replace("\"", "\"\"");
} #endif
#endregion

完整Js

release模式中注册精简js

 #region javascript min
#if !DEBUG
const string JAVASCRIPT = @"window.blqw=window.blqw||{};blqw.Ajax=blqw.Ajax||{};blqw.Ajax.GetRequest=function(){if(window.ActiveXObject)try{return new ActiveXObject(""Msxml2.XMLHTTP"")}catch(c){return new ActiveXObject(""Microsoft.XMLHTTP"")}else if(window.XMLHttpRequest)return new XMLHttpRequest};blqw.Ajax.Throw=function(c){for(var e=function(a,b,c){this.name=""AjaxError"";this.type=c;this.message=a;this.stack=b;this.innerError=null;this.toString=function(){return'message:'+this.message+'\r\n'+'stack:'+e.stack}},a=new e(c.message,c.stack,c.type),d=a;c.innerError;)c=c.innerError,d.innerError=new e(c.message,c.stack,c.type),d=d.innerError;return a};blqw.Ajax.Exec=function(c,e){var a=function(b){if(null==b)return"""";var a;switch(typeof b){case ""number"":case ""boolean"":return b.toString();case ""string"":return encodeURIComponent(b.replace(""\0"",""\0\0""));case ""undefined"":return"""";case ""function"":try{return arguments.callee(b())}catch(c){return""""}case ""object"":switch(a=Object.prototype.toString.apply(b),a){case ""[object Date]"":return encodeURIComponent(b.getFullYear()+""-""+(b.getMonth()+1)+""-""+b.getDate()+"" ""+b.getHours()+"":""+b.getMinutes()+"":""+b.getSeconds()+"".""+b.getMilliseconds());case ""[object RegExp]"":return arguments.callee(b.toString());case ""[object Array]"":a=[];for(var d in b)a.push(arguments.callee(b[d]));return""[""+a.join("","")+""]"";case ""[object Object]"":a=[];for(d in b)a.push(d+':""'+arguments.callee(b[d]).replace(""%22"",""%5C%22"")+'""');return 0===a.length?""{}"":""{""+a.join("","")+""}""}}},d="""";if(0<e.length){for(var d=[],f=0;f<e.length;f++)d.push(a(e[f]));d=""blqw.ajaxdata=""+d.join(""\x00"")}url=window.location.href;a=blqw.Ajax.GetRequest();a.open(""POST"",url,!1);a.setRequestHeader(""Content-Type"",""application/x-www-form-urlencoded; charset=utf-8"");a.send(d+""&blqw.ajaxmethod=""+c);if(200==a.status){a=eval(""(""+a.responseText+"")"");""v""in a&&eval(a.v);if(""e""in a)throw blqw.Ajax.Throw(a.e);return a.d}alert(""出现错误"")};";
#endif
#endregion

精简js

接下来,会反射被标识为AjaxMethod的方法,再加入到页面的js中,比如这样

function PostAjax1(){return blqw.Ajax.Exec('PostAjax1',arguments);}

然后就可以在js中上直接使用 PostAjax1()调用后台的方法了

执行blqw.Ajax.Exec()方法会使用ajax方式请求当前页面,添加post参数,比如

blqw.ajaxdata:{Name:"冰麟轻武",Age:"28",Birthday:"1986-10-29"}
blqw.ajaxmethod:PostAjax7

这时候又会进入blqw.Ajax2.Register方法,会判断blqw.ajaxmethod 如果存在这个参数就会使用Literacy组件反射对应的方法,并使用json组件反序列化参数,

调用后台方法之后再序列化参数并输出到页面中

如果调用后台方法中出现异常,将会序列化异常对象(Exception)到前台,并在js中throw出来

页面Demo

下载

blqw.Ajax2Demo.rar

https://code.csdn.net/jy02305022/blqw-ajax2

让Ajax更简单的更多相关文章

  1. php+jquery+ajax+json简单小例子

    直接贴代码: <html> <title>php+jquery+ajax+json简单小例子</title> <?php header("Conte ...

  2. vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记(一) web攻击 web安全之XSS JSONP && CORS css 定位 react小结

    vue—你必须知道的   目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...

  3. 基于layui的表格异步删除,ajax的简单运用

    h话不多说,看图,点击删除,出现确认框,然后点击确认删除,直接删除数据, 因为是基于面向过程的,没有用php框架写,所以有3个文件: 第一个文件:data.php:用于从数据库中获取数据 <?p ...

  4. 【热门技术】EventBus 3.0,让事件订阅更简单,从此告别组件消息传递烦恼~

    一.写在前面 还在为时间接收而烦恼吗?还在为各种组件间的消息传递烦恼吗?EventBus 3.0,专注于android的发布.订阅事件总线,让各组件间的消息传递更简单!完美替代Intent,Handl ...

  5. PostCSS一种更优雅、更简单的书写CSS方式

    Sass团队创建了Compass大大提升CSSer的工作效率,你无需考虑各种浏览器前缀兼,只需要按官方文档的书写方式去写,会得到加上浏览器前缀的代码,如下: .row { @include displ ...

  6. 【转】【C#】C# 5.0 新特性——Async和Await使异步编程更简单

    一.引言 在之前的C#基础知识系列文章中只介绍了从C#1.0到C#4.0中主要的特性,然而.NET 4.5 的推出,对于C#又有了新特性的增加--就是C#5.0中async和await两个关键字,这两 ...

  7. [转]九个Console命令,让js调试更简单

    转自:九个Console命令,让js调试更简单 一.显示信息的命令 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <!DOCTYPE html> <html ...

  8. gulp:更简单的自动化构建工具

    目前最流行的两种使用JavaScript开发的构建工具是Grunt和Gulp.为什么使用gulp?因为Gulp更简单.Grunt任务拥有大量的配置,会引用大量你实际上并不需要的对象属性,但是Gulp里 ...

  9. 使用hessian开发WebService,轻量级,更简单、快捷

    Hessian是一个轻量级的remoting onhttp工具,使用简单的方法提供了RMI的功能. 相比WebService,Hessian更简单.快捷.采用的是二进制RPC协议,因为采用的是二进制协 ...

随机推荐

  1. 桥接模式/bridge模式/对象结构型

    意图 将抽象部分与它的实现部分分离,使它们都可以独立的变化. 动机 当一个抽象类有多个实现时,通常用继承来协调它们.但是继承机制将抽象和实现固定,难以对抽象部分和实现部分独立地进行修改.扩充和重用. ...

  2. Drools 查询学习

    Drools 查询学习查询以 query 关键字开始,以 end 关键字结束,在 package 当中一个查询要有唯一的名称,查询的内容就是查询的条件部分,条件部分内容的写法与规则的 LHS 部分写法 ...

  3. Puppet自动化运维-资源介绍篇(4)

    1.什么是资源? 资源是Puppet最基础的元素,每个资源的定义都具有标题,类型,以及一系列的属性. 资源定义有如下的特性:   (1) Puppet使用title在编译时区分每个资源,使用命名变量在 ...

  4. PHP函数、数组

    PHP函数 PHP的真正威力源自于它的函数函数是通过调用函数来执行的,可以在页面的任何位置调用函数 PHP函数准则:函数名称以字母或下划线开头(不能以数字开头)函数的名称应该提示出它的功能 四要素:返 ...

  5. WEB开发入门

    对服务器的概念需要更新一下: 从物理上来说,服务器就是一台PC机,至少8核,以T计算,带宽100M以上 一般有的服务器 1. web服务器 -- PC机上安装一个具有web服务的软件 2. 数据库服务 ...

  6. [转]webpack

    什么是 webpack? webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理. 我们可以 ...

  7. 扩展BindingList,防止增加、删除项时自动更新界面而不出现“跨线程操作界面控件 corss thread operation”异常

    在做界面程序时,常常需要一些数据类,界面元素通过绑定等方式显示出数据,然而由于UI线程不是线程安全的,一般都需要通过Invoke等方式来调用界面控件.但对于数据绑定bindingList而言,没法响应 ...

  8. wex5中的星星评分

    新建一个空白的.w文件,然后在页面上放5个img星星图片 重要的是图片路径不能是绝对路径,要用相对路径,不然js操作的时候会出bug 添加两个label标签(标签随你挑,在这我就用label) 你到时 ...

  9. AngularJS中的route可以控制页面元素的改变,使多页面变成一个单页面。。。

    SPA(Single Page Application)指的是通单一页面展示所有功能,通过Ajax动态获取数据然后进行实时渲染,结合CSS3动画模仿原生App交互,然后再进行打包(使用工具把Web应用 ...

  10. jade模板引擎

    最近用jade写了点东西,觉得挺有趣的,是一个有意思的模板引擎. 比如说,像这样的结构的html <span> <i class="icon-edit">& ...