在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 相关文章推荐
用js实现控制内容的向上向下滚动效果
Jun 26 Javascript
javascript 尚未实现错误解决办法
Nov 27 Javascript
jquery last-child 列表最后一项的样式
Jan 22 Javascript
javascript针对DOM的应用分析(四)
Apr 15 Javascript
jquery 日期控件datepicker属性详细解析
Nov 08 Javascript
JavaScript字符串对象的concat方法实例(用于连接两个或多个字符串)
Oct 16 Javascript
jQuery实现按键盘方向键翻页特效
Mar 18 Javascript
JavaScript中window.open用法实例详解
Apr 15 Javascript
深入理解setTimeout函数和setInterval函数
May 20 Javascript
如何解决hover在ie6中的兼容性问题
Dec 15 Javascript
解决Mac安装thrift因bison报错的问题
May 17 Javascript
Element Badge标记的使用方法
Jul 27 Javascript
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
PHPlet在Windows下的安装
2006/10/09 PHP
php eval函数用法 PHP中eval()函数小技巧
2012/10/31 PHP
php中让上传的文件大小在上传前就受限制的两种解决方法
2013/06/24 PHP
PHP $_FILES中error返回值详解
2014/01/30 PHP
漂亮的thinkphp 跳转页封装示例
2019/10/16 PHP
IE 缓存策略的BUG的解决方法
2007/07/21 Javascript
jquery-easyui关闭tab自动切换到前一个tab
2010/07/29 Javascript
jquery easyui使用心得
2014/07/07 Javascript
全面解析Bootstrap表单使用方法(表单控件状态)
2015/11/24 Javascript
Prototype框架详解
2015/11/25 Javascript
Javascript实现图片轮播效果(二)图片序列节点的控制实现
2016/02/17 Javascript
Angular.JS学习之依赖注入$injector详析
2016/10/20 Javascript
Vuex之理解state的用法实例
2017/04/19 Javascript
ztree实现权限横向显示功能
2017/05/20 Javascript
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
2017/12/19 Javascript
vue删除html内容的标签样式实例
2018/09/13 Javascript
每天学点Vue源码之vm.$mount挂载函数
2019/03/11 Javascript
微信公众平台 发送模板消息(Java接口开发)
2019/04/17 Javascript
Vue CL3 配置路径别名详解
2019/05/30 Javascript
Vue实现开心消消乐游戏算法
2019/10/22 Javascript
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
2020/09/02 Javascript
Vue+Java+Base64实现条码解析的示例
2020/09/23 Javascript
Python完全新手教程
2007/02/08 Python
用python代码将tiff图片存储到jpg的方法
2018/12/04 Python
Python实现时间序列可视化的方法
2019/08/06 Python
Python常用模块os.path之文件及路径操作方法
2019/12/03 Python
html5中如何将图片的绝对路径转换成文件对象
2018/01/11 HTML / CSS
HTML5 通过Vedio标签实现视频循环播放的示例代码
2020/08/05 HTML / CSS
介绍一下Java中的Class类
2015/04/10 面试题
药学专业大学生自荐信
2013/09/28 职场文书
职高毕业生自我鉴定
2013/10/21 职场文书
综合办公室个人的自我评价
2013/12/22 职场文书
《富饶的西沙群岛》教学反思
2014/04/09 职场文书
优秀少先队工作者事迹材料
2014/05/13 职场文书
单位推荐信范文
2015/03/27 职场文书
调任通知
2015/04/21 职场文书