在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 相关文章推荐
简单常用的幻灯片播放实现代码
Sep 25 Javascript
JS+CSS设置img在DIV中只显示Img垂直居中的部分
Oct 24 Javascript
js实现单行文本向上滚动效果实例代码
Nov 28 Javascript
理解JavaScript原型链
Oct 25 Javascript
Node.js readline模块与util模块的使用
Mar 01 Javascript
Vue cli3 库模式搭建组件库并发布到 npm的流程
Oct 12 Javascript
Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解
Jan 18 Javascript
vue使用localStorage保存登录信息 适用于移动端、PC端
May 27 Javascript
javascript for循环性能测试示例
Aug 07 Javascript
java实现单链表增删改查的实例代码详解
Aug 30 Javascript
AngularJs的$http发送POST请求,php无法接收Post的数据问题及解决方案
Aug 13 Javascript
微信小程序使用前置摄像头拍照
Oct 22 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中通过正则表达式下载内容中的远程图片的函数代码
2012/01/10 PHP
用PHP书写安全的脚本代码
2012/02/05 PHP
PHP中extract()函数的定义和用法
2012/08/17 PHP
简单解决新浪SAE无法上传文件的问题
2015/05/13 PHP
JQuery 获得绝对,相对位置的坐标方法
2010/02/09 Javascript
初识JQuery 实例一(first)
2011/03/16 Javascript
js 实现图片预加载(js操作 Image对象属性complete ,事件onload 异步加载图片)
2011/03/25 Javascript
jquery获得下拉框值的代码
2011/08/13 Javascript
自己用jQuery写了一个图片的马赛克消失效果
2014/05/04 Javascript
Enter回车切换输入焦点实现思路与代码兼容各大浏览器
2014/09/01 Javascript
详解JavaScript中void语句的使用
2015/06/04 Javascript
javascript中undefined与null的区别
2015/08/16 Javascript
JS实现的另类手风琴效果网页内容切换代码
2015/09/08 Javascript
JavaScript实现点击按钮字体放大、缩小
2016/02/29 Javascript
Node.js的基本知识简单汇总
2016/09/19 Javascript
jQuery滚动监听实现商城楼梯式导航效果
2017/03/06 Javascript
Js中将Long转换成日期格式的实现方法
2018/06/05 Javascript
vue组件中的样式属性scoped实例详解
2018/10/30 Javascript
JS实现简单的表格增删
2020/01/16 Javascript
Nuxt的路由动画效果案例
2020/11/06 Javascript
[49:15]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第二场 1月19日
2021/03/11 DOTA
python Django连接MySQL数据库做增删改查
2013/11/07 Python
跟老齐学Python之for循环语句
2014/10/02 Python
python 环境变量和import模块导入方法(详解)
2017/07/11 Python
python 列表,数组,矩阵两两转换tolist()的实例
2018/04/04 Python
pyshp创建shp点文件的方法
2018/12/31 Python
python自动发送测试报告邮件功能的实现
2019/01/22 Python
Python MongoDB 插入数据时已存在则不执行,不存在则插入的解决方法
2019/09/24 Python
python 表格打印代码实例解析
2019/10/12 Python
python 如何停止一个死循环的线程
2020/11/24 Python
BOSE德国官网:尽探索之力,享音乐之极
2016/12/11 全球购物
Nike法国官方网站:Nike.com FR
2018/07/22 全球购物
护士专业推荐信
2013/11/02 职场文书
教师年度考核自我评鉴
2015/08/11 职场文书
优秀教师主要事迹材料
2015/11/04 职场文书
2016年度继续教育学习心得体会
2016/01/19 职场文书