在jquery中的ajax方法怎样通过JSONP进行远程调用


Posted in Javascript onApril 04, 2014

关于JSONP的概念和为什么要使用JSONP网上已经有很多教程,这一节主要演示下在JQUERY中的ajax方法怎样通过JSONP进行远程调用

首先介绍下$.ajax的参数
type:请求方式 GET/POST
url:请求地址
async:布尔类型,默认为true 表示请求是否为异步,如果为false表示为同步。
dataType:返回的数据类型
jsonp:传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)
jsonpCallback:自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据
success:调用成功执行的函数
error:异常处理函数

1.示例1
服务器端我们采用MVC的ACTION来返回数据

public class HomeController : Controller 
{ 
// 
// GET: /Home/ public ActionResult Index() 
{ 
returnView(); 
} 
public ActionResult ReturnJson() 
{ 
string callback = Request.QueryString["callback"]; 
string json = "{'name':'张三','age':'20'}"; 
string result = string.Format("{0}({1})", callback, json); 
returnContent(result); 
} 
}

客户端使用jsonp来传输数据
@{ 
ViewBag.Title = "Index"; 
Layout = "~/Views/Shared/_Layout.cshtml"; 
} <script src="~/Scripts/jquery-1.7.1.min.js"type="text/javascript"> </script> 
<script type="text/javascript"> 
functionSendData() 
{ 
$.ajax({ 
type: "get", 
async: false, 
url: "/home/ReturnJson", 
dataType: "jsonp", 
success: function(data){ 
alert(data.name); 
}, 
error: function(){ 
alert('fail'); 
} 
}); 
} 
</script> 
<input type="button" value="提交" onclick="SendData();"/>

点击提交按钮后,发现服务器端的Request.QueryString["callback"]返回一个随机函数名。这样就被设置成JSONP格式来传递数据了

2.自定义函数名
可以在传递过程中自定义函数名,只要使用jsonpCallback参数就可以了。
jsonp:表示传递的参数,默认为callback,我们也可以自定义,服务器段通过此参数,获取自定义的函数名称,服务器这样获取 Request.QueryString["callback"]
jsonpCallback表示传递的参数值,也就是回调的函数名称,这是自定义的名称。

<script type="text/javascript"> 
functionSendData() { 
$.ajax({ 
type: "get", 
async: false, 
url: "/home/ReturnJson", 
dataType: "jsonp", 
jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback) 
jsonpCallback: "receive",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据 
success: function(data) { 
alert(data.name); 
}, 
error: function() { 
alert('fail'); 
} 
}); 
} functionreceive(data) { 
alert(data.age); 
} 
</script>
Javascript 相关文章推荐
jquery ready()的几种实现方法小结
Jun 18 Javascript
深入理解JavaScript系列(41):设计模式之模板方法详解
Mar 04 Javascript
JQuery实现动态适时改变字体颜色的方法
Mar 10 Javascript
完美实现八种js焦点轮播图(下篇)
Apr 20 Javascript
jquery插件canvaspercent.js实现百分比圆饼效果
Jul 18 jQuery
vue iView 上传组件之手动上传功能
Mar 16 Javascript
这应该是最详细的响应式系统讲解了
Jul 22 Javascript
Vue 实现v-for循环的时候更改 class的样式名称
Jul 17 Javascript
vue data对象重新赋值无效(未更改)的解决方式
Jul 24 Javascript
在Angular项目使用socket.io实现通信的方法
Jan 05 Javascript
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
Jan 13 Vue.js
vue组件冲突之引用另一个组件出现组件不显示的问题
Apr 13 Vue.js
javascript中的循环语句for语句深入理解
Apr 04 #Javascript
利用jquery动画特效和css打造的侧边弹出垂直导航
Apr 04 #Javascript
调试代码导致IE出错的避免方法
Apr 04 #Javascript
javascript写的一个模拟阅读小说的程序
Apr 04 #Javascript
js 显示base64编码的二进制流网页图片
Apr 04 #Javascript
jquery scroll()区分横向纵向滚动条的方法
Apr 04 #Javascript
jQuery scroll事件实现监控滚动条分页示例
Apr 04 #Javascript
You might like
php 过滤危险html代码
2009/06/29 PHP
php5 apache 2.2 webservice 创建与配置(java)
2011/01/27 PHP
PHP url 加密解密函数代码
2011/08/26 PHP
PHP使用range协议实现输出文件断点续传代码实例
2014/07/04 PHP
PHP实现的增强性mhash函数
2015/05/27 PHP
php+ajax制作无刷新留言板
2015/10/27 PHP
PHP输出XML格式数据的方法总结
2017/02/08 PHP
如果文字过长,则将过长的部分变成省略号显示
2006/06/26 Javascript
JavaScript asp.net 获取当前超链接中的文本
2009/04/14 Javascript
Prototype 工具函数 学习
2009/07/23 Javascript
Js+Flash实现访问剪切板操作
2012/11/20 Javascript
js 控制下拉菜单刷新的方法
2013/03/03 Javascript
Javascript实现重力弹跳拖拽运动效果示例
2013/06/28 Javascript
jquery实现焦点图片随机切换效果的方法
2015/03/12 Javascript
js实现漂浮回顶部按钮实例
2015/05/06 Javascript
JavaScript实现Iterator模式实例分析
2015/06/09 Javascript
KnockoutJS 3.X API 第四章之click绑定
2016/10/10 Javascript
Angular的MVC和作用域
2016/12/26 Javascript
js随机生成一个验证码
2017/06/01 Javascript
mpvue写一个CPASS小程序的示例
2018/09/04 Javascript
浅谈Javascript常用正则表达式应用
2019/03/08 Javascript
微信小程序从注册账号到上架(图文详解)
2019/07/17 Javascript
Vue之beforeEach非登录不能访问的实现(代码亲测)
2019/07/18 Javascript
python进阶教程之函数对象(函数也是对象)
2014/08/30 Python
Ubuntu下创建虚拟独立的Python环境全过程
2017/02/10 Python
python3.x实现base64加密和解密
2019/03/28 Python
对python中url参数编码与解码的实例详解
2019/07/25 Python
如何用OpenCV -python3实现视频物体追踪
2019/12/04 Python
PyCharm MySQL可视化Database配置过程图解
2020/06/09 Python
ShellScript面试题一则-ShellScript编程
2014/03/05 面试题
有兼职工作经历的简历自我评价
2014/03/07 职场文书
好的旅游活动方案
2014/08/19 职场文书
厨师长岗位职责范本
2014/08/25 职场文书
出国签证在职证明范本
2014/11/24 职场文书
2015年安置帮教工作总结
2015/05/22 职场文书
修改Nginx配置返回指定content-type的方法
2022/09/23 Servers