一、目录

简单类型数据传送(介绍缓存,访问Session等)

表类型数据传送

数组类型数据传送(包含自定义类型数据)

二、环境搭建

1.这里本人用的是VS2012。

2.新建一个空的Web项目(.NET 4.0)

3.将AjaxPro2.dll复制到网站的bin目录中

4.在项目中引用它

5.打开Web.config,输入红色部分:

6.新建一个名为Test1的页面,在顶部 using AjaxPro

7.在Page_Load中输入以下代码(不能在IsPostBack中输入)

Utility.RegisterTypeForAjax(typeof(Test1));

8.下面是一个偷懒的步骤,在开始使用的时候必须输入这个类文件的完整命名空间很麻烦,后来研究了一下,发现是可以重新命名的

具体的方法如下:

省了我们不少功夫。

到此为止,环境的搭建就结束了。

三、传送简单类型的值

1.这里我们简单的举几个列子

首先我们在后台写下以下代码:

 [AjaxMethod]
public int getInteger()
{
return ;
} [AjaxMethod]
public sring getString()
{
return "";
} [AjaxMethod]
public double getDouble()
{
return 1.1;
}

接着我们编写前台的代码

 <script type="text/javascript">
window.onload = function () {
var value = TestAjax.getInteger();
document.write(value.value + "<br />");
value = TestAjax.getString();
document.write(value.value + "<br />");
value = TestAjax.getDouble();
document.write(value.value + "<br />");
}
</script>

2.可能有些懂js的会认为客户端调用getInteger和getString返回的值都一样,但是实质是他们并一样。比如下面我们截取的图片

就可以很好的解释这个问题

获取int类型的值的结果:

获取string类型的值的结果:

这里我们可以清晰的看到类型是完全不一样的,这里我着重讲这些是因为后面我们可能会由于这个错误而导致无法调用服务端的代码,却

没法找出这其中的问题。

这里我们还可以返回这个的返回值是直接调用对应方法后的返回值,可能很多人都认为调用对应的方法应该返回return的值,但其实并不

是的,客户端永远是客户端,服务端永远是服务端,这个必须搞清楚。所以我们经常需要在调用方法的后面追加一个value来指定要获取的是值。

3.关于接收返回值

上面的实例中我们使用的是最普通的方式,只有当这个值返回之后才能继续执行下面的代码,可能部分有经验的开发者可能会问有没有

异步方式,当然是有的。下面我们就将上面的代码改写成异步的方式获取。

 <script type="text/javascript">
window.onload = function () {
TestAjax.getInteger(writeToDocument);
TestAjax.getString(writeToDocument);
TestAjax.getDouble(writeToDocument);
} function writeToDocument(val) {
document.write(val.value + "<br />");
}
</script>

然后我们可以发现最后的结果更之前的实例是完全一样的。

4.方法的属性

看到上面的服务端代码的同志,一看就会很奇怪,为什么采用驼峰的方式呢,是不是感觉格格不入,这个主要原因是客户端调用

方法的名称跟服务端的名称是一致的,如果不这样就会在客户端调用的时候,感觉很奇怪。当然暴露的服务端的方法名称。所以

下面我们将介绍如何改写这个名字。

这里要提示下AjaxMethod中的重载版本:

public AjaxMethodAttribute(string methodName);

是无法调用的,因为已经被新的替换了,下面就是新的方式(这里我们将getInteger改成getInt)

 [AjaxMethod,AjaxNamespace("getInt")]
public int getInteger()
{
return ;
}

然后我们接着改写前台的代码:

TestAjax.getInt(writeToDocument)

重新运行,最后的结果一样的。

5.缓存结果

对于一些访问量很大,但是要求更新速度不是很快的信息。我们通常会使用缓存来减少对服务器资源的消耗。这里AjaxPro也

提供了相关的功能,下面我们就举例。

首先我们将之前的方法getInteger:

 [AjaxMethod,AjaxNamespace("getInt"),AjaxServerCache()]
public string getInteger()
{
return DateTime.Now.ToString("ss-ffff");
}

对应的客户端代码如下:

    <script type="text/javascript">
window.onload = function () {
for (var si = 0; si < 100; si++) {
setTimeout(ontime, si * 50);
}
} function ontime() {
TestAjax.getInt(writeToDocument);
} function writeToDocument(val) {
document.getElementById("content").innerHTML += val.value + "<br />";
}
</script>
<div id="content" > </div>

