将微博或者qq空间的说说同步至博客园 wcf+js(ajax)跨域请求(1)

浏览数：22 / 时间：2015年06月09日

前天刚写了篇文章使用Bootstrap为你的博客园自定义轮播图片(今天将图片加载的顺序调整了下，不在访问的时候直接加载，而是页面加载最后在脚本里面动态添加dom元素)，虽说技术含量不怎么高，但是大家还算感兴趣。其实对博主来说最关键是博客的积分在涨。所以趁热打铁，再来一篇使用wcf+js ajax跨域请求数据同步空间说说的帖子。

因为是请求qq说说的数据，所以要登陆我的qq，这个很麻烦，总不能让每个访客都登陆的qq,然后把数据取出来吧，而且qq也没有相关的接口提供，登陆的时候还要处理验证码。所以这种思路立马被否定了。最后突然想到了wcf,让大家直接来我的机器上取数据就安全多了。所以最终决定，在我本机上部署wcf服务，在博客园使用js来跨域请求数据。至于qq数据就好说了。打算使用chrome插件当我登陆qq的时候讲数据存储下来，然后大家来我这访问数据的时候可以直接去取保存好的数据，数据可以保存到数据库，也可以保存在txt文件里。chrome插件取数据好取，但因为js不能直接操作文件夹，所以这个问题还没想好，不过html5现在也应该有相应的解决方案，这个问题暂且不提。

配置wcf服务

项目结构如下

技术分享

AjaxService.cs类

using System;
using System.Collections.Generic;
using System.Linq;
using System.ServiceModel;
using System.ServiceModel.Activation;
using System.ServiceModel.Web;
using System.Text;
using System.Threading.Tasks;

namespace IISServices
{
    [ServiceContract(Namespace = "")]
    [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
    [JavascriptCallbackBehavior(UrlParameterName = "JsonCallBack")]
    public class AjaxService
    {
        [OperationContract]
        [WebGet(RequestFormat = WebMessageFormat.Json)]
        public string Test(string value)
        {
            return "wcfservice:" + value;
        }
    }
}

AjaxService.svc

 <%@ServiceHost Service="IISServices.AjaxService"%>

Web.Config

<?xml version="1.0" encoding="utf-8" ?>
<configuration>
  <system.web>
    <compilation debug="true" targetFramework="4.0" />
    <!--添加：authentication，并设置为Forms-->
    <authentication mode="Forms"/>
  </system.web>
  <system.serviceModel>
    <behaviors>
      <endpointBehaviors>
        <behavior name="Wcf.demo.AjaxServiceAspNetAjaxBehavior">
          <enableWebScript />
        </behavior>
      </endpointBehaviors>
      <!--添加serviceBehaviors-->
      <serviceBehaviors>
        <behavior name="EnableMetadataBehaviors">
          <serviceMetadata httpGetEnabled="true"/>
          <serviceDebug includeExceptionDetailInFaults="true"/>
        </behavior>
      </serviceBehaviors>
      <!--添加serviceBehaviors:结束-->
    </behaviors>
    <!--添加bindings-->
    <bindings>
      <webHttpBinding>
        <binding name="test" crossDomainScriptAccessEnabled="true"></binding>
      </webHttpBinding>
    </bindings>
    <!--添加bindings：结束-->

    <serviceHostingEnvironment aspNetCompatibilityEnabled="true"
        multipleSiteBindingsEnabled="true" />
    <services>
      <!--为service添加：behaviorConfiguration:元数据-->
      <service name="IISServices.AjaxService" behaviorConfiguration="EnableMetadataBehaviors">
        <!--为endpoint添加：bindingConfiguration跨域-->
        <endpoint address="" behaviorConfiguration="Wcf.demo.AjaxServiceAspNetAjaxBehavior"
          bindingConfiguration="test"   binding="webHttpBinding" contract="IISServices.AjaxService" />
      </service>
      <!--<service behaviorConfiguration="EnableMetadataBehaviors" name="IISServices.CalculatorService">
        <endpoint  binding="wsHttpBinding" contract="IISServices.ICalculator" />
      </service>-->
    </services>
   
  </system.serviceModel>
  
</configuration>

生成服务，我们把项目发布一下

技术分享　　

　　bin里面是我们生成的dll.

配置IIS

现在我们配置一下我们的IIS

技术分享

配置好IIS,我们需要做一下端口映射，注意上面的说明，只要做了端口映射，公网上的访问就会被转接到我们本地的端口上去。

技术分享

做好端口映射，我们还需要关闭防火墙。

现在我们分别使用公网和内网访问一下我们的网站技术分享

技术分享

我们发现两个地址都可以访问到我们的服务，所以配置成功了。

在博客园js里面调用wcf服务

我们只需要在页脚的script里面加入如下代码就可以了。注意，在调试代码的时候不要在博客园的脚本里加入alert,我就是因为刚开始加入了alert，导致整个js不在加载，这应该是博客园的验证机制。当时还以为博客园不允许跨域访问。折腾不少时间才发现去掉alert就好了。

  (function myfunction() {
        var url = "http://39.183.39.251:99/AjaxService.svc/Test?JsonCallBack=?&";
          $.getJSON(url, { "value": "跨域" }, function (msg) {
             $(".headerText").append(msg);
          });
    })();

现在保存我们的脚本，然后访问我们的页面会发现，在最上面的我的博客名下面都多了一个wcfservice:跨域字段，其中的wcfservice就是从我的本机查询过去的。

技术分享　