一起学CC3200之HttpServer数据传输（中序）

来源：互联网发布：java sftp jcraft 编辑：程序博客网时间：2024/05/22 00:37

阿汤哥

序：

能力有限，难免有错，有问题请联系我，请留言或者邮件联系，

qq群交流482729453 邮件联系hytga@163.com

Pdf下载http://pan.baidu.com/s/1hqiWB56 以博客为最新版本，pdf是因为以前拉图片不好弄，我很烦一张一张图上传，很烦啊。。

QQ群目前是只有我一个人，有问题或者啥的请最好留言，这样别人也才能看到的，不然有时候一个问题讲两遍的话，会很伤神。

关键字：web服务器 ajax post get javascript

以前写过HttpServer的前序，http://blog.csdn.net/hytgab/article/details/45770301

本文章主要是介绍如何使用javascript和CC3200的web服务器通信。涉及到get，和post请求，其中还使用到ajax技术。通过这个基本可以完成简单的数据传输，可能CC3200的HttpServer还有其他先进的功能，这里就不深入了。因为我现在也不会。

一动态网页及CC3200的标签技术（简介）

二 POST数据

三 GET

四各种截图

五源码

一首先先介绍一个很重要的概念：动态网页及CC3200的标签技术（自己命名的。哈哈）

什么是动态网页？我的理解就是网页的内容是会变化的。
一般网页是用html语言写的，这个是静态的，是不变的，为了达到动态的效果。我们有两种方式：
1、采用ajax方式获取到数据，在动态地添加元素，这样是可以达到动态的效果的。
2、服务器动态地修改网页的数据
可以这样说，上面两种的方式是最基础的，不管是java写的sevlet还是cc3200的，最基础的都是这样干的。
那么CC3200是如何更改网页的数据？CC3200的运算能力是远远不如跑tomcat的pc主机.。。。
有一个技术叫SSI，参考文章http://blog.csdn.net/y13530828499/article/details/6657855
简单地说SSI：就是在网页上做一个标签譬如（__SL_G_PUN），cc3200遇到这个标签就把这个__SL_G_PUN换成另外一个字符串，这
样就达到动态的效果。那么还有一个问题就是我们在哪里做替换的操作？？？后面讲。

CC3200对这个标签是有一定的要求的：
GET标签
POST标签

GET标签是写在网页的代码里的，当你GET这个网页，CC3200把某些数据替换掉这个标签。
POST是写在javascript的代码的，当你GET这个网页，CC3200不会替换掉POST标签，但是你能用这个标签加数据，把数据提交到CC3200，这个就是一个键值对的关系。
在这里我想提出一个概念：标签和标签数据，方便我们后面讲解。
标签：GET标签和POST标签
标签数据：1、GET标签对应的数据，把GET标签给替换掉。2、POST方式上传的数据

二 POST数据

以前有说过HTTP的所有操作都在在SimpleLinkHttpServerCallback，SL_NETAPP_HTTPPOSTTOKENVALUE_EVENT下的。CC3200首先要获取标签及标签数据。POST请求可以获取数据外，还可以发生网页跳转
post方式：
ajax发起请求。url是NO_Content ,服务器返回204的状态码，此时网页并不会发生跳转，如果要跳转需要在success设置window.location.href。
form表单提交，url 示例： /www/ok.html 指向跳转的网页。这两者有啥不同点请具体看代码。
1、网页部分：
举例：javascripte post的数据是：：__SL_P_PUN=123 & __SL_P_PPW=abcd
我们上传了两个标签，分别为__SL_P_PUN 和__SL_P_PPW
其标签数据分为为123 abcd
2、cc3200部分：
获取方式:::
    //首先要获取token_name
         / /这里获取的到其实是标签+标签的数据，我认为这里ti处理的不好
         //直接返回标签不就好了，反正后面有获取标签数据，
        unsigned char *tokenName =
                pSlHttpServerEvent->EventData.httpPostData.token_name.data;
        //获取标签的数据
        unsigned char *tokenValue =
                pSlHttpServerEvent->EventData.httpPostData.token_value.data;
        //最好获取值的长度，不要直接使用strlen判断tokenValue的长度
        unsigned char tokenValueLen =
                pSlHttpServerEvent->EventData.httpPostData.token_value.len;

