[Jquery]使用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 ,有更详细的说明。我只是
重新用中文简要的重述一下其中讲到的问题。
原文出处:http://www.cnblogs.com/mingxuan

赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