2011年5月26日 星期四

jQuery_簡易非同步聊天室(jQuery+JSON+WService) Part2

上星期抽空整理jQuery的程式碼,亂做了一個超級簡陋聊天室,經過簡單的試用以後,果然是又爛又難用。所以這週還是利用改案子改到頭昏的時候修改了一下,順便用這一個頁面測試了一些CSS設定。

修改的部份包括:
1. 除了滑鼠送出訊息,增加可按Enter送出訊息。
2. 訊息太多時,卷軸會自動捲動,但使用者往前觀看內容時,關閉自動捲動。
3. 使用者列表改為即時取得,可確認誰在線上。
4. 可以看到自己丟出去的訊息了。
5. 自己的訊息與對方的訊息以不同顏色表示。

整個程式分成四個部份:
1. HTML配置
2. jQuery操作
3. WebService
4. Database

橫向來看主要也分為四個部份:
1. 帳號登入部分:單純以一個WebService確認使用者帳號密碼是否正確。
2. 傳送訊息部份:以滑鼠點擊或Enter觸發後,將訊息存入資料庫(Say_List)當中。
3. 接收訊息部份:以Timer定時呼叫WebService去查看資料庫是否有新增加的訊息,若是有利用JSON傳回來;取得後,動態增加到SayingList的表格中。
4. 使用者列表同部部分:以Timer定時呼叫WebService,紀錄登入者的呼叫時間,並將時間在15秒緩衝時間內的名單撈回來;取得後,動態增加到UserList的表格中,並增加一選取按鈕。

最後來看一下成果:

MapGuide_角度量測(方位角與方向角)

一般在系統中我們都會提供距離量測的功能,但這次專案中有委員提出應該要有方向角與方位角的量測功能。

想法很簡單,利用MapGuide繪圖的API─DigitizeLine來取得單線的兩點坐標,再手動加上一條往北方的垂線,接著計算方向角及方位角。

程式流程如下:
1. 利用DigitizeLine啟動MapGuide進行單線繪圖。
2. 取得單線兩點坐標後,計算垂線位置,並將坐標轉為WKT字串。
3. 將上步驟之WKT字串繪製臨時層於MapGuide Viewer之上。
4. 計算方向角與方位角,並顯示於頁面上。

怎麼繪圖可以參考量測那篇,以下貼出方向角與方位角的計算程式:

重點只有一句,由兩點坐標計算角度

double degree = (Math.Atan2(Y1 - Y2, X1 - X2)) / Math.PI * 180.0;


double degree = (Math.Atan2(Y1 - Y2, X1 - X2)) / Math.PI * 180.0;
string Direction = "";

if (degree >= 0 && degree <= 90)
{
degree = 90 - degree;
Direction = "N" + degree + "E";
}
else if (degree < 0 && degree >= -90)
{
degree = 90 + Math.Abs(degree);
Direction = "S" + (180 - degree) + "E";
}
else if (degree < -90 && degree >= -180)
{
degree = 90 - degree;
Direction = "S" + (degree - 180) + "W";
}
else if (degree > 90 && degree <= 180)
{
degree = 450 - degree;
Direction = "N" + (360 - degree) + "W";
}

degree為方位角
Direction為方向角

成果圖:

2011年5月16日 星期一

jQuery_簡易非同步聊天室(jQuery+JSON+WService)

有了JQuery_呼叫後端服務(WebService)jQuery_接後端服務(WebService)之結果(JSON)這兩篇以後,就可以做一個很無聊的東西....

做了幾個非同步的動作:
1. 帳號密碼驗證。
2. 驗證通過後取得使用者列表。
3. 按下傳送後,將聊天內容傳送出去。
4. 取得傳送給自己的聊天內容。

頁面沒有閃,好感動喔~~~~ T.T

jQuery_接後端服務(WebService)之結果(JSON)

在剛開始接觸jQuery的時候,測試了一下怎麼呼叫WebService,之後也沒有做什麼偉大的應用,也就單單利用按鈕事件讓WebService在伺服器端執行罷了。

