前天刚写了篇文章使用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/