在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 动态创建元素的方式介绍及应用
Apr 21 Javascript
JavaScript实现跨浏览器的添加及删除事件绑定函数实例
Aug 04 Javascript
JS模拟bootstrap下拉菜单效果实例
Jun 17 Javascript
js无提示关闭浏览器窗口的两种方法分析
Nov 06 Javascript
获取JavaScript异步函数的返回值
Dec 21 Javascript
JS实现全屏的四种写法
Dec 30 Javascript
关于在mongoose中填充外键的方法详解
Aug 14 Javascript
js实现轮播图的两种方式(构造函数、面向对象)
Sep 30 Javascript
微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】
Dec 06 Javascript
使用vue-router在Vue页面之间传递数据的方法
Jul 15 Javascript
layui+SSM的数据表的增删改实例(利用弹框添加、修改)
Sep 27 Javascript
AudioContext 实现音频可视化(web技术分享)
Feb 24 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 读取文本文件内容并分页显示
2016/01/02 PHP
PHP面试常用算法(推荐)
2016/07/22 PHP
PHP迭代器和迭代的实现与使用方法分析
2018/04/19 PHP
PHP使用redis位图bitMap 实现签到功能
2019/10/08 PHP
javascript 混合的构造函数和原型方式,动态原型方式
2009/12/07 Javascript
JQuery实现样式设置、追加、移除与切换的方法
2015/06/11 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
2015/12/24 Javascript
javascript正则表达式总结
2016/02/29 Javascript
JS实现图片高斯模糊切换效果的焦点图实例
2017/01/21 Javascript
Vue.js 利用v-for中的index值实现隔行变色
2018/08/01 Javascript
微信小程序如何实现全局重新加载
2019/06/05 Javascript
JavaScript实现鼠标经过表格某行时此行变色
2020/11/20 Javascript
[26:50]2018完美盛典DOTA2表演赛
2018/12/17 DOTA
[07:25]DOTA2-DPC中国联赛2月5日Recap集锦
2021/03/11 DOTA
Python socket编程实例详解
2015/05/27 Python
Python简单删除列表中相同元素的方法示例
2017/06/12 Python
python机器人行走步数问题的解决
2018/01/29 Python
TensorFlow深度学习之卷积神经网络CNN
2018/03/09 Python
使用python Fabric动态修改远程机器hosts的方法
2018/10/26 Python
Python中的元组介绍
2019/01/28 Python
Python 异常的捕获、异常的传递与主动抛出异常操作示例
2019/09/23 Python
Python编程快速上手——PDF文件操作案例分析
2020/02/28 Python
树莓派升级python的具体步骤
2020/07/05 Python
python爬虫使用requests发送post请求示例详解
2020/08/05 Python
Dr.Jart+美国官网:韩国药妆品牌
2019/01/18 全球购物
Python使用openpyxl复制整张sheet
2021/03/24 Python
小学教师国培感言
2014/02/08 职场文书
2014年父亲节活动方案
2014/03/06 职场文书
公司人事专员岗位职责
2014/08/11 职场文书
工作粗心大意检讨书
2014/09/18 职场文书
2014年教育实习工作总结
2014/11/22 职场文书
工会积极分子个人总结
2015/03/03 职场文书
房地产公司财务总监岗位职责
2015/04/03 职场文书
学生会任命书范本
2015/09/21 职场文书
有关信念的名言语录集锦
2019/12/06 职场文书
springBoot基于webSocket实现扫码登录
2021/06/22 Java/Android