AjaxPro2完整入门教程

原文

一、目录

简单类型数据传送（介绍缓存，访问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.这里我们简单的举几个列子

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

 1 [AjaxMethod]
 2 public int getInteger()
 3 {
 4      return 10;
 5 }
 6 
 7 [AjaxMethod]
 8 public sring getString()
 9 {
10    "10";
11 }
12 
13 [AjaxMethod]
14 double getDouble()
15 {
16     1.1;
17 }

接着我们编写前台的代码

1 <script type="text/javascript"> 2 window.onload = function () { 3 var value = TestAjax.getInteger(); 4 document.write(value.value + "<br />"); 5 value = TestAjax.getString(); 6 document.write(value.value + "<br />"); 7 value = TestAjax.getDouble(); 8 document.write(value.value + "<br />"); 9 } 10 </script>
2.可能有些懂js的会认为客户端调用getInteger和getString返回的值都一样，但是实质是他们并一样。比如下面我们截取的图片

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

获取int类型的值的结果：

获取string类型的值的结果：

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

没法找出这其中的问题。

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

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

3.关于接收返回值

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

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

2 window.onload = 3 TestAjax.getInteger(writeToDocument); 4 TestAjax.getString(writeToDocument); 5 TestAjax.getDouble(writeToDocument); 6 } 7 8 function writeToDocument(val) { 9 document.write(val.value + "<br />"); 10 } 11 </script>
然后我们可以发现最后的结果更之前的实例是完全一样的。

4.方法的属性

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

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

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

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

public AjaxMethodAttribute(string methodName);

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

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

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

TestAjax.getInt(writeToDocument)

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

5.缓存结果

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

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

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

1 [AjaxMethod,0)">"),AjaxServerCache(1)] 2 string getInteger() 3 { 4 return DateTime.Now.ToString(ss-ffff"); 5 }

对应的客户端代码如下：

    <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的方法：

 [AjaxMethod(HttpSessionStateRequirement.ReadWrite),128)">1
)] return Index++; }

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

可以访问写入Session，如果我们仅仅值需要读取Read即可；

四、传送DataTable类型数据

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

服务端如下编写：

public DataTable getTable() 4 DataTable table = new DataTable(); 5 table.Columns.Add(id 6 DaTarow r1 = table.NewRow(); 7 r1["] = 1; 8 table.Rows.Add(r1); 9 DaTarow r2 = table.NewRow(); 10 r2[2; 11 table.Rows.Add(r2); 12 return table; 13 }
客户端代码：
2 window.onload = 3 var content = document.getElementById("content"); 4 var table = TestAjax.getTable(); 5 var rtable = table.value; 6 var r = 0; r < rtable.Rows.length; r++) { 7 content.innerHTML += rtable.Rows[r].id + "<br />"; 8 } 9 } 10 </script> 11 <div id="content" > 12 </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原路返回。

下面是客户端代码（重点）

1 <script type="text/javascript"> 2 window.onload = 3 var ntable = new Ajax.Web.DataTable(); 4 ntable.addColumn("id","System.Int32"); 5 var r1 = { 6 'id':1 7 }; 8 var r2 = { 9 'id':2 10 }; 11 ntable.addRow(r1); 12 ntable.addRow(r2); 13 var table = TestAjax.saveTable(ntable); 14 15 16 17 18 content.innerHTML += rtable.Rows[r]['id'] + "<br />"; 19 } 20 } 21 </script> 22 <div id="content" > 23 24 </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.首先我们先举例

服务端代码如下：

1 [AjaxMethod] 2 int[] getIntArray() 3 { 4 return new int[] { 1,2,128)">3,128)">4,128)">5,128)">6,128)">7 }; 5 } 7 [AjaxMethod] 8 string[] getStringArray() 9 { 10 string[] { 1s",0)">2s3s4s5s" }; 11 }
客户端如下：
4 var iarray = TestAjax.getIntArray().value; 6 var r = 0; r < iarray.length; r++ ) { 7 content.innerHTML += iarray[r] + "<br />"; 8 } 9 var sarray = TestAjax.getStringArray().value; 11 var rs = 0 ; rs < sarray.length; rs++) { 12 content.innerHTML += sarray[rs] + "<br />"; 13 } 14 } 15 </script> 16 <div id="content" > 17 18 </div>
其实最终返回到客户端之后AjaxPro并没有自己重新创建一个数组，而是直接使用js中原生自带的

Array

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

2.自定义类型数组

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

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

依然还是服务端代码（加自定义的类）：

