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

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。