Boa服务器下的ajax与cgi通信

最近在最有做一个嵌入式课程设计,要求是利用基于cortax a8的物联网实验箱做一个简单的嵌入式网页交互系统作为课程设计来验收评分。因为本身自己是学前端的,所以网页部分并不是重点,主要是和boa服务器之间的通信,课程实验给的例子是直接使用printf来打印html标签形成新的页面,有过前端开发经验的人都知道这种做法效率低下而且没有办法实现异步刷新,所以博主采用ajax来进行boa服务器下的异步通信。

主要实现及踩过的坑如下:

1. get 还是 post请求:怎么发请求参见W3School上的ajax教程

推荐一般人没有前端基础的人使用get请求,因为只需要在请求的参数做一个字符串拼接就可以完成基本的ajax请求,具体实现可以参照一下这个网址(http://blog.csdn.net/huguohu2006/article/details/7755107),接下来重点讲一下post请求,优势这里我就不多讲了,前面的教程里面都有,主要讲一下实现方式:

function sender(url, data) {
var xhr = createXHR();
if (xhr) {
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);
console.log(xhr.responseText.toString());
var returnValue = xhr.responseText.toString();
console.log(returnValue);
return returnValue;
// firefox下xhr.responseText作为返回值失效的问题
// ie可以利用return来得到值。但firefox则不能,只能在readyState == 4 && status == 200时处理一个函数
// 这个函数应当作为一个参数传递入函数。有个奇怪现象你如果去除红线部分的注释,firefox又可以取到值。
// 估计是firefox使用ajax取值有个延时造成。
//return xhr.responseText.toString();
}
};
xhr.open("post", url, true);
// send(string) 仅适用于post请求
xhr.send(data);
} else {
//XMLHttpRequest对象创建失败
alert("浏览器不支持,请更换浏览器!");
}
}

利用调用sender函数来实现ajax,函数的两个参数分别是请求的url和要发送的数据,注意post请求只能发送string类型的数据。如果要发送其他类型的数据建议采用jquery封装的ajax方法,这里之所以采用原生的ajax方法来发送数据主要有以下几个原因:

•jquery库的体积比较大,有可能mount进开发箱上的linux系统时出现失败的情况,这种情况可以通过mount u盘的方式解决 mount u盘的命令如下: mount -r /dev/uba4 /web -r为mount进文件的读写权限,具体可执行搜索查询,uba4为U盘在linux系统上显示的名字,web为目标文件夹,使用U盘挂载的缺点在于整个U盘的文件会全部被复制到目标文件夹中,有点缀余

•发送的数据不很多,也没有其他的类型要求,使用string类型完全可以满足开发需求,没必要引入jquery库增加项目空间

•原生的ajax可以更好地解释http请求的原理

下面再介绍一下cgi文件对http请求的处理,示例函如下:

#include <stdlib.h>
#include <stdio.h>
#include <string.h>
char* get_cgi_data(FILE* fp, char* method)
{
char* input;
int len;
int size=1024;
int i=0;
if (strcmp(method, "GET") == 0) /**< GET method */
{
input = getenv("QUERY_STRING");
return input;
}
else if (strcmp(method, "POST") == 0) /**< POST method */
{
len = atoi(getenv("CONTENT_LENGTH"));
input = (char*)malloc(sizeof(char) * (size+1));
if (len == 0)
{
input[0] = '\0';
return input;
}
while (1)
{
input[i] = (char)fgetc(fp);
if (i == size)
{
input[i+1] = '\0';
return input;
}
--len;
if (feof(fp) || (!(len)))
{
i++;
input[i] = '\0';
return input;
}
i++;
}
}
return NULL;
}
int main(void)
{
char* input;
char* method;
char name[64];
char passwd[64];
int i=0;
int j=0;
printf("Content-type:text/html\n\n");
printf("The following is query result:");
method = getenv("REQUEST_METHOD");
input = get_cgi_data(stdin, method);
printf("string is: %s", input);
return 0;
}

上面包含了c语言处理两种请求的方法,get请求比较简单,直接使用getenv("QUERY_STRING")就可以获取到请求发送的数据,post请求的处理则比较负责,先获取请求内容长度,然后根据长度来动态分配一个等长的字符串空间,将发送的数据传给字符串,然后再根据自己项目的需要进行相应的处理即可。

PS:发送http请求时对应的成功程序printf之后就是http请求接受到的相应,也就是对应的xhr的responseText属性值,另外.c文件需要理由arn-linux-gcc -o helloworld.cgi helloworld.c命名交叉编译得到对应的.cgi文件。然后博主用的是在每一次请求成功之后继续发送下一次请求,因为如果直接使用setInterval函数进行循环请求传感器数据的话会产生比较大的延时,基本等同于进程,如果直接通过文件存储传感器数据的方式则可以使用setInterval函数。

