【Javascript】XMLHttpRequest 解決 Cross Domain 檔案下載

需求為 Frontend.js 與 實際檔案放置在不同主機上，
所以需要解決 Cross Domain 資料存取的限制。

解決辦法為採用 XMLHttpRequest 物件來突破跨區存取限制。
直接看 Code

downloadFile = function( _fileUrl ) {
    var xhr = new XMLHttpRequest();

    if ("withCredentials" in xhr) {
        xhr.open('GET', _fileUrl, true);
    }    
    else if (typeof XDomainRequest != "undefined") {
        xhr = new XDomainRequest();
        xhr.open('GET', _fileUrl );
    }
        
    xhr.responseType = "blob";
    xhr.onreadystatechange = function () { 
        if (xhr.readyState == 4) {
            var a = document.createElement('a');
            a.href = window.URL.createObjectURL(xhr.response);
            a.download = fileName;
            a.click();
        }
    };

    xhr.send();
}

downloadFile 這個函式接收一個參數 _fileUrl 指出檔案路徑
var xhr = new XMLHttpRequest() 建立一個 xhr 物件
withCredentials這個屬性預設為false，
因為 XMLHTTPRequest2 物件才允許CORS(Cross-Origin Resource Sharing)，
所以檢查是否有支援withCredentials屬性，
該屬性指示是否使用如cookie或授權標頭檔等憑證進行跨站存取控制(cross-site Access-Control)請求。

而IE 8與IE 9只能使用 XDomainRequest 物件處理 CORS 請求(IE8,9不支援XHR2)
responseType 屬性指定回應狀態，
可以為 blob, json, text 等等，
為了方便後續創造連結，所以指定回應狀態為"blob"
onreadystatechange 這個函式會在 readyState 屬性改變時被呼叫
而 readyState 屬性值為 4 時，表示作業完成。
此時便可以創造一個元素 a，並且呼叫 createObjectURL 方法賦予 href 屬性值，
a.download可以為下載檔案命名，最後呼叫 click 方法完成檔案下載。

還有一件事情須處理，存放檔案的主機要設定允許跨領域存取的權限
後端採用 Node.js 與 Express framework 進行開發

app.configure(function(){ 
  app.use(function(req, res, next) {
      res.header('Access-Control-Allow-Origin', "*");
      res.header('Access-Control-Allow-Credentials', true);
      res.header('Access-Control-Allow-Methods', "GET");
      next();
  });
});

簡單講要幫 response 設定允許跨領域存取的 Header，
'Access-Control-Allow-Origin' 設定允許的請求來源
'Access-Control-Allow-Methods'設定允許的方法，如 GET, POST 等
如果前端 xhr.setRequestHeader 有自行定義 Header 的話
那 Server 這邊也要多加 'Access-Control-Allow-Headers' 權限

res.header('Access-Control-Allow-Headers', 'X-Requested-With');

就允許帶有 header 為 'X-Requested-With' 的請求。
但要注意的是，因為安全性的關係，XDomainRequest不支援客製化 Header
也限制 Method only GET or POST，Protocol only HTTP or HTTPS
還好IE 10開始支援 XMLHTTPRequest2

【jQuery】hide() 與 fadeOut()

jQuery 的兩個動畫函式 hide() 與 fadeOut() 都具有隱藏效果。

需求是當游標滑入指定區域時，浮現該按鈕，點擊按鈕後可使按鈕180度旋轉。

實現旋轉方式是設定 CSS 的 transform 值， rotate( '旋轉度數' deg )。

若使用 hide() 與 show() 來實作隱藏與浮現效果，
元素隱藏之前的旋轉度數會被保留。

但使用 fadeOut() 與 fadeIn() 來實作的話，
旋轉度數的 CSS 效果會消失。

探究其原因，在於 fadeOut 與 fadeIn 會重寫 DOM element 的 style，
導致原本 style 內的 transform 值消失，因此無法保留旋轉度數。

順便紀錄一下觀察到的 hide() 與 fadeOut() 差異，
相同之處：

