在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之过滤元素操作小结
Nov 30 Javascript
JavaScript中的cacheStorage使用详解
Jul 29 Javascript
jQuery插件学习教程之SlidesJs轮播+Validation验证
Jul 12 Javascript
HTML页面定时跳转方法解析(2种任选)
Dec 22 Javascript
详解vue组件化开发-vuex状态管理库
Apr 10 Javascript
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
Apr 27 jQuery
简化版的vue-router实现思路详解
Oct 19 Javascript
vue生命周期与钩子函数简单示例
Mar 13 Javascript
element-ui tooltip修改背景颜色和箭头颜色的实现
Dec 16 Javascript
npm qs模块使用详解
Feb 07 Javascript
Vue绑定用户接口实现代码示例
Nov 04 Javascript
浅谈es6中的元编程
Dec 01 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
session在php5.3中的变化 session_is_registered() is deprecated in
2013/11/12 PHP
php投票系统之增加与删除投票(管理员篇)
2016/07/01 PHP
php 数组处理函数extract详解及实例代码
2016/11/23 PHP
漂亮的thinkphp 跳转页封装示例
2019/10/16 PHP
PHP数据源架构模式之表入口模式实例分析
2020/01/23 PHP
PHP实现图片防盗链破解操作示例【解决图片防盗链问题/反向代理】
2020/05/29 PHP
网页广告中JS代码的信息监听示例
2014/04/02 Javascript
Javascript实现禁止输入中文或英文的例子
2014/12/09 Javascript
js实现九宫格图片半透明渐显特效的方法
2015/02/16 Javascript
jquery+php实现滚动的数字特效
2015/11/29 Javascript
JS实现的表格行上下移动操作示例
2016/08/03 Javascript
javascript实现文字无缝滚动效果
2017/08/26 Javascript
基于原生js运动方式关键点的总结(推荐)
2017/10/01 Javascript
Vue修改mint-ui默认样式的方法
2018/02/03 Javascript
原生JS实现列表子元素顺序反转的方法分析
2018/07/02 Javascript
Vue登录主页动态背景短视频制作
2019/09/21 Javascript
环形加载进度条封装(Vue插件版和原生js版)
2019/12/04 Javascript
JS实现audio音频剪裁剪切复制播放与上传(步骤详解)
2020/07/28 Javascript
代码块高亮可复制显示js插件highlight.js+clipboard.js整合
2021/02/15 Javascript
用smtplib和email封装python发送邮件模块类分享
2014/02/17 Python
基于pandas将类别属性转化为数值属性的方法
2018/07/25 Python
Python发送邮件测试报告操作实例详解
2018/12/08 Python
使用PYTHON解析Wireshark的PCAP文件方法
2019/07/23 Python
用python wxpy管理微信公众号并利用微信获取自己的开源数据
2019/07/30 Python
python使用信号量动态更新配置文件的操作
2020/04/01 Python
python数据类型强制转换实例详解
2020/06/22 Python
Python实现简单的猜单词小游戏
2020/10/28 Python
python 使用OpenCV进行简单的人像分割与合成
2021/02/02 Python
python 装饰器重要在哪
2021/02/14 Python
介绍一下Linux内核的排队自旋锁
2014/08/27 面试题
简述Linux文件系统通过i节点把文件的逻辑结构和物理结构转换的工作过程
2016/01/06 面试题
《蚂蚁和蝈蝈》教学反思
2014/02/24 职场文书
企业安全生产承诺书
2014/05/22 职场文书
2015年电工工作总结
2015/04/10 职场文书
golang生成并解析JSON
2022/04/14 Golang
教你如何用cmd快速登录服务器
2022/06/10 Servers