最后的结果如图:

大家可以看到有些时间根本没有改变,这样就起到的缓存的作用。

6.访问Session

相信有很多人都希望AjaxPro可以访问Session,但是你们却发现根本无法使用,其实AjaxPro是可以访问Session,

只是我们仅仅少了一个步骤,只要加上那一步我们就可以访问Session了。

下面为一个可以访问Session的方法:

 [AjaxMethod(HttpSessionStateRequirement.ReadWrite),AjaxNamespace("getInt"),AjaxServerCache()]
public int getInteger()
{
return Index++;
}

这里我们需要注意的是 AjaxMethod(HttpSessionStateRequirement.ReadWrite) ,这句就是访问Session的关键,这里我们设置为了

可以访问写入Session,如果我们仅仅值需要读取Session,我们可以仅设置Read即可;

四、传送DataTable类型数据

1.首先我们先举一个简单的例子

服务端如下编写:

 [AjaxMethod]
public DataTable getTable()
{
DataTable table = new DataTable();
table.Columns.Add("id");
DataRow r1 = table.NewRow();
r1["id"] = ;
table.Rows.Add(r1);
DataRow r2 = table.NewRow();
r2["id"] = ;
table.Rows.Add(r2);
return table;
}

客户端代码:

 <script type="text/javascript">
window.onload = function () {
var content = document.getElementById("content");
var table = TestAjax.getTable();
var rtable = table.value;
for (var r = 0; r < rtable.Rows.length; r++) {
content.innerHTML += rtable.Rows[r].id + "<br />";
}
}
</script>
<div id="content" >
</div>

其中服务端相对简单,唯一麻烦的就是客户端,因为返回的是DataTable,但是到了客户端,在没有自动提示的情况下我们并

不知道调用什么方法才可以将表中的数据遍历出来,只有那些勤奋的程序员或许会用浏览器的js调试器查看这其中的奥秘,而这里

我们会简单的介绍里面的方法。

首先是获得value后的里面存在哪些方法以及变量:

方法或变量名 简介
Columns 保存表中存在的列
Rows 保存表中存放的数据
addColumn(name,type) 向表中添加新的列
addRow(row) 向表中添加新的一行数据
toJSON() 返回JSON字符串

如果我们要遍历其中的数据,可以通过循环遍历Rows,这里要注意不能用for in去遍历,这样你仅仅只会把里面的方法和变量遍历

而不是数据。如果要知道里面有多少数据,可以通过*.Rows.length来访问。

访问具体哪一行通过Rows[index]的方式即可,如果要方位其中的一个数据可以直接通过 Rows[index].列名 来访问。当然你也

可以通过这种方式来访问,最后的结果是一致的:Rows[index][列名]

2.保存来自客户端的DataTable

上面我们看到方法addColumn以及addRow或许你会觉得这些功能有什么用,自然有这个方法当然会有它的用处,下面讲述

的就是如何将客户端的DataTable返回到服务端。当然这里客户端的DataTable其实就是采用json方式形成的而已,仅仅只是

AjaxPro提供了对应的转换。

下面我们就开始将客户端的DataTable传送到客户端。

首先是服务端的代码:

[AjaxMethod]
public DataTable saveTable(DataTable table)
{
return table;
}

 这里服务端的代码很简单,仅仅只是将DataTable原路返回。

下面是客户端代码(重点)

     <script type="text/javascript">
window.onload = function () {
var ntable = new Ajax.Web.DataTable();
ntable.addColumn("id","System.Int32");
var r1 = {
'id':1
};
var r2 = {
'id':2
};
ntable.addRow(r1);
ntable.addRow(r2);
var table = TestAjax.saveTable(ntable); var content = document.getElementById("content");
var rtable = table.value;
for (var r = 0; r < rtable.Rows.length; r++) {
content.innerHTML += rtable.Rows[r]['id'] + "<br />";
}
}
</script>
<div id="content" > </div>

      其中我们接触到了很多新的东西,比如Ajax.Web.DataTable ,这个就是AjaxPro用来在客户端表示DataTable的对象,

下面就是我们之前介绍过的方法,唯一的仅仅就这个类型。

