淺談對Jquery+JSON+WebService的使用小結

Jquery作為一款優秀的JS架構，簡單易用的特性就不必說了。在實際的開發過程中，使用JQ的AJAX函數調用WebService

的介面實現AJAX的功能也成了一種比較普遍的技術手段了。WebService介面的實現，通常都是由OOP語言實現的。所以

在WebService的介面函數中，難免可能會遇到除了單一資料型別的複雜資料類型。複雜的資料的資料類型機有可能是

WebService介面中的參數，也有可能是WebService的傳回值。本文所敘述的要點為：

1、對於WebService介面複雜類型的參數，JQ調用的時候傳入的JSON資料應該如何表示。？

2、JQ對WebService調用擷取JSON資料類型。

3、JQ調用的時對Webservice返回的複雜資料類型有什麼樣要求。？

環境：JQ版本：1.4.2、VS2008 SP1。

測試一：對於WebService簡單參數類型：

複製代碼 代碼如下:WebService介面函數代碼如下：

[WebMethod(Description = "測試方法")]
public string ProcessPersonalInfo(Person person)
{
return person.Name + person.Tel;
}
JQ調用代碼如下：

$.ajax({

type: "POST",

url: "WebService1.asmx/GetString",

dataType: "json",

contentType: "application/json; charset=utf-8",

data: "{'name':'zhangsan'}",

success: function(json) { alert(json.d) },

error: function(error) {

alert("調用出錯" + error.responseText);

}
});

提示：在$.ajax函數中，data必須要以字串的形式表示JSON，而不能直接用JSON資料傳進去。可能有些朋友對JSON對象和JSON對象的字串

不大好區分，其實，字串類似C#裡用“”引起來的東西，而JSON對象是直接寫在{}中的。簡單的測試方法是直接通過alert函數彈出，如果顯示[object:object]

則為JSON對象，否則就是一個字串。

結果如：

測試二：對於WebService複雜參數類型：

複製代碼 代碼如下:WebService介面函數代碼如下：

[WebMethod(Description = "測試方法")]
public string ProcessPersonalInfo(Person person)
{
return person.Name + person.Tel;
}

Person實體：

public class Person
{
public string Name { get; set; }

public int Age { get; set; }

public string Address { get; set; }

public string Tel { get; set; }

}

JQ調用代碼如下：

$.ajax({

type: "POST",

url: "WebService1.asmx/ProcessPersonalInfo",

dataType: "json",

contentType: "application/json; charset=utf-8",

data: "{'person':{'Name':'zhangsan','Age':28,'Address':'beijing',Tel:'01082658866'}}"，

success: function(json) { alert(json.d) },

error: function(error) {

alert("調用出錯" + error.responseText);
}
});

　　結果如：

調用過程與簡單參數類型類似，就是通過在JS中用一個表示Person的person對象的字串，發往用戶端後，WebService會自動將person對象的字串

轉換為Person實體物件。

測試三：對於WebService複雜傳回型別

複製代碼 代碼如下:WebService介面函數代碼如下：

[WebMethod(Description = "測試方法")]
public List<Person> GetPersonalList()
{
List<Person> persons = new List<Person>
{
new Person {Address = "beijing", Age = 25, Name = "zhangshan", Tel = "01082678866"}
};
return persons;
}<BR> JQ調用代碼如下：

$.ajax({

type: "POST",

url: "WebService1.asmx/GetPersonalList",

dataType: "json",

contentType: "application/json; charset=utf-8",

success: function(json) { $(json.d).each(function() { alert(this.Name + "-" + this.Age + "-" + this.Address + "-" + this.Tel) }) },

error: function(error) {

alert("調用出錯" + error.responseText);

}

});

　　如：

也就是說對於複雜傳回型別，處理方式也是簡單類型基本上是一樣的。

曾聽到有一種觀念認為，Jq調用時WebSevice,用JSON作為資料互動格式時，返回資料類型一定是可序列化的。真的是這樣嗎。？

.Net的基礎資料型別 (Elementary Data Type)確實是可序列化的，這一點沒有疑問。那麼List<T>資料類型是否可以序列化呢。？看看List<T>的中繼資料(Metadata)資訊

就知道了。。

[DebuggerTypeProxy(typeof (Mscorlib_CollectionDebugView<T>))]

[DebuggerDisplay("Count = {Count}")]

[Serializable]

public class List<T> : IList<T>, ICollection<T>, IEnumerable<T>, IList, ICollection, IEnumerable

{

/**/

}

如果上面的說法成立，在這種情況下，調用成功也無可厚非。但是問題真是這樣嗎。？下面繼續測試一下：

測試四：對於WebService複雜傳回型別

複製代碼 代碼如下: 　　　　　　　　[WebMethod(Description = "測試方法")]
public Person GetPerson()
{
Person person = new Person {<BR>　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　Address = "beijing", Age = 27, <BR>　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　Name = "zhangshan", Tel = "01082678866"　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　<BR>　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　};
return person;
}

JQ調用代碼如下：

$.ajax({

type: "POST",

url: "WebService1.asmx/GetPerson",

dataType: "json",

contentType: "application/json; charset=utf-8",

//data: "{'person':{'Name':'zhangsan','Age':28,'Address':'beijing',Tel:'01082658866'}}",

success: function(json) { $(json.d).each(function() { alert(this.Name + "-" + this.Age + "-" + this.Address + "-" + this.Tel) }) },

error: function(error) {

alert("調用出錯" + error.responseText);

}

});

　　如：

但是測試四中，GetPerson()方法返回Person資料類型。再看看Person實體的定義，根本就沒有標記問可序列化。

由結果可知：JQ調用WebService，並不一定需要返回複雜類型的資料必須是可序列化的。

下面做一個有趣的測試。大家都知道WebService的傳回型別不能為Hashtable類型。因為它實現了因為它實現 IDictionary介面。

測試五：對於WebService複雜傳回型別

複製代碼 代碼如下:　　　　　　　　　[WebMethod(Description = "測試方法")]
public Hashtable GetPersonalHashtable()
{
Hashtable hashtable = new Hashtable();

Person person = new Person { Address = "beijing", Age = 25, Name = "zhangshan", Tel = "01082678866" };

hashtable.Add(1, person);

return hashtable;
}

JQ調用代碼如下：

$.ajax({

type: "POST",

url: "WebService1.asmx/GetPersonalHashtable",

dataType: "json",

contentType: "application/json; charset=utf-8",

data: data,

success: function(json) { $(json.d).each(function() { alert(this["one"].Name) }) },

error: function(error) {

alert("調用出錯" + error.responseText);

}

});

　

這樣，Jq居然能調用成功。這點是有點讓人意想不到的。

總結：

1、Jq與WebService之間以JSON作為資料交換形式的時候，contentType: "application/json; charset=utf-8"是必須指定的。

要不然WebService不知道以何種資料作為轉換。

2、Jq調用WebService返回複雜資料類型並不一定需要類型為可序列化。

3、WebService返回的JSON資料通過".d"擷取如上面測試中的alert(json.d)