最近在最有做一個(gè)嵌入式課程設(shè)計(jì)，要求是利用基于cortax a8的物聯(lián)網(wǎng)實(shí)驗(yàn)箱做一個(gè)簡(jiǎn)單的嵌入式網(wǎng)頁(yè)交互系統(tǒng)作為課程設(shè)計(jì)來(lái)驗(yàn)收評(píng)分。因?yàn)楸旧碜约菏菍W(xué)前端的，所以網(wǎng)頁(yè)部分并不是重點(diǎn)，主要是和boa服務(wù)器之間的通信，課程實(shí)驗(yàn)給的例子是直接使用printf來(lái)打印html標(biāo)簽形成新的頁(yè)面，有過(guò)前端開發(fā)經(jīng)驗(yàn)的人都知道這種做法效率低下而且沒(méi)有辦法實(shí)現(xiàn)異步刷新，所以博主采用ajax來(lái)進(jìn)行boa服務(wù)器下的異步通信。

主要實(shí)現(xiàn)及踩過(guò)的坑如下：

1. get 還是 post請(qǐng)求：怎么發(fā)請(qǐng)求參見(jiàn)W3School上的ajax教程

推薦一般人沒(méi)有前端基礎(chǔ)的人使用get請(qǐng)求，因?yàn)橹恍枰谡?qǐng)求的參數(shù)做一個(gè)字符串拼接就可以完成基本的ajax請(qǐng)求,具體實(shí)現(xiàn)可以參照一下這個(gè)網(wǎng)址(http://blog.csdn.net/huguohu2006/article/details/7755107),接下來(lái)重點(diǎn)講一下post請(qǐng)求，優(yōu)勢(shì)這里我就不多講了，前面的教程里面都有，主要講一下實(shí)現(xiàn)方式：

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作為返回值失效的問(wèn)題
// ie可以利用return來(lái)得到值。但firefox則不能，只能在readyState == 4 && status == 200時(shí)處理一個(gè)函數(shù)
// 這個(gè)函數(shù)應(yīng)當(dāng)作為一個(gè)參數(shù)傳遞入函數(shù)。有個(gè)奇怪現(xiàn)象你如果去除紅線部分的注釋，firefox又可以取到值。
// 估計(jì)是firefox使用ajax取值有個(gè)延時(shí)造成。
//return xhr.responseText.toString();
}
};
xhr.open("post", url, true);
// send(string) 僅適用于post請(qǐng)求
xhr.send(data);
} else {
//XMLHttpRequest對(duì)象創(chuàng)建失敗
alert("瀏覽器不支持，請(qǐng)更換瀏覽器！");
}
}

利用調(diào)用sender函數(shù)來(lái)實(shí)現(xiàn)ajax，函數(shù)的兩個(gè)參數(shù)分別是請(qǐng)求的url和要發(fā)送的數(shù)據(jù)，注意post請(qǐng)求只能發(fā)送string類型的數(shù)據(jù)。如果要發(fā)送其他類型的數(shù)據(jù)建議采用jquery封裝的ajax方法，這里之所以采用原生的ajax方法來(lái)發(fā)送數(shù)據(jù)主要有以下幾個(gè)原因：

•jquery庫(kù)的體積比較大，有可能mount進(jìn)開發(fā)箱上的linux系統(tǒng)時(shí)出現(xiàn)失敗的情況，這種情況可以通過(guò)mount u盤的方式解決 mount u盤的命令如下： mount -r /dev/uba4 /web -r為mount進(jìn)文件的讀寫權(quán)限，具體可執(zhí)行搜索查詢，uba4為U盤在linux系統(tǒng)上顯示的名字，web為目標(biāo)文件夾，使用U盤掛載的缺點(diǎn)在于整個(gè)U盤的文件會(huì)全部被復(fù)制到目標(biāo)文件夾中，有點(diǎn)綴余

•發(fā)送的數(shù)據(jù)不很多，也沒(méi)有其他的類型要求，使用string類型完全可以滿足開發(fā)需求，沒(méi)必要引入jquery庫(kù)增加項(xiàng)目空間

•原生的ajax可以更好地解釋http請(qǐng)求的原理

下面再介紹一下cgi文件對(duì)http請(qǐng)求的處理，示例函如下：

#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語(yǔ)言處理兩種請(qǐng)求的方法，get請(qǐng)求比較簡(jiǎn)單，直接使用getenv("QUERY_STRING")就可以獲取到請(qǐng)求發(fā)送的數(shù)據(jù)，post請(qǐng)求的處理則比較負(fù)責(zé)，先獲取請(qǐng)求內(nèi)容長(zhǎng)度，然后根據(jù)長(zhǎng)度來(lái)動(dòng)態(tài)分配一個(gè)等長(zhǎng)的字符串空間，將發(fā)送的數(shù)據(jù)傳給字符串，然后再根據(jù)自己項(xiàng)目的需要進(jìn)行相應(yīng)的處理即可。

PS：發(fā)送http請(qǐng)求時(shí)對(duì)應(yīng)的成功程序printf之后就是http請(qǐng)求接受到的相應(yīng)，也就是對(duì)應(yīng)的xhr的responseText屬性值，另外.c文件需要理由arn-linux-gcc -o helloworld.cgi helloworld.c命名交叉編譯得到對(duì)應(yīng)的.cgi文件。然后博主用的是在每一次請(qǐng)求成功之后繼續(xù)發(fā)送下一次請(qǐng)求，因?yàn)槿绻苯邮褂胹etInterval函數(shù)進(jìn)行循環(huán)請(qǐng)求傳感器數(shù)據(jù)的話會(huì)產(chǎn)生比較大的延時(shí)，基本等同于進(jìn)程，如果直接通過(guò)文件存儲(chǔ)傳感器數(shù)據(jù)的方式則可以使用setInterval函數(shù)。

以上所述是小編給大家介紹的Boa服務(wù)器下的ajax與cgi通信的全部敘述，希望對(duì)大家有所幫助，如果大家想了解更多內(nèi)容敬請(qǐng)關(guān)注腳本之家！

最新評(píng)論