利用JQuery jsonp实现Ajax跨域请求 .Net 的*.handler 和 WebService，返回json数据

最新推荐文章于 2025-12-13 17:41:29 发布

转载最新推荐文章于 2025-12-13 17:41:29 发布 · 1k 阅读

文章标签：

#asp.net #jsonp #jquery

C# 同时被 3 个专栏收录

22 篇文章

订阅专栏

asp.net

14 篇文章

订阅专栏

jsonp

2 篇文章

订阅专栏

本文介绍了一个简单的跨域请求实现方案，包括使用 *.handler 和 WebService 的两种方式，并提供了具体的代码示例。

原文： http://blog.youkuaiyun.com/polarissky/article/details/6429554

1.新建数据源项目CrossDomain

主要文件如下：

1.Handler.ashx 作为jquery跨域请求*.handler的响应，代码如下：

    using System;  
    using System.Collections.Generic;  
    using System.Web;  
    using System.Web.Services;  
    namespace CrossDomain  
    {  
        /// <summary>  
        /// $codebehindclassname$ 的摘要说明  
        /// </summary>  
        [WebService(Namespace = "http://tempuri.org/")]  
        [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]  
        public class Handler : IHttpHandler  
        {  
            public void ProcessRequest(HttpContext context)  
            {  
                context.Response.ContentType = "text/plain";  
                string callbackMethodName = context.Request.Params["jsoncallback"];  
                string currentCity = context.Request["city"];  
                currentCity = string.IsNullOrEmpty(currentCity) ? "北京" : "沈阳";  
                string result = callbackMethodName + "({/"city/":" + "/"" + currentCity + "/", /"dateTime/":" + "/"" + DateTime.Now + "/"});";  
                context.Response.Write(result);  
            }  
            public bool IsReusable  
            {  
                get  
                {  
                    return false;  
                }  
            }  
        }  
    }

2.WebService.asmx 作为jquery跨域请求WebService的响应，代码如下：

    using System;  
    using System.Collections.Generic;  
    using System.Web;  
    using System.Web.Services;  
    namespace CrossDomain  
    {  
        /// <summary>  
        /// WebService 的摘要说明  
        /// </summary>  
        [WebService(Namespace = "http://tempuri.org/")]  
        [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]  
        [System.ComponentModel.ToolboxItem(false)]  
        public class WebService : System.Web.Services.WebService  
        {  
            [WebMethod]  
            public void HelloWorld(string city)  
            {  
                string callbackMethodName = HttpContext.Current.Request.Params["jsoncallback"] ?? "";  
                city = string.IsNullOrEmpty(city) ? "北京" : "沈阳";  
                string result = callbackMethodName + "({/"city/":" + "/"" + city + "/", /"dateTime/":" + "/"" + DateTime.Now + "/"});";  
                HttpContext.Current.Response.Write(result);  
                HttpContext.Current.Response.End();  
            }  
            [WebMethod]  
            public void ws(string name, string time)  
            {  
                HttpRequest Request = HttpContext.Current.Request;  
                string callback = Request["callback"];  
                HttpResponse Response = HttpContext.Current.Response;  
                Response.Write(callback + "({msg:'this is" + name + "jsonp'})");  
                Response.End();  
            }  
        }  
    }

3.Web.config 需要修改web.config文件，注意webServices节（这是请求webservice获取数据的关键）具体如下：

    <?xml version="1.0" encoding="utf-8"?>  
    <configuration>  
      
        
        <appSettings/>  
        <connectionStrings/>  
        
        <system.web>  
            <!--   
                设置 compilation debug="true" 可将调试符号插入  
                已编译的页面中。但由于这会   
                影响性能，因此只在开发过程中将此值   
                设置为 true。  
            -->  
            <compilation debug="false">  
            </compilation>  
            <!--  
                通过 <authentication> 节可以配置 ASP.NET 用来   
                识别进入用户的  
                安全身份验证模式。   
            -->  
            <authentication mode="Windows" />  
            <!--  
                如果在执行请求的过程中出现未处理的错误，  
                则通过 <customErrors> 节可以配置相应的处理步骤。具体说来，  
                开发人员通过该节可以配置  
                要显示的 html 错误页  
                以代替错误堆栈跟踪。  
            <customErrors mode="RemoteOnly" defaultRedirect="GenericErrorPage.htm">  
                <error statusCode="403" redirect="NoAccess.htm" />  
                <error statusCode="404" redirect="FileNotFound.htm" />  
            </customErrors>  
            -->  
          <webServices>  
            <protocols>  
              <add name="HttpGet"/>  
              <add name="HttpPost"/>  
            </protocols>  
          </webServices>  
        </system.web>  
    </configuration>