1. display值，設為none
2. opacity值，變更為0

相異之處：

1. hide() 會將 width 與 height 的值也變更為0，fadeOut() 不改變
2. hide() 會保留 style 內的 transform 值

【Node.js】Create Http Server

自己以前寫網站習慣，前端使用JavaScript(or jQuery)，後端使用PHP，使用Apache建立Server。

而Node.js則打破此框架，簡單講就是，伺服器端的JavaScript！ 

為了實現此概念，Node.js借助Google V8引擎在後端運行JavaScript。

想從建立一個基礎Http Server入門，範例code包含三個觀念，使用模組、函數傳遞以及回呼(callback)。

var http = require("http");

function onRequest(request, response) {
  console.log("Request received.");
  response.writeHead(200, {"Content-Type": "text/plain"});
  response.write("Hello World");
  response.end();
}

http.createServer(onRequest).listen(8888);

console.log("Server has started.");

第一行code很簡單，呼叫Node.js內建http模組並存入http變數。

接下來寫一個onRequest函數處理http的請求，這邊我們可以看到http使用createServer方法時，onRequest這個函數被當成是參數來傳遞，此即所謂的函數傳遞。

而Server監聽8888 port同時等待HTTP的請求，當有請求發生時，執行onRequest函式，此即所謂callback。
callback：給甲方法傳遞乙函式，等到對應事件發生時，才執行乙函式。
以上述code來看的話→
甲方法 ─ createServer
乙函式 ─ onRequest
對應事件 ─ HTTP的請求
補充一下，乙函式也很常使用匿名函式。

最後一行code會在命令行上輸出"Server has started."，幫助我們測試程式流程與了解事件的觸發順序，此程式流程為非同步流程，因為http.createServer後，程式會繼續執行，等到有http請求才去執行onRequest函式。

當我們執行腳本後

當我們在瀏覽器輸入localhost:8888後

最後回到命令行會看到

當我們使用瀏覽器讀取網頁時，我們的伺服器有可能會輸出兩次"Request received."。原因為何？我們可以修改code增加解析路徑的功能。

修改code如下

var http = require("http"),
    url = require("url");

function start() {
    function onRequest(request, response) {
        var pathname = url.parse(request.url).pathname;
        console.log("Request for " + pathname + " received.");
        response.writeHead(200, {"Content-Type": "text/plain"});
        response.write("Hello Node.js");
        response.end();
    }
    
    http.createServer(onRequest).listen(8888);
    console.log("Server has started.");
}

exports.start = start;

使用Node.js內建url模組，並呼叫其parse方法幫我們解析request.url，
即分析HTTP的請求路徑為何。

腳本編譯完成後，我們一樣開啟browser輸入localhost:8888
然後回到命令列的地方觀看log訊息

觀看log訊息可以知道請求路徑。由此得知，當我們在存取http://localhost:8888的當下， 伺服器也嘗試存取 http://localhost:8888/favicon.ico 。 因此我們上一段code，log訊息才會出現兩次"Request received."。

【jQuery】將桌面檔案拖曳後上傳

想要將桌面的檔案使用拖曳的方式
拉到指定的區域
就可以啟動檔案上傳的功能

作法為

1. 改寫dragover與dragenter兩個事件，取消這兩個事件的預設效果(主要為over事件，先取消over事件的效果，否則會無法觸發drop事件)
2. 將檔案上傳功能寫進drop事件即可完成此項功能

先來看第一步的code

        
        $("div.content").on(
          'dragover',
          function(event) {
            event.preventDefault();
            event.stopPropagation();
          }
        );
        
        $("div.content").on(
          'dragenter',
          function(event) {
            event.preventDefault();
            event.stopPropagation();
          }
        );

接下來改寫drop事件

        
        $("div.content").on(
            'drop',
            function(event){
                if(event.originalEvent.dataTransfer){
                    if(event.originalEvent.dataTransfer.files.length) {
                        event.preventDefault();
                        event.stopPropagation();
                        /* Write Upload Function Here */
                        fileUpload();
                    }   
                }
            }
        );