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

1.新建数据源项目CrossDomain

    主要文件如下：

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

   

[csharp] view
plain copy

 print?

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的响应，代码如下：

 

[csharp] view
plain copy

 print?

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获取数据的关键）具体如下：

 

[html] view
plain copy

 print?

<?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格式数据测试页，代码如下：

[html] view
plain copy

 print?

<!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格式数据测试页，代码如下:

[html] view
plain copy

 print?

<!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>