Cloud存储的JavaScript 版本

这次我打算用纯粹的Html实现上一篇同样的功能，就是Post Data到云端托管程序。

整体结构

输入：用户通过Html input机构实现，后期可以连接DB
格式：JSON字符串，这里我手动拼接了一个，实现类和对象的stringify()也是行得通的
输出：Html的文本innerHtml输出Request.Response的内容
纯粹JavaScript/AJAX实现，结果证明没有我想的那么简单

CORS，跨域，Browser，security

花了我一个小时在阅读stackoverflow以及帖子最终也没能通过代码修改，对服务器端代码越过安全检查-不知道新版本总弄些bug模样的特性要搞啥，一个大拿说测试时服务器需要打开跨域安全检查而生产版本必须关闭现实情况和这个相反而且无法操作服务器呢。于是用了一个极为偷懒的办法实现了。通过这一句

chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security

可以实现本地浏览器放行-可为什么人们说要改变服务端呢，为什么postman可以完美跨越呢。问题还是在浏览器。

创建

建造一个Html并在body里填上

<ol>
    <li>Url:<input type="text" value="http://api.heclouds.com/devices/{0}/datapoints HTTP/1.1" id="textUrl" /></li>
    <li>APIKey:<input type="text" value="APIKey" id="textApiKey" /></li>
    <li>Datastream<input type="text" value="Dimensional" id="textDatastream" /></li>
    <li>Values<input type="text" value="81.9" id="textValues" /></li>
  </ol>
  <h1 onclick="postData(this)">发布数据</h1>

  Output:<p id="p1"></p>

实现输入；

AJAX Post 数据部分用JavaScript操作

<script>    

 
    function postData(id) {

      var xmlhttp = new XMLHttpRequest();

      xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
          document.getElementById('p1').innerHTML = xmlhttp.getAllResponseHeaders() + xmlhttp.responseText;
        }
      }
      // content
      var url = document.getElementById("textUrl").value;
      var apiKey = document.getElementById("textApiKey").value;
      var ds = document.getElementById("textDatastream").value;
      var values = document.getElementById("textValues").value;
      var dateTime = new Date().Format("yyyy-MM-ddThh:mm:ss");

      var handMadeJson = "{\"datastreams\":[{\"id\":\"" + ds + "\", " + "\"datapoints\":[{\"at\":\"" + dateTime + "\",\"value\":" + values + "}]},]}";
      xmlhttp.open("POST", url, true);

      xmlhttp.setRequestHeader("api-key", apiKey);
      xmlhttp.setRequestHeader("Content-Type", "text/html");
      xmlhttp.withCredentials = true;

      // post/AJAX
      xmlhttp.send(handMadeJson);

      // present result
    }
</script>

值得注意的地方DateTime 的格式化创建，抄了一段, 修改1个大小写就能工作.

   var handMadeJson = "{\"datastreams\":[{\"id\":\"" + ds + "\", " + "\"datapoints\":[{\"at\":\"" + dateTime + "\",\"value\":" + values + "}]},]}";

这里手动JSON拼接。字符串里不能有空格，让我困扰。

以上，这样极简JavaScript版就完成了；实测效果这样

看到error succ心头一紧。

总结

MVC版好处是可以外接数据库，无论SQL还是NO SQL都行
JavaScript版好处是便携和移动
实现玩具版的IoT探针是大家都能做的，最好有应用层面数据分析处理能力，数据挖掘方法，M.L. 和统计模型预测，这才是内容价值。而物联网是一个合适 平台。