OSI模型是一種制定網路標準都會參考的概念性架構，依據網路運作方式，OSI模型共切分成7個不同的層級，每級按照網路傳輸的模式，定義所屬的規範及標準。
所謂的OSI，是由國際化標準組織（ISO）針對開放式網路架構所制定的電腦互連標準，全名是開放式通訊系統互連參考模型（Open System Interconnection Reference Model），簡稱OSI模型。該模型是一種制定網路標準都會參考的概念性架構，並非一套標準規範，也不是用來提供實現的方法，而是透過觀念描述，協調各種網路功能發展時的標準制定。
依據網路運作方式，OSI模型共切分成7個不同的層級，每級按照網路傳輸的模式，定義所屬的規範及標準。由具體到抽象的網路傳輸方式層次來看，7層分別為實體層、資料連結層、網路層、傳輸層、會議層、展示層及應用層。
OSI模型的好處在於，它細分每個功能，在發展網路功能及教育訓練上有很大的幫助。產品開發時，只要依據各個層級規範，專注發展即可；在教學時，透過OSI模型解釋網路運作的架構，也較容易讓初學者了解。但是某些層級的功能仍不易掌握，像是會議層及展示層。相較於網路層或應用層，它們規範的標準若有似無，實際上的應用也不多見。
第一層︰實體層（Physical Layer）
實體層是OSI模型的最底層，它用來定義網路裝置之間的位元資料傳輸，也就是在電線或其他物理線材上，傳遞0與1電子訊號，形成網路。實體層規範的內容包含了纜線的規格、傳輸速度，以及資料傳輸的電壓值，用來確保訊號可以在多種物理媒介上傳輸。
網路線、網路卡與集線器（Hub），都是平常容易接觸到的實體層設備。網路線包括辦公室及機房內常見的RJ-45 UTP雙絞線、有線電視使用的同軸電纜，以及應用在骨幹網路的光纖纜線等。不過，對無線網路而言，只要可以傳輸電波的介質，都屬於它的傳輸媒介。
集線器指的是單純串接線路，再以廣播方式傳輸資料的設備。市面上所見的複合式集線器設備，例如Switching Hub（交換式集線器），是廠商依照市場需求所開發的產品，通常包含些許資料連結層的功能，就OSI的規範來說，它並不完全是一個集線器。
第二層︰資料連結層（Data Link Layer）
資料連結層介於實體層與網路層之間，主要是在網路之間建立邏輯連結，並且在傳輸過程中處理流量控制及錯誤偵測，讓資料傳送與接收更穩定。資料連結層將實體層的數位訊號封裝成一組符合邏輯傳輸資料，這組訊號稱為資料訊框（Data Frame）。訊框內包含媒體存取控制（Media Access Control，MAC）位址。而資料在傳輸時，這項位址資訊可讓對方主機辨識資料來源。MAC位址是一組序號，每個網路設備的MAC位址都是獨一無二的，可以讓網路設備在區域網路溝通時彼此識別，例如網路卡就是明顯的例子。
不少網路協定是在資料連結層上運作，我們較常聽到的是非同步傳輸模式（Asynchronous Transfer Mode，ATM），以及點對點協定（Point-to-Point Protocol，PPP）。前者是早期網路發展的通訊協定，由於單次傳輸量很小，適合用作語音傳輸；後者則是在我們使用ADSL時，會透過這項協定連接ISP，從而連上網際網路。
網路交換器（Switch）是這個層級常見的設備，主要在區域網路上運作，能依據MAC位址，將網路資料傳送到目的主機上。交換器一般分為可設定式與免設定兩種，前者可以設定流量控制或設定子網路分割，後者僅傳輸網路資料，不具其他進階功能。
第三層︰網路層（Network Layer）
網路層定義網路路由及定址功能，讓資料能夠在網路間傳遞。這一層中最主要的通訊協定是網際網路協定（Internet Protocol，IP），資料在傳輸時，該協定將IP位址加入傳輸資料內，並把資料組成封包（Packet）。在網路上傳輸時，封包裡面的IP位址會告訴網路設備這筆資料的來源及目的地。由於網路層主要以IP運作為主，故又稱為「IP層」。除了IP，在網路層上運作的協定還包含IPX及X.25。
路由器及Layer 3交換器即屬於第三層的網路設備，主要以IP作為資料傳輸依據，它們大多在企業機房內運作，不過我們也常看到有些設備也同時包含網路層功能，如IP分享器，以及俗稱小烏龜的ADSL用戶終端設備（ADSL Terminal Unit-Remote，ATU-R）。
第四層︰傳輸層（Transport Layer）
傳輸層主要負責電腦整體的資料傳輸及控制，是OSI模型中的關鍵角色，它可以將一個較大的資料切割成多個適合傳輸的資料，替模型頂端的第五、六、七等三個通訊層提供流量管制及錯誤控制。
傳輸控制協定（Transmission Control Protocol，TCP）是我們常接觸具有傳輸層功能的協定，它在傳輸資料內加入驗證碼，當對方收到後，就會依這個驗證碼，回傳對應的確認訊息（ACK），若對方未及時傳回確認訊息，資料就會重新傳遞一次，以確保資料傳輸的完整性。
第五層︰會議層（Session Layer）
這個層級負責建立網路連線，等到資料傳輸結束時，再將連線中斷，運作過程有點像召集多人開會（建立連線），然後彼此之間意見交換（資料傳輸），完成後，宣布散會（中斷連線）。
有很多應用服務運作在會議層上，我們常接觸到的是NetBIOS names，這是一種用來識別電腦使用NetBIOS資源的依據。我們使用Windows系統時，開啟網路上的芳鄰，或是用到「檔案及列印分享」時，通常會看到群組及電腦名稱，這些就是NetBIOS names定義的。
第六層︰展示層（Presentation Layer）
應用層收到的資料後，透過展示層可轉換表達方式，例如將ASCII編碼轉成應用層可以使用的資料，或是處理圖片及其他多媒體檔案，如JPGE圖片檔或MIDI音效檔。
除了轉檔，有時候當資料透過網路傳輸時，需要將內容予以加密或解密，而這個工作就是在展示層中處理。
第七層︰應用層（Application Layer）
應用層主要功能是處理應用程式，進而提供使用者網路應用服務。這一層的協定也很多。使用者常見的通訊協定，有DHCP（Dynamic Host Configuration Protocol）、FTP（File Transfer Protocol）、HTTP（HyperText Transfer Protocol）及POP3（Post Office Protocol-Version 3）等，依據不同的網路服務方式，這些協定能定義各自的功能及使用規範等細部規則。
屬於第七層的應用軟體，像是網路瀏覽器（IE、Firefox）、電子郵件、線上遊戲、即時通訊（MSN Messenger、ICQ）等。上述軟體均透過單一或多種通訊協定，提供各類網路應用服務，像是網路瀏覽器藉由HTTP的溝通，即可呈現圖文並茂的網頁。
2015年10月18日 星期日
2015年10月14日 星期三
Google Chart APIs: Google (Pie / Doughnut) Chart example with database in ASP.Net
In this article I will explain how to use Google Chart APIs with database in ASP.Net using C#, VB.Net and jQuery.
In this example I will populate Pie chart, 3D Pie chart and Doughnut chart from database using jQuery AJAX and WebMethods in ASP.Net.
Database
For this article I am making use of the Microsoft’s Northwind Database. Download and install instructions are provided in the link below
Namespaces
You will need to import the following namespaces.
C#
using System.Data;
using System.Web.Services;
using System.Configuration;
using System.Data.SqlClient;
VB.Net
Imports System.Data
Imports System.Web.Services
Imports System.Configuration
Imports System.Data.SqlClient
WebMethod
The following WebMethod will be used for populating the Pie chart, 3D Pie chart and Doughnut chart from database.
The SQL Query gets the City-wise Order distribution for the country United States. The results are populated into a two dimensional object array using DataReader, which is finally sent to client as a Generic List of objects.
C#
[WebMethod]
public static List<object> GetChartData()
{
string query = "SELECT ShipCity, COUNT(orderid) TotalOrders";
query += " FROM Orders WHERE ShipCountry = 'USA' GROUP BY ShipCity";
string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
List<object> chartData = new List<object>();
chartData.Add(new object[]
{
"ShipCity", "TotalOrders"
});
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand(query))
{
cmd.CommandType = CommandType.Text;
cmd.Connection = con;
con.Open();
using (SqlDataReader sdr = cmd.ExecuteReader())
{
while (sdr.Read())
{
chartData.Add(new object[]
{
sdr["ShipCity"], sdr["TotalOrders"]
});
}
}
con.Close();
return chartData;
}
}
}
VB.Net
<WebMethod()> _
Public Shared Function GetChartData() As List(Of Object)
Dim query As String = "SELECT ShipCity, COUNT(orderid) TotalOrders"
query += " FROM Orders WHERE ShipCountry = 'USA' GROUP BY ShipCity"
Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Dim chartData As New List(Of Object)()
chartData.Add(New Object() {"ShipCity", "TotalOrders"})
Using con As New SqlConnection(constr)
Using cmd As New SqlCommand(query)
cmd.CommandType = CommandType.Text
cmd.Connection = con
con.Open()
Using sdr As SqlDataReader = cmd.ExecuteReader()
While sdr.Read()
chartData.Add(New Object() {sdr("ShipCity"), sdr("TotalOrders")})
End While
End Using
con.Close()
Return chartData
End Using
End Using
End Function
Populate Google Charts from database in ASP.Net using jQuery AJAX
The concept is simple i.e. to get the chart data from the database with the use of WebMethod (described earlier) and jQuery AJAX and then use the data for chart population.
Pie Chart
The very first thing is to load the Google Chart API packages and when once all the packages are loaded then the drawChart method is invoked.
Inside this method a jQuery AJAX call to the WebMethod is initiated which gets the records from the database as an array of objects.
The array of objects are converted to a Google Visualization DataTable and used for drawing the chart on to the specified HTML DIV element.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var options = {
title: 'USA City Distribution'
};
$.ajax({
type: "POST",
url: "Default.aspx/GetChartData",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
var data = google.visualization.arrayToDataTable(r.d);
var chart = new google.visualization.PieChart($("#chart")[0]);
chart.draw(data, options);
},
failure: function (r) {
alert(r.d);
},
error: function (r) {
alert(r.d);
}
});
}
</script>
<div id="chart" style="width: 900px; height: 500px;">
</div>
3D Pie Chart
The 3D Pie chart is actually a Pie chart with a 3-dimensional look and feel. The population part is very similar to the Pie chart and we just need to set an additional property is3D to true.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var options = {
title: 'USA City Distribution',
is3D: true
};
$.ajax({
type: "POST",
url: "Default.aspx/GetChartData",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
var data = google.visualization.arrayToDataTable(r.d);
var chart = new google.visualization.PieChart($("#chart")[0]);
chart.draw(data, options);
},
failure: function (r) {
alert(r.d);
},
error: function (r) {
alert(r.d);
}
});
}
</script>
<div id="chart" style="width: 900px; height: 500px;">
</div>
Doughnut Chart
The final chart is a Doughnut chart which again is similar to a Pie chart but has a hole at the center resembling a Doughnut. The population part is very similar to the Pie chart and we just need to set an additional property pieHole to the size of the hole we need.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var options = {
title: 'USA City Distribution',
pieHole: 0.5
};
$.ajax({
type: "POST",
url: "Default.aspx/GetChartData",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
var data = google.visualization.arrayToDataTable(r.d);
var chart = new google.visualization.PieChart($("#chart")[0]);
chart.draw(data, options);
},
failure: function (r) {
alert(r.d);
},
error: function (r) {
alert(r.d);
}
});
}
</script>
<div id="chart" style="width: 900px; height: 500px;">
</div>
Demo
Downloads
2015年10月11日 星期日
Implement jQuery AutoComplete TextBox from database using AJAX PageMethods in ASP.Net
In this article I will explain how to implement and populate jQuery AutoComplete TextBox from database using AJAX PageMethods in ASP.Net using C# and VB.Net.
Database
Here I am making use of Microsoft’s Northwind Database. The download and install instructions are provided in the following article.
HTML Markup
The following HTML Markup of Page consists of an ASP.Net TextBox, a HiddenField and a Button.
The jQuery AutoComplete plugin has been applied to the TextBox. A jQuery AJAX call is made to the GetCustomers PageMethod and the list of customers returned from the PageMethod acts as source of data to the jQuery AutoComplete.
The data received from the server is processed in the jQuery AJAX call success event handler. A loop is executed for each received item in the list of items and then an object with text part in the label property and value part in the val property is returned.
A Select event handler has been defined for the jQuery AutoComplete and when an item is selected from the AutoComplete List, the value of the item is stored in the HiddenField.
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.0.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/jquery-ui.min.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/themes/blitzer/jquery-ui.css"
rel="Stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$("[id$=txtSearch]").autocomplete({
source: function (request, response) {
$.ajax({
url: '<%=ResolveUrl("~/Default.aspx/GetCustomers") %>',
data: "{ 'prefix': '" + request.term + "'}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {
response($.map(data.d, function (item) {
return {
label: item.split('-')[0],
val: item.split('-')[1]
}
}))
},
error: function (response) {
alert(response.responseText);
},
failure: function (response) {
alert(response.responseText);
}
});
},
select: function (e, i) {
$("[id$=hfCustomerId]").val(i.item.val);
},
minLength: 1
});
});
</script>
Enter search term:
<asp:TextBox ID="txtSearch" runat="server" />
<asp:HiddenField ID="hfCustomerId" runat="server" />
<asp:Button ID="Button1" Text="Submit" runat="server" OnClick="Submit" />
Namespaces
You will need to import the following namespaces.
C#
using System.Web.Services;
using System.Configuration;
using System.Data.SqlClient;
VB.Net
Imports System.Web.Services
Imports System.Configuration
Imports System.Data.SqlClient
The ASP.Net PageMethod
The following AJAX PageMethod accepts a parameter prefix and its value is used to find matching records from the Customers Table of the Northwind database.
The select query gets the Name and the ID of the customer that matches the prefix text.
The fetched records are processed and a Key Value Pair is created by appending the Id to the Name field in the following format {0}-{1} where is the Name {0} and {1} is the ID of the Customer.
C#
[WebMethod]
public static string[] GetCustomers(string prefix)
{
List<string> customers = new List<string>();
using (SqlConnection conn = new SqlConnection())
{
conn.ConnectionString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlCommand cmd = new SqlCommand())
{
cmd.CommandText = "select ContactName, CustomerId from Customers where ContactName like @SearchText + '%'";
cmd.Parameters.AddWithValue("@SearchText", prefix);
cmd.Connection = conn;
conn.Open();
using (SqlDataReader sdr = cmd.ExecuteReader())
{
while (sdr.Read())
{
customers.Add(string.Format("{0}-{1}", sdr["ContactName"], sdr["CustomerId"]));
}
}
conn.Close();
}
}
return customers.ToArray();
}
VB.Net
<WebMethod()>
Public Shared Function GetCustomers(prefix As String) As String()
Dim customers As New List(Of String)()
Using conn As New SqlConnection()
conn.ConnectionString = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Using cmd As New SqlCommand()
cmd.CommandText = "select ContactName, CustomerId from Customers where ContactName like @SearchText + '%'"
cmd.Parameters.AddWithValue("@SearchText", prefix)
cmd.Connection = conn
conn.Open()
Using sdr As SqlDataReader = cmd.ExecuteReader()
While sdr.Read()
customers.Add(String.Format("{0}-{1}", sdr("ContactName"), sdr("CustomerId")))
End While
End Using
conn.Close()
End Using
End Using
Return customers.ToArray()
End Function
Fetching the selected item on Server Side
The Key (Customer Name) and Value (Customer ID) can be fetched on server side inside the click event handler of the Button from the Request.Form collection as shown below.
C#
protected void Submit(object sender, EventArgs e)
{
string customerName = Request.Form[txtSearch.UniqueID];
string customerId = Request.Form[hfCustomerId.UniqueID];
ClientScript.RegisterStartupScript(this.GetType(), "alert", "alert('Name: " + customerName + "\\nID: " + customerId + "');", true);
}
VB.Net
Protected Sub Submit(sender As Object, e As EventArgs)
Dim customerName As String = Request.Form(txtSearch.UniqueID)
Dim customerId As String = Request.Form(hfCustomerId.UniqueID)
ClientScript.RegisterStartupScript(Me.GetType(), "alert", "alert('Name: " & customerName & "\nID: " & customerId & "');", True)
End Sub
Screenshot
Demo
Downloads
訂閱：
文章 (Atom)