JSONP的小示例
jQuery中JSONP的两种实现方式:
都很简单,所以直接上代码!
前台代码如下:
<script type="text/javascript"> $(function () {
alert("start...");
// 第一种方式
$.ajax({ type: "get", url: "http://localhost:9524/Home/ProcessCallback", // 这个就是不同于当前域的一个URL地址,这里单纯演示,所以同域 dataType: "jsonp", jsonp: "jsonpcallback", // 指定回调函数,这里名字可以为其他任意你喜欢的,比如callback,不过必须与下一行的GET参数一致 data: "name=jxq&email=feichexia@yahoo.com.cn&jsonpcallback=?", // jsonpcallback与上面的jsonp值一致 success: function (json) { alert(json.Name); alert(json.Email);
}
});
// 第二种方式
$.getJSON("http://localhost:9524/Home/ProcessCallback?name=xiaoqiang&email=jxqlovejava@gmail.com&jsonpcallback=?", function(json) {
alert(json.Name);
alert(json.Email);
}
);
alert("end...");
}); </script>
后台Action代码如下:
public string ProcessCallback(string name, string email)
{
if (Request.QueryString != null)
{
string jsonpCallback = Request.QueryString["jsonpcallback"];
var user = new User
{
Name = name,
Email = email
};
return jsonpCallback + "(" + new JavaScriptSerializer().Serialize(user) + ")";
}
return "error";
}
运行后就可以看到结果了。我追踪了下后台ProcessCallback代码,如下图:
可以看到jsonCallback的值为"jQuery17104721....",它是前端传给远程服务器后台Action的。这里jQuery171..表示的是jQuery的版本,可以简单地将这个理解为JSONP类型请求回调函数,jQuery在我们每次指定Ajax请求方式为JSONP时都会生成这么一个JSONP回调函数。虽然jQuery会自动帮我们生成一个回调函数,但是我们也可以通过设置jsonpCallback参数为jsonp请求定制一个我们自己的回调函数。
第一种方式下面这三行代码设定了JSONP请求方式:
dataType: "jsonp",
jsonp: "jsonpcallback", // 指定回调函数,这里名字可以为其他任意你喜欢的,比如callback,不过必须与下一行的GET参数一致
data: "name=jxq&email=feichexia@yahoo.com.cn&jsonpcallback=?", // jsonpcallback与上面的jsonp值一致
第二种方式则直接在GET参数后面带上jsonpcallback=?来标识。
我们可以推断这么做以后,jQuery内部机制就帮我们绕过了浏览器的跨域访问限制,然后就可以像正常请求同域Action一样请求跨域Action了。
最后返回的是一个函数表达式:
return jsonCallback + "(" + new JavaScriptSerializer().Serialize(user) + ")";
这样返回给前端的就是类似这种jQuery17104721....('{Name:"jxq", Email:"feichexia@yahoo.com.cn"}'),它一返回到前端就会执行,得到的是一个JavaScript对象,对象有两个属性:Name和Email,所以我们可以直接调用json.Name和json.Email
JSONP的小示例的更多相关文章
- ReactNative新手学习之路06滚动更新ListView数据的小示例
本节带领大家学习使用ListView 做一个常用的滚动更新数据示例: 知识点: initialListSize={200} 第一次加载多少数据行 onEndReached={this.onEndRea ...
- MVC客户端验证的小示例
MVC客户端验证的小示例 配置客户端验证的可用性: <configuration> <appSettings> <add key="ClientValidat ...
- 【.Net】Socket小示例
引言 项目中用到了Socket,这里做个控制台小示例记录一下. Client 客户端的Receive用了异步方法,保持长连接,可以随时发送消息和响应服务端的消息,如下 static string Cl ...
- CentOS7 安装 RocketMQ 实践和小示例
CentOS7 安装 RocketMQ 实践和小示例 1.通过 SSH 工具(比如 XShell)连接到 CentOS7 服务器上: 2.进入到 /usr/local 目录中: cd /usr/loc ...
- Highcharts入门小示例
一.创建条形图 1.创建div容器 <div id="container" style="min-width:800px;height:400px"> ...
- NHibernate 集合映射基础(第四篇) - 一对一、 一对多、多对多小示例
映射文件,用于告诉NHibernate数据库里的表.列于.Net程序中的类的关系.因此映射文件的配置非常重要. 一.一对一 NHibernate一对一关系的配置方式使用<one-to-one&g ...
- 跨域常见解决方案jsonp,cors示例
方案 JSONP jsonp需要后端进行配置,并且前端需要动态生成script标签通过callback调用函数进行操作的跨域解决方案 不建议使用该方案: 前后端均需进行配置处理,增加了工作量 ...
- 【python小示例】简易彩票中奖模拟
咱自己写个彩票程序,成功亏掉3个亿 今天突发奇想,自己设计一个小程序,模拟彩票中奖,看看如果自己有个彩票公司,能挣钱吗?代码如下: # -*- utf-8 -*- """ ...
- 关于 JSONP跨域示例
1.脚本文件Jsonp,代码如下: $(function () { TestJsonP(); function TestJsonP() { var xhrurl = 'http://localhost ...
随机推荐
- jquery 生成 html 绑定
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- TensorFlow
转自:http://blog.csdn.net/stdcoutzyx/article/details/51645396 本片博文是参考文献[1]的阅读笔记,特此声明 TensorFlow,以下简称TF ...
- Cygwin的安装与配置
去cygwin的官网去下载: 安装: 初次安装 卸载 使用过程中安装新的工具包 参考http://blog.csdn.net/superbinbin1/article/details/10147421 ...
- codeforce ABBYY Cup 3.0 - Finals (online version) B2. Shave Beaver! 线段树
B2. Shave Beaver! The Smart Beaver has recently designed and built an innovative nanotechnologic a ...
- 湖南省第十二届大学生计算机程序设计竞赛 A 2016
1803: 2016 Description 给出正整数 n 和 m,统计满足以下条件的正整数对 (a,b) 的数量: 1. 1≤a≤n,1≤b≤m; 2. a×b 是 2016 的倍数. In ...
- java的分层开发
既然是分层开发,首先我们需要知道的是分为那几个层,并且是干什么的? 1.实体层(entity) 对应数据库中的一张表,有了它可以降低耦合性,同时也是数据的载体. 2.数据访问对象(data acces ...
- 【SSH】 之 Struts2
(一)Struts2是什么? Struts2是一个基于MVC设计模式的Web应用框架,它本质上相当于一个servlet,在MVC设计模式中,Struts2作为控制器(Controller)来建立模型与 ...
- How Kafka’s Storage Internals Work
In this post I'm going to help you understand how Kafka stores its data. I've found understanding th ...
- Nginx支持多站点配置小结
如何配置 web 服务器才能在一个 VPS 上放置多个网站/博客呢?如何通过一个 IP 访问多个站点/域名呢?这是大多数 web 服务器支持的 virtual hosting 功能.即一个IP对应多个 ...
- 提取Windows用户密钥文件cachedump
提取Windows用户密钥文件cachedump Windows系统将用户信息和密钥存储在系统存档文件(System hive)和安全存档(Security hive)中.只要提取这些内容,就可以 ...