linux與嵌入系統: ajax

顯示具有 ajax 標籤的文章。顯示所有文章

2012年12月14日星期五

web application開發疑惑

大約四五年沒認真一點開發web application，真的是一日千里，尤其JQuery應該是貢獻良多吧
隨著雲端，web application真的是爆炸性成長，再加上JQuery以及AJAX推波助瀾，可怕的html從簡單的顯示內容，搖身一變，變成可以開發應用程式的平台，瀏覽器當然也遠遠超出本來瀏覽的目的

可以看到JQuery儘量讓HTML跟事件分離，不用在HTML裡面放入一堆類似click事件，使得開發更有彈性，對於資料的取得也透過AJAX，不用每每需要資料就要在asp/php/jsp裡面塞入一堆資料到javascript codes當中，看起來是非常可怕的事情，以前一次融合兩種程式邏輯，用動態產生動態，真的是一場試煉

一個原本不是為了開發應用程式設計的東西，硬要裝上一些功能，就變成一場試煉，雖然JQuery以及AJAX將許多原本不可能變成可能，但是還是有些問題尚未解決，這是我認為web application及不上一般application開發的地方

沒有標準的widget，DOM本身並不是為了當widget開發出來，所以在操作上，必須將一些操作硬是搭配上去，讓屬性、事件顯得非常凌亂，連簡單的setText在很多元件上(我不知道適合用這個詞嗎?)都很欠缺

=========2013/2/18=========
體會到目前的業界好些狀況是JQuery/CSS跟AJAX已經是趨勢。使用JQuery的理由是本身JQuery吸收了許多瀏覽器不同屬性的操作方式，雖然還是因為CSS解釋有點不大一致，不過大體上已經好很多了。AJAX則是為了互動而設置的好處，壞處debug還是相當凌亂，有人靠瀏覽器的debugger，有人自行撰寫debug function。最好玩的是JQuery發展出來的GUI元件大多被捨棄不用，反過來自行發展GUI元件，因為大多認為他人寫的GUI元件不穩定，修改困難，不如自己從頭打造

目前javascript library一大堆，但是大多山頭林立，好似很難讓人相信很穩定

2012年11月18日星期日

KML and google map

下雨天，好憂鬱的天氣，百般無聊下，整理舊的硬碟資料，想不到看到以前的kmz檔案，想說打開軟體看一下，結果一開，掛點 orz，想說那就自己來寫吧
就拿起一本之前借來的google map書籍，想來個依樣畫葫蘆，體驗一下google map的威力，結果一查資料，才發現原來...是已經過期了，才一年多前的資料，竟然google map已經從v2搬移到v3，一堆寫法都改變了，傷腦筋!! P.S.看來這也是GPS logger附贈軟體無法運作的原因，因為api改了，這軟體應該是內嵌一個瀏覽器做map的偽裝
已經超過六七年沒寫過javascript了，好吧，接著就是開始跟ajax, jquery, google map, flot裝熟，花了兩天大致上把一些功能寫出來

要能載入kml (google map搞定)
要能顯示速度跟高度(要parse kml，用flot畫圖)
要能依照速度資料點顯示位置(在google map上加上marker跟監控flot的onplothover事件)

基本上完成的圖案類似下面

經過一番研究，終於可以把圖表直接整合到google map上

接下來只要把kml上傳跟管理的功能整合應該就差不多，如果可以應該再來個動畫效果會更精采
直接來個demo影片吧^.^"野人獻曝了

2012年11月7日星期三

Ajax

簡單的ajax物件

var xmlHttp;
function createXMLHttpRequest(){
  if(window.ActiveXObject){
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }else if (window.XMLHttpReqeust){
    xmlHttp=new XMLHttpRequest();
  }
}

基本的屬性跟方法有
abort()
getAllResponseHeaders()
getResponseHeader("header")
open("method","url", asynch, username, password)
send(content)
setRequestHeader("header","value")

<script type="text/javascript" language="javascript">
  // 修改自 AJAX: Getting Started - MDC
  function makeRequest(url) {
    var http_request = false;

    if (window.XMLHttpRequest) { // Mozilla, Safari,...
      http_request = new XMLHttpRequest();
    } else if (window.ActiveXObject) { // IE
      try {
        http_request = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (e) {
        try {
          http_request = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e) {}
      }
    }

    if (!http_request) {
      alert('Giving up :( Cannot create an XMLHTTP instance');
      return false;
    }
    // 定義事件處理函數為 alterContents()
    http_request.onreadystatechange = function() { 
                                      alertContents(http_request); };
    http_request.open('GET', url, true);
    http_request.send(null);
  }

  function alertContents(http_request) {
    if (http_request.readyState == 4) {
      if (http_request.status == 200) {
        var xmldoc = http_request.responseXML;
        var nodes = xmldoc.getElementsByTagName('area');
        var mesg = "";
        for(var i=0; i<nodes.length; i  ) {
          mesg  = nodes[i].firstChild.nodeValue   "\n";
        }
        //alert(mesg);
        document.getElementById("taichung").innerHTML = mesg;
      } else {
        alert('There was a problem with the request.');
      }
    }
  }
</script>

參考資料:
http://web.nchu.edu.tw/~jlu/classes/xml/ajax/example1.shtml

2012年12月14日 星期五