在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 蒙版进度条(结合图片)
Mar 10 Javascript
javascript 伪数组实现方法
Oct 11 Javascript
使用jquery动态加载javascript以减少服务器压力
Oct 29 Javascript
JQuery仿小米手机抢购页面倒计时效果
Dec 16 Javascript
纯javascript实现图片延时加载方法
Aug 21 Javascript
jQuery的Read()方法代替原生JS详解
Nov 08 Javascript
JavaScript 事件对内存和性能的影响
Jan 22 Javascript
原生js实现吸顶效果
Mar 13 Javascript
JS实现的简单表单验证功能示例
Oct 13 Javascript
原生实现一个react-redux的代码示例
Jun 08 Javascript
浅谈webpack 四个核心概念之Entry
Jun 12 Javascript
微信小程序自定义组件components(代码详解)
Oct 21 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
php基于openssl的rsa加密解密示例
2016/07/11 PHP
yii2-GridView在开发中常用的功能及技巧总结
2017/01/07 PHP
详解配置 Apache 服务器支持 PHP 文件的解析
2017/02/15 PHP
PHP解决中文乱码
2017/04/28 PHP
Thinkphp5框架ajax接口实现方法分析
2019/08/28 PHP
用js自动判断浏览器分辨率的代码
2007/01/28 Javascript
javascript addBookmark 加入收藏 多浏览器兼容
2009/08/15 Javascript
input按钮的事件处理大全
2010/12/10 Javascript
无阻塞加载脚本分析[全]
2011/01/20 Javascript
JavaScript 大数据相加的问题
2011/08/03 Javascript
javascript时间自动刷新实现原理与步骤
2013/01/06 Javascript
JavaScript动态插入script的基本思路及实现函数
2013/11/11 Javascript
node.js中的http.response.getHeader方法使用说明
2014/12/14 Javascript
表单中单选框添加选项和移除选项
2016/07/04 Javascript
JavaScript表单焦点自动切换代码
2016/07/24 Javascript
JavaScript 监控微信浏览器且自带返回按钮时间
2016/11/27 Javascript
AJAX和jQuery动态加载数据的实现方法
2016/12/05 Javascript
详解axios在vue中的简单配置与使用
2017/05/10 Javascript
原生JavaScript实现todolist功能
2018/03/02 Javascript
浅谈ElementUI中switch回调函数change的参数问题
2018/08/24 Javascript
vue 实现路由跳转时更改页面title
2019/11/05 Javascript
vue-router 路由传参用法实例分析
2020/03/06 Javascript
[02:41]《西雅图我们来了》2015国际邀请赛出征全记录
2015/07/23 DOTA
[03:48]大碗DOTA
2019/07/25 DOTA
十个Python程序员易犯的错误
2015/12/15 Python
python 实现在Excel末尾增加新行
2018/05/02 Python
使用anaconda的pip安装第三方python包的操作步骤
2018/06/11 Python
把csv文件转化为数组及数组的切片方法
2018/07/04 Python
python生成word合同的实例方法
2021/01/12 Python
英国时尚女装购物网站:Missguided
2018/08/23 全球购物
安全教育心得体会
2013/12/29 职场文书
国贸专业自荐信范文
2014/03/02 职场文书
大学军训感言1500字
2014/03/09 职场文书
竞选劳动委员演讲稿
2014/04/28 职场文书
2015年班干部工作总结
2015/04/29 职场文书
2016年大学生社区服务活动总结
2016/04/06 职场文书