【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】