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無法使用，不過我找到兩種方式來做文字檔的輸出：

萬事具備，只欠Coding。那就來實做吧。

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

試用連結

友邁科技多筆定址輸出系統，歡迎企業有大量需求申請使用。

讀取檔案

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//讀取檔案
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(' <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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
//匯出成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();
}

心得

值得一提的是，利用 jQuery.getScript 的方式比 jQuery.ajax 的方式要快，我想是用 getScript 的方式來直接執行 javascript 更快速。同樣的概念我想可以應用在所有需要批量輸入輸出的系統上，只要打開 browser，不需要安裝任何東西，也不需要上傳檔案到 server 端處理，完全透過 client 端解決所有的事情，javascript 的應用真是越來越廣泛了，有需要使用這個好用的系統請洽 友邁科技客服，會有親切的小姐跟您聯絡XD。