这里注意看每行的数据,我们采用的是对象字符串的形式进行封装的,这就是为什么我们在获取到DataTable类型数据

之后可以直接通过 *.Rows[index].列名 的方式能够访问的来源。

3.扩展

       如果你需要一次性将多个DataTable同时传送到客户端,AjaxPro也提供了Ajax.Web.DataSet,其中仅仅只有一个

方法那就是:addTable(t)  用来将表添加到DataSet中。同时还支持Ajax.Web.Dictionary和Ajax.Web.NameValueCollection

五、传送数组类型数据

1.首先我们先举例

服务端代码如下:

         [AjaxMethod]
public int[] getIntArray()
{
return new int[] { , , , , , , };
} [AjaxMethod]
public string[] getStringArray()
{
return new string[] { "1s", "2s", "3s", "4s", "5s" };
}

客户端如下:

     <script type="text/javascript">
window.onload = function () {
var content = document.getElementById("content"); var iarray = TestAjax.getIntArray().value;
for (var r = 0; r < iarray.length; r++ ) {
content.innerHTML += iarray[r] + "<br />";
} var sarray = TestAjax.getStringArray().value;
for (var rs = 0 ; rs < sarray.length; rs++) {
content.innerHTML += sarray[rs] + "<br />";
}
}
</script>
<div id="content" > </div>

     其实最终返回到客户端之后AjaxPro并没有自己重新创建一个数组,而是直接使用js中原生自带的

Array,所以关于将数组传送到服务端部分省略。

2.自定义类型数组

原本打算单独放一章去讲述如何传递自定义类型的数据,但是想到传递数组这里要需要涉及到,所以这里就一并讲了。

首先我们先小试牛刀,传递一条数据。

依然还是服务端代码(加自定义的类):

         public class TestData
{
public string ID { get; set; }
} [AjaxMethod]
public TestData getTestData()
{
return new TestData
{
ID = ""
};
}

然后是客户端代码:

     <script type="text/javascript">
window.onload = function () {
var content = document.getElementById("content"); var custom = TestAjax.getTestData().value;
alert(custom.ID);
}
</script>

     其实自定义数据的传送更简单写,因为最后到客户端的对象跟你在服务端写的类的格式完全一致,所以方便调用。

→_→ 应该会有人会想能不能写方法,这里我可以直接告诉你,AjaxPro会直接忽略掉。

扩展:

      里面的数据也可以是其他的自定义的类或者数组,因为json基本都能够表示。◑﹏◐搞那么多层,我想应该会

晕吧。

下面我们开始传送自定义类型的数组。

服务端代码如下:

         public class TestData
{
public string ID { get; set; }
public string[] StrArray { get; set; }
} [AjaxMethod]
public TestData[] getTestData()
{
return new TestData[]{
new TestData{
ID = "",
StrArray = new string[] { "d", "ds", "ds" }
},
new TestData{
ID = "",
StrArray = new string[] { "d", "ds", "ds" }
}
};
}

接着是客户端代码

     <script type="text/javascript">
window.onload = function () {
var content = document.getElementById("content"); var custom = TestAjax.getTestData().value;
for (var r = 0 ; r < custom.length; r++) {
content.innerHTML += custom[r].ID + "<br />";
}
}
</script>
<div id="content" > </div>

      我相信那些有这比较好的json基础的,看到现在应该明白了什么了吧。只要是json能够表示的数据在客户端都是能够

表示出来的,所以我们介绍到这。其实关于数据的传送就可以告一段落了。