1 class TestData 2 { string ID { get; set; } 4 } 5 6 [AjaxMethod] 7 public TestData getTestData() 8 { 9 new TestData 10 { 11 ID = 1" 12 }; 13 }
然后是客户端代码：
1 <script type="text/javascript"> 2 window.onload = 3 4 5 var custom = TestAjax.getTestData().value; 6 alert(custom.ID); 7 } 8 </script>
其实自定义数据的传送更简单写，因为最后到客户端的对象跟你在服务端写的类的格式完全一致，所以方便调用。

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

扩展：

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

晕吧。

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

服务端代码如下：

string[] StrArray { public TestData[] getTestData() new TestData[]{ 11 new TestData{ 12 ID = ",13 StrArray = dds" } 14 },128)">15 16 ID = 217 StrArray = 18 } 19 }; 20 }
接着是客户端代码
var r = 0 ; r < custom.length; r++) { 7 content.innerHTML += custom[r].ID + "<br />"; 9 } 10 </script> 11 <div id="content" > 13 </div>
我相信那些有这比较好的json基础的，看到现在应该明白了什么了吧。只要是json能够表示的数据在客户端都是能够

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

总结

以上是DEVMAX为你收集整理的AjaxPro2完整入门教程全部内容。

如果觉得DEVMAX网站内容还不错，欢迎将DEVMAX网站推荐给好友。
学会iframe并用其解决跨域问题
我们设置了一个名为ifr，宽为600，高为400，显示边框，隐藏滑动条，显示文档为b站（也可以选择本地html文档）的内联框架。我们可以在iframe标签中写上文字说明，因为有一些低版本浏览器不支持这个标签，显示不了文档的时候就会在页面显示我们写的文字。父页面通过iframe嵌入子页面，通过iframe.contentWindow获取子页面的window,即可操作子页面，子页面通过parent.window和parent来访问父页面的window。src:规定在 中显示的文档的 URL。...
【Ajax】全面详细了解git的基础操作【万字教学+面试常客】
Git是一个开源的分布式版本控制系统，是目前世界上最先进，最流行的版本控制系统。可以快速高效地处理从很小到非常大的项目版本管理。特点：项目越大越复杂，协同开发者越多，越能体现出Git的高性能和高可用性。
什么是Ajax？
AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步的Javascript和XML”。Ajax最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页
基于Vue、Axios、Node.js的图书管理系统【网页前端高级编程】
基于Vue、Ajax、Node.js的图书管理系统，网页前端高级编程实现了在网页上进行增删改查,web与后端的数据交互模拟。适合初学者前端入门,适合期末网页前端课程设计实践。欢迎大家积极阅读，如有不足请及时批评指出。...
Ajax简介与基本使用
本文为Ajax简介与基本使用相关知识，首先将对Ajax进行简介（包含：什么是Ajax、Ajax的作用、Ajax的好处），然后介绍JS方式Ajax的实现（包含发送 Ajax 请求的五个步骤、创建 XMLHttpRequest 对象、向服务器发送请求、服务器响应等），最后介绍jQuery框架中的Ajax（具体包含：jQuery框架的Ajax简介、$.ajax()方法、$.get()方法、$.post()方法等）。
b站黑马JavaScript的Ajax案例代码——聊天机器人案例
b站黑马JavaScript的Ajax案例代码——聊天机器人案例。该案例需要更换视频中老师的两个接口为本文中新的两个接口。！！！本文内含有有声音的效果展示视频，播放的时候注意音量！！！
Ajax实现前后端交互效果
一眼看中的Ajax
Filter&Listener&Ajax的介绍
▶ 概述`AJAX` (Asynchronous JavaScript And XML)：异步的 JavaScript 和 XML。概念中的`JavaScript` 表明该技术和前端相关；`XML` 是指以此进行数据交换。▶ 作用AJAX 作用有以下两方面：▷ 1. 与服务器进行数据交换：通过AJAX可以给服务器发送请求，服务器将数据直接响应回给浏览器。
  • • 学会iframe并用其解决跨域问题
  • • 【Ajax】全面详细了解git的基础操作【万
  • • 什么是Ajax？
  • • 基于Vue、Axios、Node.js的图书管理系统
  • • Ajax简介与基本使用
  • • b站黑马JavaScript的Ajax案例代码——聊
  • • Ajax实现前后端交互效果
  • • Filter&Listener&Ajax的介绍
  • • 第一节：ExtJS调用WCF系列-----实现JSO
  • • Asp.Net开发架构设计二
