Ajax条用WebService 5星级

转：http://www.cnblogs.com/frozenzhang/p/ajax.html

随笔- 2 文章- 0 评论- 5

$.ajax()调用webservice

 

常规请求基本格式

         [WebMethod]
         public string SayHello(string name)
         {
             return "Hello " + name;
         }

             $.ajax({
                 url: "/CommonService.asmx/SayHello",
                 type: "Post",
                 dataType: "json",
                 contentType: "application/json; charset=utf-8",
                 data: "{name:'Varchar32'}",
                 success: function (data) {
                     alert(data.d);
                 },
                 error: function (data) {
                     //200的响应也有可能被认定为error，responseText中没有Message部分
                     alert($.parseJSON(data.responseText).Message);
                 },
                 complete: function (data) {
                     ;//after success or error
                 }
             });

其中几个参数的含义

　　type：请求方式，又称Method

　　dataType：预期返回类型（The type of data that you're expecting back from the server）

　　contentType：发送到服务器的数据的编码类型（When sending data to the server, use this content type）

　　data：发送到服务器的数据

返回各种类型的数据

、返回string

         [WebMethod]
         public string HelloWorld()
         {
             return "Hello World";
         }

     //js的其他部分略
     success: function (data) {
         $(".ajaxresult div:eq(0)").html("返回数据的类型为：" + typeof(data.d));
         $(".ajaxresult div:eq(1)").html("内容为：" + data.d);
     }    

浏览器看到的结果

另附上采用text格式调用的代码

             $.ajax({
                 url: "/CommonService.asmx/HelloWorld",
                 type: "Post",
                 dataType: "text",
                 data: {},
                 success: function (data) {
                     $(".ajaxresult div:eq(0)").html("返回数据的类型为：" + typeof (data));
                     $(".ajaxresult div:eq(1)").html("内容为：" + data);
                 }
             });

、返回int

         [WebMethod]
         public int HelloWorld()
         {
             return ;
         }

js部分略

浏览器看到的结果

、返回数组（List或Array）

         [WebMethod]
         public List<string> HelloWorld()
         {
             return new List<string>() { "Frozen_Zhang","Varchar32"};
         }

        　　　　 //js的其他部分略
        　　　　 success: function (data) {
                     $(".ajaxresult div:eq(0)").html("返回数据的类型为：" + typeof (data.d));
                     var str = "";
                     $.each(data.d, function (index, val) {
                         str += "第" + index + "项：" + val + " ;";
                     });
                     str = str.substring(0,str.length - 1);
                     $(".ajaxresult div:eq(1)").html("内容为：" + str);
                 }

浏览器看到的结果

、返回自定义类

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

         [WebMethod]
         public Person HelloWorld()
         {
             return new Person() {
                 Name = "Varchar32",
                 Gender = true
             };
         }

                 //js的其他部分略
                 success: function (data) {
                     $(".ajaxresult div:eq(0)").html("返回数据的类型为：" + typeof (data.d));
                     $(".ajaxresult div:eq(1)").html("内容为：姓名" +  data.d.Name + "，性别" + (data.d.Gender ? "男" : "女"));
                 }

浏览器看到的结果

、返回自定义类的集合

         [WebMethod]
         public List<Person> HelloWorld()
         {
             return new List<Person>(){
                 new Person() {
                     Name = "Varchar32",
                     Gender = true
                 },
                 new Person(){
                     Name = "Frozen_Zhang",
                     Gender = true
                 }
             };
         }

 　　　　　　　　　//js的其他部分略
                 success: function (data) {
                     $(".ajaxresult div:eq(0)").html("返回数据的类型为：" + typeof (data.d));
                     var str = "";
                     $.each(data.d, function (index, val) {
                         str += "第" + index + "项：" + "姓名" + val.Name + "，性别" + (val.Gender ? "男" : "女") + " ;";
                     });
                     str = str.substring(0, str.length - 1);
                     $(".ajaxresult div:eq(1)").html("内容为：" + str);
                 }

浏览器看到的结果

、返回Dictionary

         [WebMethod]
         public Dictionary<string,string> HelloWorld()
         {
             //键必须是string类型
             var dict = new Dictionary<string, string>();
             dict.Add("","Varchar32");
             dict.Add("", "Frozen_Zhang");
             return dict;
         }

                 //js的其他部分略
                 success: function (data) {
                     $(".ajaxresult div:eq(0)").html("返回数据的类型为：" + typeof (data.d));
                     var str = "";
                     $.each(data.d, function (key, val) {
                         str += "键:" + key + ",值:" + val + " ;";
                     });
                     str = str.substring(0, str.length - 1);
                     $(".ajaxresult div:eq(1)").html("内容为：" + str);
                 }

浏览器看到的结果