2.新建跨域请求测试项目CrossDomainRequestTest

主要文件如下：

1.CrossDomainRequestHandler.htm 跨域请求*.handler获取josn格式数据测试页，代码如下：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    <html xmlns="http://www.w3.org/1999/xhtml" >  
    <head>  
        <title></title>  
            <mce:script type="text/javascript" language="javascript" src="js/jquery-1.4.4.js" mce_src="js/jquery-1.4.4.js"></mce:script>  
        <mce:script type="text/javascript" language="javascript" src="js/jquery-1.4.4.js" mce_src="js/jquery-1.4.4.js"></mce:script>  
        <mce:script type="text/javascript" language="javascript"><!--  
            $(document).ready(function() {  
    //        var clientUrl = "http://localhost:4508/Handler.ashx?jsoncallback=?";  
            var clientUrl = "http://192.168.120.179:8086/Handler.ashx?jsoncallback=?"  
            var currentCity = "哈尔滨";  
            $.ajax({  
                url: clientUrl,  
                dataType: "jsonp",  
                    data : {city : currentCity},  
                    success : OnSuccess,  
                    error : OnError  
                });  
            });  
            function OnSuccess(json) {  
                $("#data").html("城市：" + json.city + "，时间：" + json.dateTime);  
            }  
            function OnError(XMLHttpRequest, textStatus, errorThrown) {  
                targetDiv = $("#data");  
                if (errorThrown || textStatus == "error" || textStatus == "parsererror" || textStatus == "notmodified") {  
                    targetDiv.replaceWith("请求数据时发生错误！");  
                    return;  
                }  
                if (textStatus == "timeout") {  
                    targetDiv.replaceWith("请求数据超时！");  
                    return;  
                }  
            }  
          
    // --></mce:script>  
    </head>  
    <body>  
    <div id="data"></div>  
    </body>  
    </html>

2.CrossDomainRequestWebService.htm 跨域请求WebService *.asmx获取josn格式数据测试页，代码如下:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    <html xmlns="http://www.w3.org/1999/xhtml" >  
    <head>  
        <title></title>  
            <mce:script type="text/javascript" language="javascript" src="js/jquery-1.4.4.js" mce_src="js/jquery-1.4.4.js"></mce:script>  
        <mce:script type="text/javascript" language="javascript"><!--  
            $(document).ready(function() {  
    //            var clientUrl = "http://localhost:4508/WebService.asmx/HelloWorld?jsoncallback=?";  
                var clientUrl = "http://192.168.120.179:8086/WebService.asmx/HelloWorld?jsoncallback=?";  
                var currentCity = "哈尔滨";  
                $.getJSON(  
                    clientUrl,  
                    { city: currentCity },  
                    function(json) {  
                        $("#data").html("城市：" + json.city + "，时间：" + json.dateTime);  
                    }  
                );  
            });  
            function OnSuccess(responseData) {  
                $("#data").html(responseData.city);  
            }  
            function OnError(XMLHttpRequest, textStatus, errorThrown) {  
                targetDiv = $("#data");  
                if (errorThrown || textStatus == "error" || textStatus == "parsererror" || textStatus == "notmodified") {  
                    targetDiv.replaceWith("请求数据时发生错误！");  
                    return;  
                }  
                if (textStatus == "timeout") {  
                    targetDiv.replaceWith("请求数据超时！");  
                    return;  
                }  
            }  
          
    // --></mce:script>  
    </head>  
    <body>  
    <div id="data"></div>  
    </body>  
    </html>