HTMLreactjsCSSNode.jsangulartypescriptvue.jsreact-natispringkotlinAPIseleniumtensorflowbashangularJSexpressxcodematplotlibflaskHibernatedictionaryrailscocoswebnpmreact-hookmongoosegoogle-appformswpfRestwebpackunit-testihttpclassfileNext.jsJsHTML5bootstrap-

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

  1. 前端监听websocket消息并实时弹出(实例代码)

    这篇文章主要介绍了前端监听websocket消息并实时弹出,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

  2. 应用程序关闭时的iOS任务

    我正在构建一个应用程序,通过ajax将文件上传到服务器.问题是用户很可能有时不会有互联网连接,并且客户希望在用户重新连接时安排ajax调用.这可能是用户在离线时安排文件上传并关闭应用程序.应用程序关闭时可以进行ajax调用吗？

  3. swift3.0-第一篇tableView

    最近这个月估计要一直设计新的项目天天开会苦不堪言啊~新的项目要用swift来写，从零开始还是很有乐趣的，简单总结了下table的使用，一起学习下吧。直接上代码了感谢观看，学以致用更感谢哦~

  4. android – Phonegap本地构建 – jquery ajax错误：readystate 0 responsetext status 0 statustext error

    解决方法您是否在索引文件中包含了内容安全元标记？

  5. Ajax简单的异步交互及Ajax原生编写

    一提到异步交互大家就会说ajax,仿佛ajax这个技术已经成为了异步交互的代名词.那下面将研究ajax的核心对象

  6. Ajax跨域问题的解决办法汇总(推荐)

    本文给大家分享多种方法解决Ajax跨域问题，非常不错具有参考借鉴价值，感兴趣的朋友一起学习吧

  7. ajax编写简单的登录页面

    这篇文章主要为大家详细介绍了ajax编写简单登录页面的具体代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

  8. ajax从JSP传递对象数组到后台的方法

    今天小编就为大家分享一篇ajax从JSP传递对象数组到后台的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

  9. 解决ajax返回验证的时候总是弹出error错误的方法

    这篇文章主要介绍了解决ajax返回验证的时候总是弹出error错误的方法，感兴趣的小伙伴们可以参考一下

  10. 使用AJAX完成用户名是否存在异步校验

    这篇文章主要介绍了使用AJAX完成用户名是否存在异步校验的相关资料,需要的朋友可以参考下

随机推荐

  1. xe-ajax-mock 前端虚拟服务

    最新版本见Github，点击查看历史版本基于XEAjax扩展的Mock虚拟服务插件；对于前后端分离的开发模式，ajax+mock使前端不再依赖后端接口开发效率更高。CDN使用script方式安装，XEAjaxMock会定义为全局变量生产环境请使用xe-ajax-mock.min.js，更小的压缩版本，可以带来更快的速度体验。

  2. vue 使用 xe-ajax

    安装完成后自动挂载在vue实例this.$ajaxCDN安装使用script方式安装，VXEAjax会定义为全局变量生产环境请使用vxe-ajax.min.js，更小的压缩版本，可以带来更快的速度体验。cdnjs获取最新版本点击浏览已发布的所有npm包源码unpkg获取最新版本点击浏览已发布的所有npm包源码AMD安装require.js安装示例ES6Module安装通过Vue.use()来全局安装示例./Home.vue

  3. AJAX POST数据中文乱码解决

    前端使用encodeURI进行编码后台java.net.URLDecoder进行解码编解码工具

  4. Koa2框架利用CORS完成跨域ajax请求

    实现跨域ajax请求的方式有很多，其中一个是利用CORS，而这个方法关键是在服务器端进行配置。本文仅对能够完成正常跨域ajax响应的，最基本的配置进行说明。这样OPTIONS请求就能够通过了。至此为止，相当于仅仅完成了预检，还没发送真正的请求呢。

  5. form提交时，ajax上传文件并更新到&lt;input&gt;中的value字段

  6. ajax的cache作用

    filePath="+escape;},error:{alert;}});解决方案：1.加cache:false2.url加随机数正常代码：网上高人解读：cache的作用就是第一次请求完毕之后，如果再次去请求，可以直接从缓存里面读取而不是再到服务器端读取。

  7. 浅谈ajax上传文件属性contentType = false

    默认值为contentType="application/x-www-form-urlencoded".在默认情况下，内容编码类型满足大多数情况。在这里，我们主要谈谈contentType=false.在使用ajax上传文件时：在其中先封装了一个formData对象，然后使用post方法将文件传给服务器。说到这，我们发现在JQueryajax()方法中我们使contentType=false,这不是冲突了吗？这就是因为当我们在form标签中设置了enctype=“multipart/form-data”,

  8. 909422229_ajaxFileUpload上传文件

    ajaxFileUpload.js很多同名的，因为做出来一个很容易。我上github搜AjaxFileUpload出来很多类似js。ajaxFileUpload是一个异步上传文件的jQuery插件传一个不知道什么版本的上来，以后不用到处找了。语法：$.ajaxFileUploadoptions参数说明：1、url上传处理程序地址。2，fileElementId需要上传的文件域的ID，即的ID。3，secureuri是否启用安全提交，默认为false。4，dataType服务器返回的数据类型。6，error

  9. AJAX-Cache：一款好用的Ajax缓存插件

    原文链接AJAX-Cache是什么Ajax是前端开发必不可少的数据获取手段，在频繁的异步请求业务中，我们往往需要利用“缓存”提升界面响应速度，减少网络资源占用。AJAX-Cache是一款jQuery缓存插件，可以为$.ajax()方法扩展缓存功能。

  10. jsf – Ajax update/render在已渲染属性的组件上不起作用

    我试图ajax更新一个有条件渲染的组件。我可以确保#{user}实际上是可用的。这是怎么引起的，我该如何解决呢？必须始终在ajax可以重新呈现之前呈现组件。Ajax正在使用JavaScriptdocument.getElementById()来查找需要更新的组件。但是如果JSF没有将组件放在第一位，那么JavaScript找不到要更新的内容。解决方案是简单地引用总是渲染的父组件。

返回
顶部