JSONP

浏览数：53 / 时间：2015年06月09日

01.先定义一个Person类

 /// <summary>
    /// 包含用户的基本信息
    /// </summary>
    public class Person
    {
        /// <summary>
        /// 获取或设置用户名
        /// </summary>
        public string Name { get; set; }

        /// <summary>
        /// 获取或设置用户年龄
        /// </summary>
        public int Age { get; set; }

        /// <summary>
        /// 获取或设置用户性别
        /// </summary>
        public string Gender { get; set; }

        /// <summary>
        /// 获取或设置用户国籍
        /// </summary>
        public string Country { get; set; }

        /// <summary>
        /// 获取或设置用户电子邮箱
        /// </summary>
        public string Email { get; set; }
    }

02.为Person集合添加数据

  public static List<Person> GetPersons()
        {
            List<Person> ps = new List<Person>();
            Person p1 = new Person { Name = "Tom", Age = 32, Country = "US", Gender = "Male", Email = "[email protected]" };
            Person p2 = new Person { Name = "Jack", Age = 23, Country = "UK", Gender = "Male", Email = "[email protected]" };
            Person p3 = new Person { Name = "Eden", Age = 25, Country = "Canada", Gender = "Female", Email = "[email protected]" };
            Person p4 = new Person { Name = "Li Hua", Age = 29, Country = "China", Gender = "Male", Email = "[email protected]" };
            Person p5 = new Person { Name = "Lvo", Age = 40, Country = "US", Gender = "Male", Email = "[email protected]" };
            ps.Add(p1);
            ps.Add(p2);
            ps.Add(p3);
            ps.Add(p4);
            ps.Add(p5);
            return ps;
        }

03.服务端代码

 public void ProcessRequest(HttpContext context)
        {
            string callbackFun = context.Request["CallBackFun"]; //客户端执行的方法名称
            List<Person> person = PersonRepository.GetPersons();
            string json = JsonConvert.SerializeObject(person); //Json.Net序列化
            string fun = callbackFun + "(" + json + ")";
            context.Response.Write(fun);

        }

04.客户端代码

<!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>
    <script type="text/javascript">
        function doAjax(data) {
            for (var key in data) {
                document.writeln(data[key].Name);
                document.writeln(data[key].Age);
                document.writeln(data[key].Gender);
                document.writeln(data[key].Country);
                document.writeln(data[key].Email);
                document.writeln("<br/>");
            }
        }
        function doAjaxJQ(data) {
            for (var key in data) {
                alert(data[key].Name);
            }
        }
        function GetAreaByIP(data) {
            alert(data.latitude);
        }
    </script>
    <script type="text/javascript" src="http://localhost:8092/c01test.ashx?CallBackFun=doAjax">
        //Script 标签请求
    </script>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#btnDoAjax").click(function () {
                $.ajax(
                {
                    url: "http://localhost:8092/c01test.ashx",
                    type: "GET",
                    dataType: "jsonp",
                    jsonp: "CallBackFun", //传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
                    jsonpCallback: "doAjaxJQ", //自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
                    success: function (data) {
                        //console.log(arguments)
                    }
                });
            });

            $("#btnIP").click(function () {
                $.ajax({
                    url: "http://api.wipmania.com/jsonp",
                    type: "Get",
                    dataType: "jsonp",
                    jsonpCallback: "GetAreaByIP",
                    success: function (data) {

                    }
                });
            });
        });
    </script>
</head>
<body>
    <input type="button" id="btnDoAjax" value="JQ版的JsonP" />
    <input type="button" id="btnIP" value="根据IP获取地区" />
</body>
</html>