AJAX即 “Asynchronous JavaScript and XML”(异步JavaScript和XML),通过 AJAX可使用 JavaScript 与 XMLHttpRequest 对象直接与服务器进行通信。通过这个对象, JavaScript 可在不重载页面的情况与 Web 服务器交换数据。AJAX 在浏览器与 Web 服务器之间使用异步数据传输(HTTP 请求),这样就可使网页从服务器请求少量的信息,从而避免整个页面的刷新。针对AJAX的长处,从.NET Framework 3.5开始就加大对ASP.NET AJAX的支撑,WCF通过WebScriptEnablingBehavior行为来处理页面的请求。下面以一个简单的例子来说明一下:

首先,开发一个数据契约Person

 1 namespace Service.Model
 2 {
 3     [DataContract]
 4     public class Person
 5     {
 6         [DataMember]
 7         public int ID
 8         {
 9             get;
10             set;
11         }
12         [DataMember]
13         public string Name
14         {
15             get;
16             set;
17         }
18         [DataMember]
19         public int Age
20         {
21             get;
22             set;
23         }
24     }
25 }

添加项目,选择“启动了AJAX的WCF服务”。系统使用IIS托管了此服务,然后把代码绑定在PersonService.cs文件内,注意把RequirementsMode设置为AspnetCompatibilityRequirementsModel.Allowed,让页面可以直接调用此对象。

 1 <%@ ServiceHost Language="C#" Debug="true" Service="Ucsmy.Service.PersonService" CodeBehind="~/App_Code/PersonService.cs" %>
 2 
 3 
 4 namespace Ucsmy.Service
 5 {
 6     [ServiceContract(Namespace = "Ucsmy.Service")]
 7     [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
 8     //注意必须将RequirementsMode设置为AspNetCompatibilityRequirementsMode.Allowed
 9     public class PersonService
10     {
11         [OperationContract]
12         [WebGet]       // 要使用 HTTP GET,请添加 [WebGet] 特性。 
13         public IList<Person> GetList()
14         {
15             IList<Person> personList = new List<Person>();
16 
17             Person person1 = new Person();
18             person1.ID = 0;
19             person1.Age = 27;
20             person1.Name = "Leslie";
21             personList.Add(person1);
22 
23             Person person2 = new Person();
24             person2.ID = 1;
25             person2.Age = 23;
26             person2.Name = "Rose";
27             personList.Add(person2);
28 
29             Person person3 = new Person();
30             person3.ID = 2;
31             person3.Age = 29;
32             person3.Name = "Jack";
33             personList.Add(person3);
34 
35             return personList;
36         }
37     }
38 }

添加.config配置文件,注意文件中在endpointBehavior添加了enableWebScript设置,它能启动JSON,并能为PersonService生成客户端的Javascript代理代码。

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <configuration>
 3     <system.web>
 4         <compilation debug="true" targetFramework="4.0">
 5             <assemblies>
 6                 <add assembly="System.Data.Entity,Version=4.0.0.0,Culture=neutral,PublicKeyToken=B77A5C561934E089" />
               </assemblies>
          </compilation>
 8     </system.web>
 9     <system.serviceModel>
10         //启动aspNetCompatibilityEnabled
11         <serviceHostingEnvironment aspNetCompatibilityEnabled="true" multipleSiteBindingsEnabled="true" />
12   <behaviors>
13    <endpointBehaviors>
14        //启动ServiceAspNetAjaxBehavior行为
15     <behavior name="ServiceAspNetAjaxBehavior">
16      <enableWebScript />
17     </behavior>
18    </endpointBehaviors>
19    <serviceBehaviors>
20     <behavior name="ServiceBehavior">
21      <serviceMetadata httpGetEnabled="true" />
22      <serviceDebug includeExceptionDetailInFaults="false" />
23     </behavior>
24    </serviceBehaviors>
25   </behaviors>
26     <services>
27        <service behaviorConfiguration="ServiceBehavior" name="Ucsmy.Service.PersonService">
28           <endpoint address="" binding="webHttpBinding" contract="Ucsmy.Service.PersonService" 
                      behaviorConfiguration="ServiceAspNetAjaxBehavior" />   
29           <endpoint address="mex" binding="mexHttpBinding" contract="IMetadataExchange" />
30        </service>
31     </services>
32     </system.serviceModel>
33 </configuration>

在页面添加ScriptManager控件,加上对PersonService服务的引用。值得注意的一点是,在默认情况下通过AJAX调用WCF只支持同一个域名,这是因为受到了Javascript的约束。如果要实现跨域调用,需要客户端改变浏览器的设置,这样使用起来并不现实。

 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head runat="server">
 3     <title></title>
 4 </head>
 5 <body>
 6     <form id="form1" runat="server">
 7     <asp:ScriptManager ID="ScriptManager1" runat="server">
 8       <Services>
 9         <asp:ServiceReference Path="PersonService.svc" />
10         //添加服务引用
11       </Services>
12     </asp:ScriptManager>
13      <script type="text/javascript">
14          function GetList() {
15              //设定错误处理
16              Ucsmy.Service.PersonService.set_defaultFailedCallback(onError);
17              //设定返回后操作
18              Ucsmy.Service.PersonService.GetList(onComplete);
19          }
20 
21          function onComplete(result) {
22              var personList="";
23              if (result != null) {
24                  for (var n = 0; n < result.length; n++) {
25                      personList += "ID:" + result[n].ID + " Name:" + result[n].Name + " Age:" + result[n].Age ;
26                  }
27                  //显示结果
28                  alert(personList);
29              }
30          }
31 
32          function onError(message) {
33               //显示错误信息
34              alert(message.get_message());
35          }
36     </script>
37     <div>
38         <label id="label1"></label>
39         <button onclick="GetList()">Button</button>
40     </div>
41     </form>
42 </body>
43 </html>

AJAX前景非常乐观,可以提高系统性能,优化用户界面,提高页面的视觉效果。另外微软也在客户端引入了一套AJAX组件,只需要添加对AjaxControlToolkit.dll文件的引用 ,就可以在控件列表中出现相关控件。

WCF揭秘——使用AJAX+WCF服务进行页面开发的更多相关文章

  1. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  2. HTML5数字输入仅接受整数的实现代码

    这篇文章主要介绍了HTML5数字输入仅接受整数的实现代码,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  3. amaze ui 的使用详细教程

    这篇文章主要介绍了amaze ui 的使用详细教程,本文通过多种方法给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  4. html5简介_动力节点Java学院整理

    这篇文章主要介绍了html5简介,用于指定构建网页的元素,这些元素中的大多数都用于描述网页内容,有兴趣的可以了解一下

  5. ios 8 Homescreen webapp,关闭和打开iPad停止javascript

    我有一个适用于iPad的全屏HTML5网络应用程序,并且刚刚安装了IOS8来试用它,它一切正常,直到你关闭并重新启动iPad.一旦web应用程序重新启动javascript就会停止并加载新页面不会重新启动它.在iPad上的Safari中打开同一页面时,关闭和打开iPad会继续按预期工作.其他人注意到了这个或想出了一个解决方案吗?解决方法这似乎是我在iOS8.1.1更新中解决的.

  6. iOS 6 javascript与object.defineProperty的间歇性问题

    当访问使用较新的Object.defineProperty语法定义属性的对象的属性时,有没有其他人注意到新iOS6javascript引擎中的间歇性错误/问题?https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/defineProperty我正在看到javascript失败的情况,说

  7. ios – 如何使用JSExport导出内部类的方法

    解决方法似乎没有办法将内部类函数导出到javascript.我将内部类移出并创建了独立的类,它起作用了.

  8. 静音iOS推送通知与React Native应用程序在后台

    我有一个ReactNative应用程序,我试图获得一个发送到JavaScript处理程序的静默iOS推送通知.我看到的行为是AppDelegate中的didReceiveRemoteNotification函数被调用,但是我的JavaScript中的处理程序不会被调用,除非应用程序在前台,或者最近才被关闭.我很困惑的事情显然是应用程序正在被唤醒,并且它的didReceiveRemoteNotifi

  9. ios – 内存泄漏与UIWebView和Javascript

    清楚地包含一个Javascript文件到我的HTML是使UIWebView泄漏内存.当我重复使用相同的UIWebView对象时,或者每当我有内容实例化一个新的漏洞时,会出现泄漏的事实,导致我认为必须有一些JavaScript文件被loadHTMLString处理,导致泄漏.有人知道如何解决这个问题吗?

  10. iOS应用程序的UI自动化测试如何与乐器和Javascript

    从WWDC2010视频会议中了解iOS应用程序的自动化UI测试,但没有实践.从代码项目project,我们可以有一个例子.这个问题在这里听到有涉及这个的人.任何限制?解决方法我建议从AlexWollmer开始使用thisblogpost.他创建了一个非常有用的JavaScript库:tuneup_jswithtest()函数,它允许测试分离和有用的帮助者以及为自动化仪器编写测试的断言.

随机推荐

  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找不到要更新的内容。解决方案是简单地引用总是渲染的父组件。

返回
顶部