、返回DataSet

         [WebMethod]
         public DataSet HelloWorld()
         {
             var ds = new DataSet();
             var dt = new DataTable();
             dt.Columns.Add("Name");
             dt.Columns.Add("Gender");
             dt.Rows.Add("Varchar32", true);
             dt.Rows.Add("Frozen_Zhang", true);
             ds.Tables.Add(dt);
             return ds;
         }

             //此处采用xml格式调用
　　　　　　　　　$.ajax({
                 url: "/CommonService.asmx/HelloWorld",
                 type: "Post",
                 dataType: "xml",
                 data: {},
                 success: function (data) {
                     var str = "";
                     $.each($.find("Table1", data), function () {
                         str += $(this).find("Name").text() + (Boolean($(this).find("Gender").text()) ? "男" : "女") + ";";
                     });

                     str = str.substring(0, str.length - 1);
                     $(".ajaxresult div:eq(1)").html("内容为：" + str);
                 }
             });

浏览器看到的结果

*、用xml格式调用比较简单，用json格式要引用Microsoft.Web.Preview.dll库，还要在web.config中添加一大串，比较麻烦

跨域请求

、原理

　　javascript的同源策略（Same-Origin Policy）：js不能访问不在同一域下的页面内容，因此XmlHttpRequest只能请求在同一源下的资源

　  但script标签的src属性不受同源策略的影响

     <script type="text/javascript" id="script1">
         funccallback = function (data) {
             alert(data);
         }
     </script>
     <script type="text/javascript" id="script2">
         funccallback("Varchar32");
     </script>

上面的脚本肯定没问题

现在假设另一个源url.com下有一js脚本scirpt.js，只有一句

　　funccallback("Varchar32");

我将script2改成下面一段带src属性的脚本

     <script type="text/javascript" src="http://www.url.com/scirpt.js">
     </script>

也会顺利弹窗

随意改变http://www.url.com/scirpt.js里给funccallback传递的参数，就是说scirpt1中的funccallback接受到了其他源下的动态数据

$.ajax()就是对这种请求形式进行了封装，向其他源的服务器发送一个GET请求，返回一个指定格式的数据

这种格式就是JSONP格式：回调函数名(json格式的动态数据)

、请求ashx

 　　　　 public void ProcessRequest(HttpContext context)
         {
             string callback = context.Request.QueryString["callback"];
             var name = context.Request.QueryString["name"];
             string json = "{\"name\":\"" + name + "\",\"gender\":\"" + "男" + "\"}";
             //JSONP格式：回调函数名(json格式参数)
             //括号后不要加分号
             string result = callback + "(" + json + ")";
             context.Response.ContentType = "application/json";
             context.Response.Write(result);
         }

         //回调函数funccallback，回调函数的定义不要放在 $(function () {    });里
         function funccallback(data) {
             alert("in callback" + "：" + data.name + "， 性别" + data.gender);
         }

         $.ajax({
             url: "http://localhost:12500/handler1.ashx?callback=?",
             dataType: "jsonp",
             //jsonpCallback: "funccallback",
             //说明：1、未指定jsonpCallback项则会产生一个随机回调函数名，是由ajax方法随机生成，而不是服务器；2、jsonpCallback项和url的callback参数不可同时指定（callback参数指定为'?'除外）；3、随机函数名就意味着成功返回后只会执行success，指定回调函数反而会显得多余
             data: { name: "Varchar32" },
             //执行顺序是success在回调函数之后
             success: function (data) {
                 //data，同回调函数中的data，就是在服务器端为回调函数传递的json格式参数
                 alert("in success" + "：" + data.name + "， 性别" + data.gender);
             }
         });

脚本执行结果为浏览器弹出确认框：‘in success：Varchar32， 性别男’

firefox浏览器中看到的响应

　　

、请求webservice

         [WebMethod]
         public void GetGenderByName(string callback, string name)
         {
             var json = "{\"name\":\"" + name + "\",\"gender\":\"" + "男" + "\"}";
             string result = callback + "(" + json + ")";
             HttpContext.Current.Response.ContentType = "application/json";
             HttpContext.Current.Response.Write(result);
             HttpContext.Current.Response.End();
         }

         //回调函数funccallback，回调函数的定义不要放在 $(function () {    });里
         function funccallback(data) {
             alert("in callback" + "：" + data.name + "， 性别" + data.gender);
         }

         $.ajax({
             url: "http://localhost:12500/CommonService.asmx/GetGenderByName?callback=?",
             dataType: "jsonp",
             //jsonpCallback: "funccallback",
             data: { name: "Varchar32" },
             success: function (data) {
                 alert("in success" + "：" + data.name + "， 性别" + data.gender);
             }
         });

4、$.getJSON

         $.getJSON("http://localhost:12500/CommonService.asmx/GetGenderByName?name=Varchar32&callback=?",
             function (data) {
                 alert("in success" + "：" + data.name + "， 性别" + data.gender);
             }
         ); 

