【WCF--初入江湖】12 WCF与Ajax编程
12 WCF与Ajax编程
Ajax
Ajax基本原理
AJAX技术的本质原理就是：使用 JavaScript 的 XMLHttpRequest 对象来直接与服务器进行通信。
通过这个对象，JavaScript 可在不重载页面的情况与 Web 服务器交换数据。然后通过DOM更新部分页面数据。
Ajax最大的优点
在于它带来的更好的用户体验。传统的web页面请求不同，AJAX技术当提交表单时就向web服务器发送一个请求。
服务器接收并处理传来的表单，然後返回一个新的网页。这个做法浪费了许多带宽，
因为在前後两个页面中的大部分HTML代码往往是相同的。AJAX 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求），
这样就可使网页从服务器请求少量的信息，而不是整个页面。
ajax调用WCF
WCF服务，为了能使js调用，必须为服务实现类（因为AspNetCompatibilityRequirements只对类有效）设置AspNetCompatibilityRequirements为Allowed，使得
WCF跟AspNet的技术相兼容。
WCF虽然在设计上可以进行独立传输，但当应用于一个ASP.NET AJAX应用程序环境下时，
WCF服务实际上可以工作在一种十分类似于ASMX服务的方式下。
借助于这个AspNetCompatibilityRequirements属性，我们可以指示WCF使用与ASMX服务相同的模型进行工作。
注意，要实现WCF服务与ASMX服务的兼容性至少要实现两点。
第一，在配置文件web.config中，需要进行类似如下的声明式定义：
<system.serviceModel>
<serviceHostingEnvironment aspNetCompatibilityEnabled="true" />
</system.serviceModel>
第二，开发者需要显式地选择一个给定WCF服务的兼容性方式，这是通过使用服务AspNetCompatibilityRequirements属性完成的。
新建一个WCF应用程序项目：
IServer.cs
using System; using System.Collections.Generic; using System.Linq; using System.Runtime.Serialization; using System.Security.Cryptography.X509Certificates; using System.ServiceModel; using System.ServiceModel.Activation; using System.ServiceModel.Web; using System.Text; namespace Keasy5.WCF.Ajax.Service { [ServiceContract] public interface IService1 { [OperationContract] string GetData(string value); } }
Service1.svc.cs
using System; using System.Collections.Generic; using System.Linq; using System.Runtime.Serialization; using System.ServiceModel; using System.ServiceModel.Activation; using System.ServiceModel.Web; using System.Text; using Keasy5.WCF.Ajax.Service; namespace Keasy5.WCF.Ajax.Service { [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)] public class Service1 : IService1 { public string GetData(string value) { return string.Format("Hi:{0}", value); } } }
服务端配置：
<?xml version="1.0" encoding="utf-8"?> <configuration> <system.web> <compilation debug="true" targetFramework="4.0" /> </system.web> <system.serviceModel> <behaviors> <serviceBehaviors> <behavior> <serviceMetadata httpGetEnabled="true"/> <serviceDebug includeExceptionDetailInFaults="false"/> </behavior> </serviceBehaviors> <endpointBehaviors> <behavior name="enableWebScript_ajax"> <enableWebScript /> </behavior> </endpointBehaviors> </behaviors> <serviceHostingEnvironment multipleSiteBindingsEnabled="true" aspNetCompatibilityEnabled="true"/> <services> <service name="Keasy5.WCF.Ajax.Service.Service1"> <endpoint address="" behaviorConfiguration="enableWebScript_ajax" binding="webHttpBinding" contract="Keasy5.WCF.Ajax.Service.IService1"></endpoint> </service> </services> </system.serviceModel> <system.webServer> <modules runAllManagedModulesForAllRequests="true"/> <directoryBrowse enabled="true"/> </system.webServer> </configuration>
右键Service1.svc--在浏览器中查看，在原来的地址中加入“/js”,修改地址为:
http://localhost:18476/Service1.svc/js
WCF 服务返回：
Type.registerNamespace('tempuri.org'); tempuri.org.IService1=function() { tempuri.org.IService1.initializeBase(this); this._timeout = 0; this._userContext = null; this._succeeded = null; this._failed = null; } tempuri.org.IService1.prototype={ _get_path:function() { var p = this.get_path(); if (p) return p; else return tempuri.org.IService1._staticInstance.get_path();}, GetData:function(value,succeededCallback, failedCallback, userContext) { return this._invoke(this._get_path(), 'GetData',false,{value:value},succeededCallback,failedCallback,userContext); }} tempuri.org.IService1.registerClass('tempuri.org.IService1',Sys.Net.WebServiceProxy); tempuri.org.IService1._staticInstance = new tempuri.org.IService1(); tempuri.org.IService1.set_path = function(value) { tempuri.org.IService1._staticInstance.set_path(value); } tempuri.org.IService1.get_path = function() { return tempuri.org.IService1._staticInstance.get_path(); } tempuri.org.IService1.set_timeout = function(value) { tempuri.org.IService1._staticInstance.set_timeout(value); } tempuri.org.IService1.get_timeout = function() { return tempuri.org.IService1._staticInstance.get_timeout(); } tempuri.org.IService1.set_defaultUserContext = function(value) { tempuri.org.IService1._staticInstance.set_defaultUserContext(value); } tempuri.org.IService1.get_defaultUserContext = function() { return tempuri.org.IService1._staticInstance.get_defaultUserContext(); } tempuri.org.IService1.set_defaultSucceededCallback = function(value) { tempuri.org.IService1._staticInstance.set_defaultSucceededCallback(value); } tempuri.org.IService1.get_defaultSucceededCallback = function() { return tempuri.org.IService1._staticInstance.get_defaultSucceededCallback(); } tempuri.org.IService1.set_defaultFailedCallback = function(value) { tempuri.org.IService1._staticInstance.set_defaultFailedCallback(value); } tempuri.org.IService1.get_defaultFailedCallback = function() { return tempuri.org.IService1._staticInstance.get_defaultFailedCallback(); } tempuri.org.IService1.set_enableJsonp = function(value) { tempuri.org.IService1._staticInstance.set_enableJsonp(value); } tempuri.org.IService1.get_enableJsonp = function() { return tempuri.org.IService1._staticInstance.get_enableJsonp(); } tempuri.org.IService1.set_jsonpCallbackParameter = function(value) { tempuri.org.IService1._staticInstance.set_jsonpCallbackParameter(value); } tempuri.org.IService1.get_jsonpCallbackParameter = function() { return tempuri.org.IService1._staticInstance.get_jsonpCallbackParameter(); } tempuri.org.IService1.set_path("http://localhost:18476/Service1.svc"); tempuri.org.IService1.GetData= function(value,onSuccess,onFailed,userContext) {tempuri.org.IService1._staticInstance.GetData(value,onSuccess,onFailed,userContext); }
可以看成是服务端调用的代理类。
示例1：用户验证
示例2：滚动图片新闻
【The end】