AjaxPro2完整入门教程的更多相关文章

  1. PyQt完整入门教程

    1.GUI开发框架简介 19年来,一直在做Android ROM相关测试,也有了一定的积累:20年,计划把之前完整的测试方案.脚本.工具进行整合复用. 第一期计划是开发一个GUI的测试工具,近期也进行 ...

  2. XFire完整入门教程

    网上关于XFire入门的教程不少,要么是讲得很简单,就像Hello World一样的程序,要么就是通过IDE集成的工具来开发的,这对于不同的人群有诸多不便,关于XFire的一些详细的信息就不再多讲,可 ...

  3. MVC5 + EF6 完整入门教程三

    期待已久的EF终于来了. 学完本篇文章,你将会掌握基于EF数据模型的完整开发流程. 本次将会完成EF数据模型的搭建和使用. 基于这个模型,将之前的示例添加数据库查询验证功能. 文章提纲 概述 & ...

  4. MVC5 + EF6 完整入门教程三:EF来了

    期待已久的EF终于来了 学完本篇文章,你将会掌握基于EF数据模型的完整开发流程. 本次将会完成EF数据模型的搭建和使用. 基于这个模型,将之前的示例添加数据库查询验证功能. 文章提纲 概述 & ...

  5. Sklearn使用良心完整入门教程

    The complete .ipynb file can be download through my share in onedrive:https://1drv.ms/u/s!Al86h1dThX ...

  6. D3.js的v5版本入门教程(第九章)——完整的柱状图

    D3.js的v5版本入门教程(第九章) 一个完整的柱状图应该包括的元素有——矩形.文字.坐标轴,现在,我们就来一一绘制它们,这章是前面几章的综合,这一章只有少量新的知识点,它们是 d3.scaleBa ...

  7. gulp详细入门教程

    本文链接:http://www.ydcss.com/archives/18 gulp详细入门教程 简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优 ...

  8. ABP(现代ASP.NET样板开发框架)系列之2、ABP入门教程

    点这里进入ABP系列文章总目录 基于DDD的现代ASP.NET开发框架--ABP系列之2.ABP入门教程 ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)” ...

  9. Power BI入门教程

    题记:这篇文章不仅是Power BI的入门教程,同时相对于Qlik Sense进行了简单比较. 最近把一个Qlik Sense的示例应用手动转成了Power BI的应用,把相关步骤和遇到的问题记录如下 ...

随机推荐

  1. Markdown语法简介

    1.标题 在想要设置为标题的文字前面加#来表示一个#代表一级标题,总共六级 2.字体 加粗要加粗的文字左右分别用两个*号包起来 斜体要倾斜的文字左右分别用一个*号包起来 斜体加粗要倾斜和加粗的文字左右 ...

  2. Python基础综合运用——搭建名片管理系统

    综合应用 —— 名片管理系统 目标 综合应用已经学习过的知识点: 变量 流程控制 函数 模块 开发 名片管理系统 系统需求 程序启动,显示名片管理系统欢迎界面,并显示功能菜单 ************ ...

  3. BBS论坛(十二)

    12.1.图形验证码生成 (1)utils/captcha/init.py import random import string # Image:一个画布 # ImageDraw:一个画笔 # Im ...

  4. CentOS 7 安装 Jenkins

    准备工作 首选需要安装JAVA环境 https://www.cnblogs.com/stulzq/p/9286878.html 如果你的系统没有自带git,那么也需要安装一个 yum install ...

  5. python转义字符——重点解释:\b,\n和\r区别

    放在最前面: 有时我们并不想让转义字符生效,我们只想显示字符串原来的意思,这就要用r和R来定义原始字符串.如:print r'\t\r' 实际输出为“\t\r”. 主要参考:AllenW的博客 转义字 ...

  6. 带着萌新看springboot源码06

    这节来说个大家都比较熟悉的东西,就是servlet三大组件,servlet.filter.listener,再说说springboot的内置tomcat. 也许还会说一下tomcat的运行原理,还有, ...

  7. 查找占用资源高的JAVA代码

    1. /tmp/hsperfdata_$USER目录 $USER是启动JAVA进程的用户,这里保存的所有用户启动的JAVA进程. 这些都JAVA进程的PID,里面存放的是JVM进程信息.你所用的jsp ...

  8. tensorflow机器学习模型的跨平台上线

    在用PMML实现机器学习模型的跨平台上线中,我们讨论了使用PMML文件来实现跨平台模型上线的方法,这个方法当然也适用于tensorflow生成的模型,但是由于tensorflow模型往往较大,使用无法 ...

  9. vim配置python编程环境及YouCompleteMe的安装教程

    python号称人工智能语言,现在可算大热,这篇博客将介绍如何用vim打造一款自己专属的python编程环境. step1 由于安装YouCompleteMe需要vim8.0及以上版本,所以得安装使用 ...

  10. Java开发知识之Java字符串类

    Java开发知识之Java字符串类 一丶简介 任何语言中.字符串都是很重要的.都涉及到字符串的处理. 例如C++中. 字符串使用内存. 并提供相应的函数进行处理 strcmp strcat strcp ...