、返回复杂类型

  　　　　public void ProcessRequest(HttpContext context)
         {
             string callback = context.Request.QueryString["callback"];
             var name = context.Request.QueryString["name"];

             var person = new Person()
             {
                 Name = name,
                 Gender = true
             };

             DataContractJsonSerializer ser = new DataContractJsonSerializer(typeof(Person));
             MemoryStream ms = new MemoryStream();
             ser.WriteObject(ms, person);
             string jsonString = Encoding.UTF8.GetString(ms.ToArray());
             ms.Close();

             string json = jsonString;

             //JSONP格式：回调函数名(json格式参数)
             //括号后不要加分号
             string result = callback + "(" + json + ")";
             context.Response.ContentType = "application/json";
             context.Response.Write(result);
         }

常见问题

、webservice定义了几个方同名的法时，ajax请求会被同名方法中的最后一个响应，而不是根据参数自动匹配

、Method use ‘Get’，返回xml or text，要在Web.config中添加节点

　　<webServices><protocols><add name= "HttpGet"/></protocols></webServices>

、Method use ‘Get’，返回json，要给Webservice的方法添加UseHttpGet特性

[ScriptMethod(UseHttpGet=true)]

、dataType并不是服务器返回数据的类型(格式)，just expecting。看下面的几种请求方式

　　第一种：一般方式

             $.ajax({
                 url: "/CommonService.asmx/SayHello",
                 type: "Post",
                 dataType: "json",
                 contentType: "application/json; charset=utf-8",
                 data: "{ name: 'Varchar32' }",
                 success: function (data) {
                     alert(data.d);
                 },
                 error: function (data) {
                     alert(data);
                 }
             });

　　结果弹出确认框‘Hello Varchar32’，从firefox看到的结果

　　

　　

　　第二种：省略dataType项，代码略，结果和第一种一样，弹出确认框‘Hello Varchar32’

　　第三种：给dataType指定为‘text’,代码略，弹出确认框‘undefined’，但返回结果从firefox看和上面两种第二种请求格式一样

　　第四种：给dataType指定为‘xml’,代码略，结果执行了error方法，但返回结果从firefox看和以上几种方式一样（200的响应被认定为了error）

　　为什么第二种情况不会报错，第三种明明返回了json格式，但data.d为什么是undefined呢，而第四种请求会被认定为error

　　1）认真从firefxo中观察请求头和响应头会发现，响应头的content-Type始终是‘application/json; charset=utf-8’

　　

　　2）请求头的Accept项有所不同，分别是

　　　　常规格式：

　　　　省略dataType项：

　　　　给dataType指定为‘text’：

　　　　给dataType指定为‘xml’

　　 3）从jquery官网上找到$.ajax()的选项content-Type定义中的这么一句

　  　　 If you explicitly pass in a content-type to $.ajax(), then it is always sent to the server (even if no data is sent)

　　　　意思差不多就是：如果指定了‘content-Type’，不管有没有数据，始终发送到服务器

　　　　如果仅仅是提交的数据的类型（格式），为什么没数据还要发送到服务器呢

　　4）修改success方法

            success: function (data) {
                  alert(typeof(data)); //alert data 的类型
                  alert(data.d);
             },

　　　　结果分别是：object、object、string、不执行success

　　　　结论：（假设成功返回，状态码200）

　　　　　　　content-Type同时是提交数据和返回数据的类型（格式）。即若指定为‘application/json; charset=utf-8’，则返回类型一定为‘json’，此时dataType可省略；未指定则默认返回的是xml格式的数据

　　　　　　  dataType为预期（expecting）的返回格式（格式比类型更恰当），若实际返回格式与预期格式相同 或 预期格式在js中对应的数据类型为String（text、html格式对应的为String，json、xml对应Object），则执行succes，否则被认定为error。第四种请求方式，返回格式为json，预期格式为xml，两种格式不同 且 预期格式在js中对应的类型为Object，虽然200，依然被认定为error

　　　　　　　success方法获取到的返回数据data的类型为预期返回格式在js中对应的类型（Object或String），第三种请求方式，data的类型为String，内容为‘{"d":"Hello World"}’，对String调用.d，当然是undefined，假设有一句‘alert($.parseJSON(data).d);’，此句会得到想要的结果

　　　　　　　dataType作用：1、判断是success还是error；2、success方法接受到的数据data的类型

、content-Type的几种可选类型： text：“text/plain“;    xml：“application/xml“;    json：“application/json“； html：“text/html”;   script："application/x-javascript"

、采用json格式为什么要‘.d’，json格式是一Ojbect，微软框架默认的是{"d":"后台返回的数据"}，d属性的值才是后台返回的数据