打開自己的博客仔細瀏覽了一番，發現已經好久沒有寫博客了，由於最近一直比較忙碌懈怠了好多。默默反省三分鍾.......言歸正傳，現在就對最近在學習webservice的過程中遇到的幾種類型的問題中我的理解和解決方案。對於webservice大家肯定知道，它是一種使不同站點之間可以相互通信的技術，可以理解為一種接口。一個站點可以通過其它站點提供的webservice接口獲得其它站點提供的相應服務。webservice使用起來非常小巧，輕便被很多站點所使用。對於webservice我不做過多說明，webservice的安全問題，如何使webservice更加安全，自己可以查找相關資料自行學習。此次主要講解使用JQuery請求webservice服務，並且如何處理返回的不同格式的數據。
1.Ajax請求webservice返回DataSet格式數據，以下是測試時編寫的webservice服務
[WebMethod(Description="獲得用戶DataSet格式數據")] public DataSet GetUserInfoDataSet() { DataSet dataSet= null; using (SqlConnection conn = new SqlConnection(@"Data Source=.\SQLEXPRESS;Initial CataLog=UserInfo;User Id=sa;Password=123")) { conn.Open(); using (SqlCommand cmd = conn.CreateCommand()) { cmd.CommandText = "select * from Users"; SqlDataAdapter sda = new SqlDataAdapter(cmd); DataSet ds = new DataSet(); sda.Fill(ds); dataSet = ds; } } return dataSet; }
我們可以直接在瀏覽器中訪問該服務觀察獲得DataSet數據格式是什么樣式的，然后通過js操作 結果集中包含了多個Table對象
<NewDataSet xmlns=""> <Table diffgr:id="Table1" msdata:rowOrder="0"> <Id>13</Id> <UserName>EWR</UserName> <Age>34</Age> <PassWord>32565</PassWord> <Email>RTRET</Email> </Table> <Table diffgr:id="Table2" msdata:rowOrder="1"> <Id>14</Id> <UserName>ER</UserName> <Age>23</Age> <PassWord>46546</PassWord> <Email>FDGDF</Email> </Table> </NewDataSet>
處理方法：
function getDataSet() { $.ajax({ url: "http://localhost:8793/SoapWebService.asmx/GetUserInfoDataSet", type: "POST", data: "{}", dataType: "xml", success: function (result) { var tr = "<tr align='center' style='background:#0094ff;color:white'><td>用戶名</td><td>年齡</td><td>密碼</td><td>郵箱</td></tr>"; $(result).find("Table").each(function () { tr += "<tr><td>" + $(this).find("UserName").text() + "</td><td>" + $(this).find("Age").text() + "</td><td>" + $(this).find("PassWord").text() + "</td><td>" + $(this).find("Email").text() + "</td></tr>"; }) document.getElementById("tblist").innerHTML = tr; }, error: function (result, status) { if (status == "error") { alert("數據讀取失敗"); } } }) }
2.Ajax請求webservice返回Json格式數據，在生成Json數據之前 以List<object>泛型集合裝載數據。Ajax在請求時注意幾個方面，type：“json”,dataType:"application/json;charset=utf-8" 瀏覽器向服務器發出請求時，會在請求報文中加上這段內容，告訴瀏覽器,返回數據的格式為Json格式，這句是必不可少的。Json數據中每一行數據都是一個對象.
<ArrayOfUsers xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns="http://tempuri.org/"> <Users> <UserName>EWR</UserName> <Age>34</Age> <PassWord>32565</PassWord> <Email>RTRET</Email> </Users> <Users> <UserName>ER</UserName> <Age>23</Age> <PassWord>46546</PassWord> <Email>FDGDF</Email> </Users> <Users> </ArrayOfUsers>
[WebMethod(Description = "獲得用戶Json格式數據")] [ScriptMethod(UseHttpGet=false)] public List<Users> GetUserInfoJson() { List<Users> dataJson = null; using (SqlConnection conn = new SqlConnection(@"Data Source=.\SQLEXPRESS;Initial CataLog=UserInfo;User Id=sa;Password=123")) { conn.Open(); using (SqlCommand cmd = conn.CreateCommand()) { cmd.CommandText = "select * from Users"; SqlDataReader sda = cmd.ExecuteReader(); List<Users> list = new List<Users>(); while (sda.Read()) { list.Add(new Users { UserName = sda[1].ToString(), Age = sda[2].ToString(), PassWord = sda[3].ToString(),Email=sda[4].ToString() }); } dataJson = list; } } return dataJson; }
處理方法:
function GetJson() { $.ajax({ type: "post", url: 'http://localhost:8793/SoapWebService.asmx/GetUserInfoJson', dataType: 'json', contentType:"application/json;charset=utf-8", data: '{}', async: false, success: function (result) { var datas = result.d; var tr = "<tr align='center' style='background:#0094ff;color:white'><td>用戶名</td><td>年齡</td><td>密碼</td><td>郵箱</td></tr>"; for (var i = 0; i < datas.length; i++) { tr += "<tr><td>" + datas[i].UserName + "</td><td>" + datas[i].Age + "</td><td>" + datas[i].PassWord + "</td><td>" + datas[i].Email + "</td></tr>"; } document.getElementById("tblist").innerHTML = tr; } }); }
3.Ajax請求webservice返回對象時的處理方法，其實也是一樣 將返回的對象以Json數據格式返回
//返回的xml格式數據 <Users xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns="http://tempuri.org/"> <UserName>jim</UserName> <Age>10</Age> <PassWord>123456</PassWord> <Email>3333@qq.com</Email> </Users>
經過Json格式化后的數據
{"d":{"__type":"_01WebProject.Users","UserName":"jim","Age":"10","PassWord":"123456","Email":"3333@qq.com"}}
處理方法:
function GetObj() { $.ajax({ type: "post", url: 'http://localhost:8793/SoapWebService.asmx/GetUsersObj', dataType: 'json', contentType: "application/json;charset=utf-8", data: '{}', async: false, success: function (result) { var datas = result.d; var tr = "<tr align='center' style='background:#0094ff;color:white'><td>用戶名</td><td>年齡</td><td>密碼</td><td>郵箱</td></tr>"; tr += "<tr><td>" + datas.UserName + "</td><td>" + datas.Age + "</td><td>" + datas.PassWord + "</td><td>" + datas.Email + "</td></tr>"; document.getElementById("tblist").innerHTML = tr; } }); }
3.Ajax請求webservice返回Hashtable格式數據。
[WebMethod(Description = "獲取Hashtable格式數據")] public Hashtable GetUserHashtable() { Hashtable hash = new Hashtable(); Users user = new Users() { UserName = "jim", Age = "10", PassWord = "123456", Email = "3333@qq.com" }; hash.Add("1", user); return hash; }
處理方式:
function GetHashtable() { $.ajax({ type: "post", url: 'http://localhost:8793/SoapWebService.asmx/GetUserHashtable', dataType: 'json', contentType: "application/json;charset=utf-8", data: '{}', async: false, success: function (result) { var datas = result.d["1"]; var tr = "<tr align='center' style='background:#0094ff;color:white'><td>用戶名</td><td>年齡</td><td>密碼</td><td>郵箱</td></tr>"; tr += "<tr><td>" + datas.UserName + "</td><td>" + datas.Age + "</td><td>" + datas.PassWord + "</td><td>" + datas.Email + "</td></tr>"; document.getElementById("tblist").innerHTML = tr; } }); }
歸納總結：
總結：
1、JQuery與WebService之間以JSON作為數據交換形式的時候，contentType: "application/json; charset=utf-8"是必須指定的。
要不然WebService不知道以何種數據作為轉換。
2、JQuery調用WebService返回復雜數據類型並不一定需要類型為可序列化。
3、WebService返回的JSON數據通過".d"獲取如上面測試中的alert(json.d)