将微博或者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是固定的，所以能查到数据。明天上班去了，笔记本也要带着，所以明天估计服务不能用了，毕竟不能在公司做端口映射。

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

本文地址：/article/5885438.html

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

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