JSONP
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 = "tom@gmail.com" }; Person p2 = new Person { Name = "Jack", Age = 23, Country = "UK", Gender = "Male", Email = "jack@gmail.com" }; Person p3 = new Person { Name = "Eden", Age = 25, Country = "Canada", Gender = "Female", Email = "eden@gmail.com" }; Person p4 = new Person { Name = "Li Hua", Age = 29, Country = "China", Gender = "Male", Email = "lihui@163.com" }; Person p5 = new Person { Name = "Lvo", Age = 40, Country = "US", Gender = "Male", Email = "lvo@gmail.com" }; 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>
