使用jQuery應用到Asp.net ajax中時3個誤區應該避免

      Ajax中使用json這個輕量級資料類型通訊的好處相信大家已經很清楚，考慮到安全問題，Asp.net Ajax的webService使用json，應該防止Json Hijacking。因此通常我們的做法是在使用Post請求式，並將請求的content-type設定成application/json; charset=utf-8。但用戶端如果你使用的是Jquery，有三個細節問題是我們應該注意的：

      1 :如果我們Post時沒有任何資料傳給服務端，請指定Data：{} 如：

     

Code
1 $.ajax({
2   type: "POST",
3   url: "PageMethod.aspx/PageMethodName",
4   data: "{}",//注意這裡不可省。
5   contentType: "application/json; charset=utf-8",
6   dataType: "json"
7 });

 

   這是因為在IIS中post請求時Content —Length是必須提供的，即使沒用任何Post Data.Content-Length也應該設為0,但這樣的話Jquery不會自動化佈建Header，除非請求中包含post Data。而Asp.net Ajax的json傳輸，又要求post方式，因此我們不能改變他的請求方式。簡便的解決法案就是在請求中給定一個空的json 對象。以符合IIS的要求，此時Content-Length為2。這時在服務端我可以完全忽略這個為空白的參數，並處理相應的請求。

 

    2：當post data 不為空白時。我們應該避免在beforeSend事件裡設定RequestHeader。

     如一點所述的範例post data 為空白時，既然jquery不能自動化佈建Header，我們能否手工幫他設定呢？答案時是

肯定的。這時我們是在beforeSend事件中設定的。如代碼所示（請注意：必須設定為application/json否則webservice

時不會返回json。這也是出於安全的考慮）。

Code
1 $.ajax({
2   type: "POST",
3   url: "WebService.asmx/WebMethodName",
4   beforeSend: function(xhr) {
5     xhr.setRequestHeader("Content-type", 
6                          "application/json; charset=utf-8");
7   },
8   dataType: "json"
9 });

    但時此時問題又來了，在IE中XmlHttpRequst的setRequestHeader不時直接完全的設定RequstHeader。而是

在已有的基礎上附加setRequestHeader參數所指定的以形成新的header。這樣的話，在jquery會在包含Post Data請求

的header中自動化佈建content-type為預設的application/x-www-form-urlencoded ，而在beforeSend又會被重新追

加一個application/json; charset=utf-8。此時Content-Type變成了 application/x-www-form-urlencoded, 

application/json; charset=utf-8（在ff會重新設定）。很顯然這個content-type不為Asp.net Ajax所接受。webservice

不會返回任何json。因此包含post data時建議使用下列方式保證返回的為json

Code
$.ajax({
  type: "POST",
  url: "WebService.asmx/WebMethodName",
  data: "{'fname':'dave', 'lname':'ward'}",
  contentType: "application/json; charset=utf-8",
  dataType: "json"
});

  3:注意區分json對象和json形式的字串。

  看看下面代碼：

Code
$.ajax({
  type: "POST",
  url: "WebService.asmx/WebMethodName",
  data: {'fname':'dave', 'lname':'ward'},
  contentType: "application/json; charset=utf-8",
  dataType: "json"
});

 咋一看沒什麼問題，想當然的認為data會乖乖的post給服務端。但實際上這是不正確的。請仔細看此時data時json

表示的對象。此時Json表示的對象會被Jquery序列化。如上述例子data將是fname=dave&lname=ward。再看如下：

Code
1 $.ajax({
2   type: "POST",
3   url: "WebService.asmx/WebMethodName",
4   data: "{'fname':'dave', 'lname':'ward'}",
5   contentType: "application/json; charset=utf-8",
6   dataType: "json"
7 });

這時data才是我們期望的。其形式：{'fname':'dave', 'lname':'ward'}。小小語義的改變就可以造成如此大的不同。

因此，我們在編程過程中應該特別注意。以免浪費時間。

註：有關細節可以參看3 mistakes to avoid when using jQuery with ASP.NET AJAX ，有更詳細的說明。我只是

重新用中文簡要的重述一下其中講到的問題。