jsonp跨域+ashx

jsonp跨域+ashx（示例）

前言

　　做B/S项目的时候，我们一般使用jquery+ashx来实现异步的一些操作，比如后台获取一些数据到前台，但是如果ashx文件不在本项目下，引用的是别的域下的文件，这时候就访问不了。关于jsonp其实是老生常谈的话题，园中也有不少文章介绍，可以把jsonp看成一个协议或模式，这边就不多说，我们只看示例。

正常实现

　　我们先看下代码：

 1         public void ProcessRequest(HttpContext context)

 2         {

 3             string type = context.Request.QueryString["type"].ToString();

 4             string result = "";

 5             switch (type)

 6             {

 7                 case "1":

 8                     result = "one";

 9                     break;

10                 case "2":

11                     result = "two";

12                     break;

13                 case "3":

14                     result = "three";

15                     break;

16                 default:

17                     result = "other";

18                     break;

19             }

20             context.Response.ContentType = "text/plain";

21             context.Response.Write(result);

22         }

　　前台js代码：

    <script type="text/javascript">

        function getString() {

            $.ajax({

                type: "POST",

                url: "GetStringDemo.ashx?type=" + $("#txtValue").val(),

                timeout: 20000,

                beforeSend: function (XMLHttpRequest) {

                    $("#div_clear").html("正在获取，请稍候...");

                },

                success: function (data, textStatus) {

                    $("#div_clear").html("获取值：" + data);

                },

                error: function (XMLHttpRequest, textStatus, errorThrown) {

                    $("#div_clear").html("获取出错！");

                }

            });

        }

    </script>

　　上面的代码不需要解释太多，就是前台通过ajax传过去参数，ashx进行处理并返回处理结果，前台呈现，这是我们一般正常通过ashx做的异步操作，注意现在是前后台在同一个项目下。

　　运行结果：

jsonp跨域

　　上面的示例ajax代码中url如果改成别的域名下的ashx文件，就会出现访问错误，通过jsonp可以解决跨域问题，上面的代码我们修改下：

　　ashx代码：

 1         public void ProcessRequest(HttpContext context)

 2         {

 3             string type = context.Request.QueryString["type"].ToString();

 4             string callback = HttpContext.Current.Request["jsoncallback"];

 5             string result = "";

 6             switch (type)

 7             {

 8                 case "1":

 9                     result = "one";

10                     break;

11                 case "2":

12                     result = "two";

13                     break;

14                 case "3":

15                     result = "three";

16                     break;

17                 default:

18                     result = "other";

19                     break;

20             }

21             context.Response.ContentType = "application/json";

22             context.Response.ContentEncoding = System.Text.Encoding.UTF8;

23             context.Response.Write(callback + "({\"result\":\"" + result + "\"})");

24             context.Response.End();

25         }

　　前台js代码：

 1     <script type="text/javascript">

 2         function getString() {

 3             $.ajax({

 4                 url: "http://localhost:8975/GetStringDemo.ashx?jsoncallback=?",

 5                 dataType: "jsonp",

 6                 data: { "type": $("#txtValue").val() },

 7                 beforeSend: function (XMLHttpRequest) {

 8                     $("#div_clear").html("正在获取，请稍候...");

 9                 },

10                 success: function (data, textStatus) {

11                     $("#div_clear").html("获取值：" + data.result);

12                 },

13                 error: function (XMLHttpRequest, textStatus, errorThrown) {

14                     $("#div_clear").html("获取出错！");

15                 }

16             });

17         }

18     </script>

　　注意上面的url，ashx和前台页面并不是在一个项目下。

　　运行结果：

　　示例代码下载：jsonp跨域+ashx.rar