以上所述是小编给大家介绍的Boa服务器下的ajax与cgi通信的全部叙述,希望对大家有所帮助,如果大家想了解更多内容敬请关注我们!

(0)

相关推荐

  • jQuery中ajax的4种常用请求方式介绍

    AJAX 是一种与服务器交换数据的技术,可以在补充在整个页面的情况下更新网页的一部分. jQuery中ajax的4种常用请求方式: 1.$.ajax()返回其创建的 XMLHttpRequest 对象. $.ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数信息.详细参数选项见下. 如果你指定了 dataType 选项,请确保服务器返回正确的 MIME 信息,(如 xml 返回 "text/xml"). 实例: 保存数据到服务器,成功时显示信息. $.aj

  • Ajax 通过城市名获取数据(全国天气预报API)

    预览图(比较简单粗糙) 聚合数据全国天气预报接口:https://www.juhe.cn/docs/api/id/39 接口地址:http://v.juhe.cn/weather/index 支持格式:json/xml 请求方式:get 请求示例:http://v.juhe.cn/weather/index?format=2&cityname=%E8%8B%8F%E5%B7%9E&key=您申请的KEY 调用样例及调试工具:API测试工具 请求参数说明: 名称 类型 必填 说明 cityn

  • jstree创建无限分级树的方法【基于ajax动态创建子节点】

    本文实例讲述了jstree创建无限分级树的方法.分享给大家供大家参考,具体如下: 首先来看一下效果 页面加载之初 节点全部展开后 首先数据库的表结构如下 其中Id为主键,PId为关联到自身的外键 两个字段均为GUID形式 层级关系主要靠这两个字段维护 其次需要有一个类型 public class MenuType { public Guid Id { get; set; } public Guid PId { get; set; } public string MenuName { get; s

  • 在Thinkphp中使用ajax实现无刷新分页的方法

    在Thinkphp目录的Lib\ORG\Util\目录里新建AjaxPage.class.php,写入一下内容: <?php // +---------------------------------------------------------------------- // | ThinkPHP [ WE CAN DO IT JUST THINK IT ] // +---------------------------------------------------------------

  • 通过数据库和ajax方法写出地图的实例代码

    ajax教程 AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的编程语言,而是一种使用现有标准的新方法. AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下. 客户端部分:html.js.css代码部分: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www

  • Ajax与服务器(JSON)通信实例代码

    Ajax与服务器(JSON)通信 Ajax这个词,不代表任何东西,它仅仅是称呼一系列促进客户端与服务器通信的技术时所用的一个术语.服务器通信时Ajax技术的核心内容,其目标就是从客户端向服务器发送信息,并接受后者的回传,以求在此过程中创建出更好地打用户体验来.Ajax之前所有的服务器通信都是在服务器上完成的,所以那是若想重绘页面的一部分,要么使用iframe(已淘汰),要么刷新整个页面.这两种方式都称不上是良好的用户体验. Ajax提供了两类服务器通信手段:同步通信和异步通信. 异步通信Ajax

  • 模拟jQuery ajax服务器端与客户端通信的代码

    功能如下: 如果用户名为空提示"用户名不能为空 " 如果用户名存在提示"用户名[xxxxxx]已经存在,请使用其他用户名, 4 " 如果用户名不存在提示"用户名[xxxxxx]尚未存在,可以使用该用户名注册, 5" 运行效果如下: 目录结构: 服务器端AjaxServer 复制代码 代码如下: package com.ljq.test; import java.io.IOException; import java.io.PrintWriter;

  • Boa服务器下的ajax与cgi通信

    最近在最有做一个嵌入式课程设计,要求是利用基于cortax a8的物联网实验箱做一个简单的嵌入式网页交互系统作为课程设计来验收评分.因为本身自己是学前端的,所以网页部分并不是重点,主要是和boa服务器之间的通信,课程实验给的例子是直接使用printf来打印html标签形成新的页面,有过前端开发经验的人都知道这种做法效率低下而且没有办法实现异步刷新,所以博主采用ajax来进行boa服务器下的异步通信. 主要实现及踩过的坑如下: 1. get 还是 post请求:怎么发请求参见W3School上的a

  • 利用iframe实现ajax跨域通信的实现原理(图解)

    在漫长的前端开发旅途上,无可避免的会接触到ajax,而且一般情况下都是用在同一域下的ajax请求:但是如果请求是发生在不同的域下,请求就无法执行,并且会抛出异常提示不允许跨域请求,目前我没有找到明确的资料说明这是为什么,我觉得应该是出于安全性的考虑吧.纵然如此,要实现跨域访问的话,方法还是有的,而且不只一种,在这里介绍其中一种解决方案:如何利用iframe完成ajax的跨域请求. 如下图所示:域a.com的页面request.html(即http://a.com/request.html)里面嵌

  • .NET2.0环境下的Ajax选型和应用(提供Demo源码下载)

    主题:.NET2.0环境下的Ajax选型和应用 研究需要解决的问题: 1 Ajax 应用框架的选型及其性能对比 2 如何应用 Ajax 3 应用 Ajax 过程中应该着重注意的问题 研究者: Jimmy.Ke 时间: 2006-11-13 一 Demo说明 Ajax Demo Web Site 是一个完整的 .NET Website ,其中包含 5 个 ASPX 页面及其对应的 CS 文件. 为了方便对比, Demo 中使用了三种 Ajax 应用方式: 一是使用微软提供的 Atlas 应用框架,

  • 在Tomcat服务器下使用连接池连接Oracle数据库

    下面介绍在Tomcat服务器下使用连接池来连接数据库的操作 一:修改web.xml文件: 复制代码 代码如下: <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:

  • Jquery在IE7下无法使用 $.ajax解决方法

    通过查看源码发现 复制代码 代码如下: // Create the request object; Microsoft failed to properly // implement the XMLHttpRequest in IE7, so we use the ActiveXObject when it is available // This function can be overriden by calling jQuery.ajaxSetup xhr:function(){ retu

  • 页面向下滚动ajax获取数据的实现方法(兼容手机)

    页面向下滚动ajax获取数据的实现方法(兼容手机) $(window).scroll(function () { var scrollTop = $(this).scrollTop(); var scrollHeight = $(document).height(); var windowHeight = $(this).height(); if (scrollTop + windowHeight >= scrollHeight) { loadPromotions(); } }); var pa

  • jQuery下的Ajax调试步骤

    下面通过图文并茂的方式给大家介绍jQuery下的Ajax调试步骤 在Ajax的使用过程中,最舒服的是一步成功,最头痛的是不成功,但是不知道去哪里看错误,然后看到错误之后又是哪里出的问题,所以今天说一下Ajax的使用调试: 先给大家说下项目需求:工具/原料,jQuery.js,编辑器,Chrome浏览器,wamp搭建环境 具体实现方法和步骤请看下文: 第一步:在同一目录下创建ajax.html和ajax.php 第二步:编写ajax.html,注意修改文件编码为utf-8,代码如下: <!DOCT

  • ajax页面无刷新 IE下遭遇Ajax缓存导致数据不更新的问题

    在做ajax页面无刷新添加的时候,IE下遭遇Ajax缓存,因为刚开始并不知道IE有这个坏毛病,折腾好久,终于解决问题. 总结一下解决办法: 在IE下用Ajax请求某一页面,通常会因为缓存的原因而返回上一次的结果,造成混乱,[即get方式时,获取数据,因发送参数和地址都一致,故IE浏览器会从缓存中取,而不会去请求服务器端,而post方式因为参数的不同,不会产生这个问题]而FF下不会出现这种情况.为了不受缓存影响,可以这样做: IE访问策略: Internet选项--浏览历史记录--设置-- Int

  • QT网络编程UDP下C/S架构广播通信(实例讲解)

    QT有封装好的UDP协议的类,QUdpSocket,里面有我们想要的函数接口.感兴趣的话,可以看看. 先搞服务端吧,写一个子类,继承QDialog类,起名为UdpServer类.头文件要引用我们上边说的QUdpSocket这个类,还有我们想要的布局的类. #ifndef UDPSERVER_H #define UDPSERVER_H #include <QDialog> #include <QLabel> #include <QLineEdit> #include &l

  • linux服务器下配置多tomcat实现实例

    linux服务器下配置多tomcat 车辆交易用的系统模块,正在做.老板要看看,以便车城那边的人提出意见.于是在服务器上再次增加一个tomcat. 以前是配置过的,配置过程其实很简单,这次太大意了,找了半天问题. 首先是拷贝一个tomcat,放到一个新的位置,这个tomcat就是我要用的新的tomcat. 然后去配置一下日志的输出位置,在bin目录下的catalia.sh或者startup.sh.网上怎么样配置的都有,呵呵. 然后修改server.xml,配置好虚拟目录和端口信息.在此,conn

随机推荐