BLACKBING PlayGround 紀錄一些生活或工作的雜事，偶爾會寫一些前端開發的心得

批量AJAX query 系統（友邁科技定址程式）

重寫舊系統

URMAP有一個很實用的系統「地址轉經緯度」，可以parse 台灣的地址，轉成WGS84 經緯度或TWD97座標，並且API化，可以使用AJAX的方式來做查詢，會將地址做正規劃，查詢到最靠近的點。由於是HTTP的方式，因此很容易實做，就算要做批次的查詢，只要會寫程式都可以很快速的做出批量做座標轉換。然而對於某些公司而言，他們不想要為了這個功能而花時間寫程式，希望能夠提供直接做查詢的使用方式，於是早期就有一套轉換系統，用JAVA撰寫之後包成jar檔，直接在windows或linux下command line，指定讀取的file，就會輸出成指定的CSV檔案。由於大家也懶，因此這樣的程式就流傳下來，連自己都覺得這樣的方式很不方便，而且每次都要指定參數，操作方式並不是很友善。後來看到node.js event io的概念才有IO存取的概念，類似像這種批量查詢的需求，一般來說都是以同步的概念下去執行，也就是一個查詢完成之後再做下一個查詢，查詢一百次、一千次就要同步的等待每一個request完成。有沒有辦法讓查詢更快？可以用多執行緒來解決，無奈程式不好寫，除錯不容易，因此一直沒有實做。

Clinet端的檔案輸入與輸出

於是我用node.js來實做這種批次查詢功能，利用Event IO的概念來實做，的確可以很快速的做回應，但通常要批量轉換的地址資料都會很大，若在本機執行還沒什麼大問題，但若做成web系統，就還要讓使用者上傳、解析文件等等，非常麻煩，因此這樣的方式也不理想。最後我把腦筋動到HTML5 FileReader，稍微試了一下，可以讓使用者選擇檔案，並直接透過javascript來讀取檔案內容，parse正確資料之後就可以在client端做AJAX批次的查詢。然而有輸入，就要有輸出，html5 FileWriter API幾乎沒有瀏覽器實做，因此Writer無法使用，不過我找到兩種方式來做文字檔的輸出：

1. 另開新檔：http://stackoverflow.com/questions/6464828/cross-browser-save-as-txt
   這種方式利用瀏覽器開啟檔案的方式來實做，但IE系列不支援，若資料單純且可以排除IE，可以用這種方式來做，非常簡單。
2. Downloadify
   則是用flash來實做另存檔案，使用上也不難。

javascript根本就是天生拿來做這種事情的，不費吹灰之力就完成了批次輸出系統，由於是用非同步的ajax來做查詢，因此同時發出ajax查詢之後等待回傳結果，而查詢的效能也非常的快，完全取決於server端給不給力的傳回資料。用說的實在是不過隱，分享片段的程式來瞧瞧。

試用連結

//讀取檔案
function read() {
    var files = $('#filesInput')[0].files;
    if (!files.length) {
        alert('請輸入');
    }
    var file = files[0];
    var fileName = file.fileName;
    var fileSize = file.fileSize;
    var info = ['檔案名稱：' + file.fileName, '檔案大小：' + (file.fileSize / 1024) + 'k'];
    if (file.lastModifiedDate) {
        info.push('最近修改日期：' + file.lastModifiedDate.toLocaleDateString());
    }
    var infoHTML = info.join('&nbsp;<br>');
    $('#d2-info').html(infoHTML);

    var reader = new FileReader();
    reader.onload = function() {
        $('#d2-content').text(reader.result);
        $('#d2').dialog('open');
    };
    var encoding = $('#encoding option:selected').text();
    reader.readAsText(file, encoding);

}

匯出成CSV

//匯出成CSV
function exportCSV() {
    //    console.log('export');
    var data = [];
    for (var i = 0; i < addressCallback.length; i++) {
        var line = [];
        var addressLine = addressCallback[i];
        line.push(addressLine.address);
        line.push(addressLine.formal_address);
        line.push(addressLine.city);
        line.push(addressLine.area);
        line.push(addressLine.longitude);
        line.push(addressLine.latitude);
        line.push(addressLine.xcoor);
        line.push(addressLine.ycoor);
        line.push(addressLine.level);
        line.push(addressLine.position_result);
        data.push(line.join(','));
    }
    var exportData = data.join('\n');
    //var newDoc = window.open( "data:application/x-download;charset=utf-8,"  , 'address_export.csv', '', '');
    //newDoc.document.write(data);
    Downloadify.create('downloadify', {
        filename: function() {
            var ts = +new Date();
            return 'address_export' + ts + '.csv';
        },
        data: function() {
            return exportData;
        },
        onError: function() {
            alert('You must put something in the File Contents or there will be nothing to save!');
        },
        transparent: false,
        swf: './downloadify/downloadify.swf',
        downloadImage: './CSV.64.png',
        width: 64,
        height: 64,
        transparent: true,
        append: false
    });
    $('#downloadify').show();
}

心得