轉換AJAX取得的XML結構為DOM操作結構

這次的目的是要用AJAX取得的 responseText ，作為節點底下的結構
取得的 responseText 會是 <div>....</div><div>...</div> 這樣的結構
再以DOM方式去操作

通常查詢到的都是用framework的解決方式
例如JQuery - $("...").html( responseText );
Pototype.js也有update() method可以滿足這類需求

不過...沒看到用native JavaScript的過程
想想也是啦...畢竟這樣應該就是要自己去解析字串了
查到較相近的是XML結構的操作
雖然不符合我的需求，但還是值得記錄起來

xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET","rss.xml",false);
xmlhttp.send();
xmlText = xmlhttp.responseText;

if (window.DOMParser){
 parser = new DOMParser();
 xmlDoc = parser.parseFromString(xmlText,"text/xml");
} else{
 xmlDoc = new ActiveXObject("Microsoft.XMLDOM");  //for IE
 xmlDoc.loadXML(xmlText);
}

如果是直接取得XML的話用以下形式即可

xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET","rss.xml",false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;

IE 中checkbox的checked=true不打勾問題解決

這個問題是發現在IE中會沒辦法看到checkbox的選項被打勾
檢查其屬性checked=true無誤

追查下發現原因為在該checkbox尚未被IE初始化(還沒加入DOM樹中)前設定此屬性

解決方法有兩種 -
1.將其加入DOM樹中再設定屬性
2.改為設定其 defaultChecked=true

動態加入CSS 與 IE 的 innerHTML 屬性討論

這幾天有遇到一個情況是動態加入CSS時發現在IE會遇到問題

查過後才發現 IE 會限制部分Element的 innerHTML 屬性值的設定
col, colgroup, frameset, html, style, table, tbody, tfoot, thead, title, tr
上述標籤的innerTML attribute 在 IE 中均為唯讀

以下有兩種處理方式可通用在所有瀏覽器中

1.
....
    var se = document.getElementById("ieStyleApplier");
    se.innerHTML = "";
    se.innerHTML = "_<style>" + o.responseText + "</style>";
...

先設定一個空的div element
再再將CSS內容將入到div的範圍內用(本例中的o.responseText 為Ajax取得CSS內容)
注意stye tag 前加入 '_' 作為前綴字元(prefix character)
這是避免IE解析div element時讀到style tag會停止解析的情形
猜測這是IE的安全性考量
加入前綴字元後就沒問題了，也可以對應到其他的browser

2.

  (function(o){
      var newStyle = document.createElement("link");
      newStyle.rel = "stylesheet";
      newStyle.href = o;
      var head = document.getElementsByTagName('head')[0];
      if(head)
          head.appendChild(newStyle);
      else
          document.body.appendChild(newStyle);
  })(url);

用一次性的函式動態加入link element後引入CSS

非英數名稱圖片顯示處理方案

這幾天在利用之前寫得上傳套件上傳圖片時遇到了問題(感謝專案組員抓到這個bug)
那就是上傳的圖片若以中文、日文等非英文、數字的名稱上傳遇到麻煩
在WebApplication會顯示找不到檔案的錯誤訊息

我先試著將上傳圖片名稱改成URL上的UTF-8編碼
String fileName = java.net.URLEncoder.encode( file.getName(), "UTF-8");
file.renameTo (new File(file.getParent(),   fileName));

雖然檔名的確與URL上經過編碼的檔案名稱相符，不過還是一樣找不到檔案... = =

既然上傳有問題，那剩下的方法就是禁止上傳檔名有編碼問題的檔案囉
最後做法是用正規表示法協助，讀取上傳檔案的檔名加以判斷
有問題的檔案就直接刪除了，並回覆訊息請求上傳有正確檔名的檔案
// 判斷是否含有非英數編碼的字元
String stringEncodeJudge = "^.*[^0-9a-zA-Z~!@#\\$%\\^&\\*\\(\\)_\\+\\{\\}\\|:\\\"<>\\?\\[\\];',\\.\\/].*$";

    if(!filePart.getFileName().matches(stringEncodeJudge)){
         session.setAttribute(name, saveDirectory + "/" + filePart.getFileName());
         tempMessage = fileName + "上傳成功!!<br />";
         Message += tempMessage;
    }else{
         tempMessage = fileName + "請改成英文、數字組成的檔名!!<br />";
         Message += (tempMessage);
         File disposedFile = new File(saveDirectory + "/" + filePart.getFileName());
         disposedFile.delete();
   }

網頁符號對應

部分符號需要在撰寫HTML文件時使用HTML語法才能正常顯示
完整的資料可以在W3C找到，筆記紀錄較常見的符號

                符號                HTML語法
空白                                    &nbsp;
單引號        '                        &#39; (實體名稱是&apos;，但因IE不支援，所以用實體編號替代)
雙引號        "                        &quot;
連號           &                       &amp;
小於           <                       &lt;
大於           >                       &gt;
版權符號    ©                       &copy;
註冊商標    ®                       &reg;
勾選符號    Ö                       <font face=symbol>&Ouml;</font>
加減號        ±                       &plusmn;
乘號           ×                       &times;
除號           ÷                       &devide;
度               °                       &deg;

網頁筆記(2)

CSS樣式表的使用有幾個好處
除了比起寫在頁面的<style>元素中，有維護方便以及重複利用的優點外
PDA、移動設備等等，越來越多的設備也支援CSS樣式表的使用
以下列的CSS為例：
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

<link>標籤裡的media屬性指定樣式表要套用的設備類型
設定成"screen"指定樣式表要套用在電腦螢幕
如果要套用在其他設備(如印表機、電視、投影機等)的話再修改media選項即可

網頁筆記(1)

1. HTML元素裡的每個屬性都必須用雙引號 " 包住

2. <a> 元素裡的 href 屬性作錨點的方法如下：
    目的地加入<a>元素並給予 id
    <h2><a id="point"> test point </a></h2>

    之後連結的時候在網址上添加辨識用的 id 就好了
    <a href="xxx\xxx.html#point"> click me </a>

3.在HTML 4.01的嚴格規範下，行內元素必須放在<h1>、<h2>...等區塊元素內
   例如可以將<img>元素包在<p>內， <p><img src="..." alt="..." /></p>
   <blockquote>是個較特殊的區塊元素，最好將行內元素包在區塊元素內後再整個放入

4.CSS中的margin 屬性能設定元素的邊緣和內容間的間隔

   text-decoration 能讓文字出現樣式，設定成 none 會清除上面的樣式
   underline、overline、line-through 也是能讓 text-decoration 出現效果的設定值

   border-collapse 能處理使用表格時邊框緊貼的情形
   沒用CSS做設定的話，相鄰的表格交界處看起來就像變粗的邊框
   設定成 border-collapse: collapse; 可以讓鄰近的邊框重疊，看起來只有單一邊框的外觀了

XML符號對應

有一些字元，如"<"和"&"在XML資料裡嚴格來說是不合法的。
其他像">"則是合法的，但習慣上最好將這些字元置換成XML的實體對應。
以下列示出XML裡事先定義好的實體對應：

原先字元     實體對映          
<                   &lt;           
>                   &gt;
&                  &amp;
'                    &apos;
"                   &quot;