转载

将多说作为静态页面的数据库

前几天想做一个测试，思路就是获取 UA 然后分析数据，所以做一个 HTML 页面使用 JavaScript 就可以实现了，这样正好可以托管到 Github Pages 上，连服务器都省下了。但实现这样一个统计功能，单纯获取信息是不行的，我们还需要一个数据库来存放数据，然后读取分析。

那么问题来了，如何在静态页面上来保存信息、存储数据？

方法肯定是 AJAX 发送到第三方服务，由于最近在看 Github 的 API 文档，所以考虑在对应 Repo 上创建 Issue 来实现。但是这类 POST 操作，肯定是需要各种权限校验的，Github 当然不例外，实在是太麻烦了，所以寻找其他替代品。Issue 带有评论功能，于是就想到了多说。

看了一下多说 API 的发表评论文档和获取评论文档，太棒了，正好具备我们需要的功能。可以通过 AJAX 发表评论，评论的内容就是我们需要记录的数据，我们也可以将评论数据拉去下来进行分析。它的权限校验也没有很复杂，只需要发送对应的 Secret ID 即可。

下面就看看具体如何实现。

使用多说存储、分析数据

配置多说站点

首先你需要创建一个新站点，无论你之前有没有用过他们的服务，你都应该为测试项目创建一个单独的站点。因为需要使用 Secret ID，并且用在前端，会随意被别人看到。

打开多说首页，点击“我要安装”，会跳转到创建站点界面，填写完成即可创建站点。

之后我们需要创建一篇文章，因为评论是要挂钩到对应文章上面的。在多说后台，找到“文章”标签，手动添加一篇文章，记下关键信息 Thread_Key 即可，其他的随便填下就可以。

浏览器端发送数据

怎么获取你要保存的数据这里不再赘述，需要注意的就是考虑好数据存储格式，比如是 JSON 字符串等，设计好键值，到时候方便写程序做数据统计和分析。

根据这个多说发表评论 API ，我们在浏览器端就是写一个 AJAX 去发送 POST，但是这里面有个跨域提交 POST 的问题，这里我使用 iframe 来解决跨域问题。

iframe 跨域其实不能算是 AJAX，它的大体思路就是创建一个 form 表单， method 设置成 POST ， action 设置成目标 API 地址，将这个表单提交。因为表单提交会跳转，所以在外面包裹一层 iframe ，这样不会影响当前页面，伪造出一种我用过 AJAX 的感觉。

David 在 Cross Domain AJAX Guide 提供了一个很棒的函数：

function postIframe(target_url, method , params){

// Add iframe

var iframe = document.createElement( "iframe" );

document.body.appendChild(iframe);

iframe.style.display = "none" ;

// Give the frame a name

var frame_name = "frame_name" + (new Date ).getTime();

iframe.contentWindow.name = frame_name;

//build the form

var form = document.createElement( "form" );

form.target = frame_name;

form.action = target_url;

form. method = method ;

//loop through all parameters

for ( var key in params)

{

if (params.hasOwnProperty(key))

{

var input = document.createElement( "input" );

input. type = "hidden" ;

input.name = key;

input.value = params[key];

form.appendChild(input);

}

document.body.appendChild(form);

form.submit();

}

使用方法很简单，你把要发送的数据保存成 JavaScript object 格式，往里面一丢即可：

var obj = { my_request_is: "foo" , bar: "baz" };

postIframe( "多说 API URL" , "POST" , obj);

这里要发送的 obj 需要添加一些必要的参数让多说校验，这时候文档的坑就来了。

short_name 中所说的多说二级域名，并不是 jiangshui-test.duoshuo.com ，而只是前面部分 jiangshui-test ，按常理理解二级域名一般是整个域名。后面多说其他文档有详细提到这一点，但是这里没有。

在请求参数一节，直观的看，必须提交三个参数： short_name 、 secret 、 message ，但实际上不填写 thread_key 或 thread_id 以及 author_name 、 author_email 是有前提的，在多说获取到相关信息的情况下可以不写，否则会报错。其中 thread_key 或 thread_id 填写一个即可， author_email 参数如果你在多说后台 “设置” -》“基本设置” 中，勾选掉 “要求游客输入邮件地址” 之后，也可以不发送。

那么你的发送代码差不多这样子：

var result = {};

result .short_name = 'jiangshui-test';

result .thread_key = ' 1 ';

result .secret = ' 4 ead768a9e5d58******************';

result .author_name = 'testname';

result .message = JSON .stringify(dataObj);

postIframe('http://api.duoshuo.com/posts/create.json', ' POST ', result );