在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 相关文章推荐
Javascript 入门基础学习
Mar 10 Javascript
jQuery LigerUI 使用教程表格篇(1)
Jan 18 Javascript
Javascript节点关系实例分析
May 15 Javascript
图解Sublime Text3使用技巧
Dec 21 Javascript
JavaScript引用类型和基本类型详解
Jan 06 Javascript
Easyui form combobox省市区三级联动
Jan 13 Javascript
总结jQuery插件开发中的一些要点
May 16 Javascript
Vue.js系列之vue-router(上)(3)
Jan 03 Javascript
编写更好的JavaScript条件式和匹配条件的技巧(小结)
Jun 27 Javascript
laypage.js分页插件使用方法详解
Jul 27 Javascript
element-ui 远程搜索组件el-select在项目中组件化的实现代码
Dec 04 Javascript
微信小程序实现横向滚动导航栏效果
Dec 12 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执行速度全攻略(上)
2006/10/09 PHP
PHP判断是否有Get参数的方法
2014/05/05 PHP
ThinkPHP使用心得分享-分页类Page的用法
2014/05/15 PHP
php对文件进行hash运算的方法
2015/04/03 PHP
JMenuTab简单使用说明
2008/03/13 Javascript
firefox下对ajax的onreadystatechange的支持情况分析
2009/12/14 Javascript
JavaScript XML和string相互转化实现代码
2011/07/04 Javascript
解决js正则匹配换行问题实现代码
2012/12/10 Javascript
jquery滚动组件(vticker.js)实现页面动态数据的滚动效果
2013/07/03 Javascript
一个JavaScript处理textarea中的字符成每一行实例
2014/09/22 Javascript
详谈javascript中的cookie
2015/06/03 Javascript
Vue数据驱动模拟实现3
2017/01/11 Javascript
socket.io学习教程之深入学习篇(三)
2017/04/29 Javascript
JavaScript生成图形验证码
2020/08/24 Javascript
js逆向解密之网络爬虫
2019/05/30 Javascript
js计算最大公约数和最小公倍数代码实例
2019/09/11 Javascript
离线安装Pyecharts的步骤以及依赖包流程
2020/04/23 Python
python数据挖掘需要学的内容
2019/06/23 Python
pytorch 自定义数据集加载方法
2019/08/18 Python
用Python绘制漫步图实例讲解
2020/02/26 Python
python实现梯度法 python最速下降法
2020/03/24 Python
CSS3田字格列表的样式编写方法
2018/11/22 HTML / CSS
HTML5添加禁止缩放功能
2017/11/03 HTML / CSS
Mio Skincare英国官网:身体紧致及孕期身体护理
2018/08/19 全球购物
试解释COMMIT操作和ROLLBACK操作的语义
2014/07/25 面试题
什么是View State?
2013/01/27 面试题
小学教育毕业生自荐信
2013/11/18 职场文书
九年级科学教学反思
2014/01/29 职场文书
元旦联欢会主持词
2014/03/26 职场文书
我的老师教学反思
2014/05/01 职场文书
企业管理标语
2014/06/10 职场文书
骨干教师个人总结
2015/02/11 职场文书
2015年收银员个人工作总结
2015/04/01 职场文书
班级班风口号大全
2015/12/25 职场文书
python数据库批量插入数据的实现(executemany的使用)
2021/04/30 Python
分享node.js实现简单登录注册的具体代码
2022/04/26 NodeJs