最近,想要把半年來jQuery的相關程式碼整理一下,才又翻開那個塵封已久的專案檔,這時候才發現當時僅接了一個字串回來就停住了。但是,接一個字串似乎處理不了比較複雜的問題;所以,希望可以從單單一個字串,可以進到一個類似表格的方式(想成DataTable、DataView)。

需求:呼叫WebService,返回一個多筆的資料庫查詢結果,並秀在頁面上。

其實,要做到這個功能,原本一個字串也可以,也就是定義好自己的格式,比如說:

可以表示為:1,Ola,18,12/20;2,fuchia,18,09/11這樣一個字串,接到以後再進行拆解的動作,就可以達到一樣的效果。

但是這樣就變成自己要在WebService寫組字串的函式,又要在JavaScript寫拆字串的函式,而且也要自行去對應各欄位為第幾個;當然,jQuery之所以這麼多愛好者,他當然早就幫我們想好了,傳遞的方式可以利用網路上也很火紅的JSON格式。

JSON格式長什麼樣子,如果以上面那張表來說,JSON可以長成:
[{'ID':1,'Name':'Ola','Age':18,'Birthday':'12/20'},{'ID':2,'Name':'fuchia','Age':18,'Birthday':'09/11'}]
有幾個重點:
1. 字串要用''包住,數字不需要。
2. 每一組資料用大括號{}包住。
3. 每一組資料用逗號(,)分開。
4. 資料組用中括號[]包住。

所以不管是用什麼樣的方式呼叫,我們最後返回一個JSON格式的字串就對了。

-------------------------------------------------------

如果在網路上搜尋jQuery+JSON會找到很多使用getJSON()來實做的範例,但是因為我們已經藉由WebService取得了JSON字串,而我也找不出WebService跟getJSON()要怎麼結合在一起,所以最後是使用parseJSON()函式來進行轉換。

整個流程可以看成:


怎麼呼叫WebService之前已經寫過了,重點就放在parseJSON()上。

去查parseJSON()的官方文件講了一個重點:
Passing in a malformed JSON string may result in an exception being thrown. For example, the following are all malformed JSON strings:
{test: 1} (test does not have double quotes around it).
{'test': 1} ('test' is using single quotes instead of double quotes).
就是我們不可以丟不正確的字串給他轉,那怎樣叫做正確?就是要用雙引號,也就是{"test": 1}。

所以在WebService丟出JSON字串時,必須要用跳脫字元(\)處理後,才可以傳出。

---------------------------------------------------------

有了正確的JSON後,我們就可以在success內做處理:

$.ajax({
type: "POST",
dataType: "json",
url: "../WebService/TalkRoom.asmx/GetSayString",
contentType: "application/json; charset=utf-8",
data: "{ToName:'" + UserName + "'}",
success: function (data) {
var obj = jQuery.parseJSON(data.d);
$.each(obj, function (key, val) {
var Say = "[" + val.SayTime + "] " + val.FromName + " : " + val.SayString;
alert(Say );
});

},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status);
alert(thrownError);
}
});

說明:
1. 首先WebService成功呼叫後執行success內的function,返回一個data
2. 利用parseJSON將返回的字串(data.d)轉為JSON物件。
3. 利用$.each來遍尋整個obj物件
4. 利用val.欄位名稱來取值。

**************************************************************
最後,就可以利用這個技巧,做一個很無聊的東西......請見下篇。

2011年5月9日 星期一

母親節大餐!


鳳梨蝦球、京都排骨、鹹蛋苦瓜、北京烤鴨、中杯小卷、蠔油杏包菇、椒鹽蝦、焗烤白菜、蘿蔔糕、鮮蝦腐皮卷、蝦餅、蝦仁腸粉、燒賣1號、燒賣2號、燒賣3號及忘記名字的三個點心,還有冰箱的紅葉蛋糕。

飽........