三 GET

1、需要在网页编写标签
如下

        <body>                 用户名：__SL_G_PUN                 密码：__SL_G_PPW           </body>

2、CC3200需要替换掉标签，写入标签数据
//ptr是标签数据的地方，这个数据会把get的标签给替换掉，
        ptr = pSlHttpServerResponse->ResponseData.token_value.data;
        //初始化标签数据的长度为0
        pSlHttpServerResponse->ResponseData.token_value.len = 0;
        if (memcmp(pSlHttpServerEvent->EventData.httpTokenName.data,
                "__SL_G_PUN", strlen("__SL_G_PUN")) == 0) {
            //拷贝数据
            memcpy(ptr, username, strlen(username) + 1);
            //更改标签数据的长度
            pSlHttpServerResponse->ResponseData.token_value.len += strlen(
                    username) + 1;
        }

四各种截图

1、烧录网页

2、main。html，先用post提交数据

3、ok。html，用get获取数据

五源码

main.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head>        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head><script type="text/javascript">     window.onload=function()//用window的onload事件，窗体加载完毕的时候     {         if (!window.HY) {             window.HY = {};         }         window.HY={             $: function () {                 var elements = new Array();                 for (var i = 0; i <= arguments.length; i++) {                     var element = arguments[i];                     if (typeof element == 'string') {                         element = document.getElementById(element);                     }                     if (arguments.length == 1) {                         return element;                     }                     elements.push(element);                 }                 return elements;             },             ajax:function (obj){                 if (!obj.url) {                     return false;                 }                 var XHR;                 var method = obj.type || "GET";                 var async =  true;                 var dataType = obj.dataType;                 var parms = obj.param || null;                 XHR = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");                 XHR.onreadystatechange = function () {                     if (XHR.readyState == 4 && (XHR.status >= 200 && XHR.status < 300 || XHR.status == 304)) {                         if (obj.success) {                             if (dataType && dataType.toLocaleLowerCase() === "json") {                                 try {                                     obj.success(eval("(" + XHR.responseText + ")"));                                 }                                 catch (err) {                                 }                             } else if (dataType && dataType.toLocaleLowerCase() === "xml") {                                 obj.success(XHR.responseXML);                             } else {                                 obj.success(XHR.responseText);                             }                         }                         if (obj.complete) {                             obj.complete();                         }                     }                 }                 XHR.open(method, obj.url, async);                 XHR.setRequestHeader("Content-type", "application/x-www-form-urlencoded");                 XHR.setRequestHeader("Content-length", parms.length);                 XHR.setRequestHeader("Connection", "close");                 XHR.setRequestHeader('If-Modified-Since', 'Thu, 06 Apr 2006 00:00: 00 GMT');                 if (obj.type == "POST") {                     XHR.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;");                 }                 if (obj.sendBefore) {                     obj.sendBefore();                 }                 XHR.send(parms);             }         }     };var ajaxObj = { url: "", dataType: "json", error: function () { }, sendBefore: function () { }, success: function () { } };function PostTest(){var data;data ="__SL_P_PUN=";data +=document.getElementById("username").value;data +="&";data +="__SL_P_PPW=";data +=document.getElementById("password").value;ajaxObj.type="POST";ajaxObj.url="No_content";ajaxObj.dataType = "text";ajaxObj.param = data;ajaxObj.success=function(){alert("Post success")};HY.ajax(ajaxObj);}function GetTest(){var data;data ="__SL_G_PUN=";data +="?";data +="&";data +="__SL_G_PPW=";data +="?";ajaxObj.type="GET";ajaxObj.url="/www/ok.html";ajaxObj.dataType = "text";ajaxObj.param = data;ajaxObj.success=function(a){alert(a)};HY.ajax(ajaxObj);}</script><body>    <h3>测试用ajax post 发送数据,不跳转</h3>    用户名:<input type="text" id="username"/><br/>    密码:<input type="password" id="password"/><br/>    <button type="button"  onclick="PostTest()"/>登录</button>    <br/>    <br/>    <h3>测试用form 表单提交方式 跳转</h3>    <form action="ok.html" method="post">        用户名:<input type="text" name="__SL_P_PUN"/><br/>        密码:<input type="password" name="__SL_P_PPW"/><br/>        <input type="submit" value="登录"/>    </form>    <br/>    <br/>    <h3>测试用ajax get 获取数据，不跳转</h3>    <button onclick="GetTest()">获取数据</button>    <br/><br/>    <h3>测试用ajax get 获取数据，跳转</h3>    <a href="ok.html">获取数据</a></body></html>

