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

前天刚写了篇文章使用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就是从我的本机查询过去的。

 

至此把说说同步到博客园这个工程算是完成了一半,接下来需要取qq空间的数据,然后在wcf里面访问数据。

暂且这样,下文再续。

另:因为用的家里面的网,ip是固定的,所以能查到数据。明天上班去了,笔记本也要带着,所以明天估计服务不能用了,毕竟不能在公司做端口映射。

所以明天应该看不到效果。

 

 

本文地址:http://www.cnblogs.com/santian/p/4413361.html

博客地址:http://www.cnblogs.com/santian/

转载请以超链接形式标明文章原始出处。

转载于:https://www.cnblogs.com/santian/p/4413361.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值