最近在最有做一個嵌入式課程設計,要求是利用基于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請求的原理
新聞熱點
疑難解答
圖片精選