ok.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>  <body>  用户名：__SL_G_PUN      密码：__SL_G_PPW  </body></html>

cc3200处理GET和POST的回调函数

//*****************************************************************************// SimpleLink Asynchronous Event Handlers -- Start//*****************************************************************************//http的回调函数:在这一部分主要处理的是post和getchar username[40];char password[40];void SimpleLinkHttpServerCallback(SlHttpServerEvent_t *pSlHttpServerEvent,SlHttpServerResponse_t *pSlHttpServerResponse) {unsigned char strLenVal = 0;if (!pSlHttpServerEvent || !pSlHttpServerResponse) {return;}UART_PRINT("SimpleLinkHttpServerCallback\r\n");switch (pSlHttpServerEvent->Event) {case SL_NETAPP_HTTPGETTOKENVALUE_EVENT: {unsigned char status, *ptr;//get请求//ptr是标签数据的地方，这个数据会把get的标签给替换掉，ptr = pSlHttpServerResponse->ResponseData.token_value.data;//初始化标签数据的长度为0pSlHttpServerResponse->ResponseData.token_value.len = 0;if (memcmp(pSlHttpServerEvent->EventData.httpTokenName.data,"__SL_G_PUN", strlen("__SL_G_PUN")) == 0) {//拷贝数据memcpy(ptr, username, strlen(username) + 1);//更改标签数据的长度pSlHttpServerResponse->ResponseData.token_value.len += strlen(username) + 1;}if (memcmp(pSlHttpServerEvent->EventData.httpTokenName.data,"__SL_G_PPW", strlen("__SL_G_PPW")) == 0) {memcpy(ptr, password, strlen(password) + 1);pSlHttpServerResponse->ResponseData.token_value.len += strlen(password) + 1;}}break;case SL_NETAPP_HTTPPOSTTOKENVALUE_EVENT: {//处理post请求unsigned char led;//首先要获取token_name//这里获取的到其实是标签+标签的数据，我认为这里ti处理的不好//直接返回标签不就好了，反正后面有获取标签数据，unsigned char *tokenName =pSlHttpServerEvent->EventData.httpPostData.token_name.data;//获取标签的数据unsigned char *tokenValue =pSlHttpServerEvent->EventData.httpPostData.token_value.data;//最好获取值的长度，不要直接使用strlen判断tokenValue的长度unsigned char tokenValueLen =pSlHttpServerEvent->EventData.httpPostData.token_value.len;UART_PRINT("tokenName %s\r\n", tokenName);UART_PRINT("tokenValue %s\r\n", tokenValue);if (memcmp(tokenName, "__SL_P_PUN", strlen("__SL_P_PUN")) == 0) {memcpy(username, tokenValue, tokenValueLen);username[tokenValueLen] = 0;}if (memcmp(tokenName, "__SL_P_PPW", strlen("__SL_P_PPW")) == 0) {memcpy(password, tokenValue, tokenValueLen);password[tokenValueLen] = 0;}}break;default:break;}}

1 0