前言
做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