在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 Ajax学习实例 向页面发出请求,返回XML格式数据
Mar 14 Javascript
优化javascript的执行效率一些方法总结
Dec 25 Javascript
javascript arguments使用示例
Dec 16 Javascript
整理Javascript函数学习笔记
Dec 01 Javascript
JavaScript设计模式开发中组合模式的使用教程
May 18 Javascript
Javascript 6里的4个新语法
Aug 25 Javascript
原生Javascript插件开发实践
Jan 18 Javascript
jquery实现倒计时小应用
Sep 19 jQuery
Vue-CLI3.x 设置反向代理的方法
Dec 06 Javascript
Vue路由模块化配置的完整步骤
Aug 14 Javascript
小程序开发之模态框组件封装
Apr 23 Javascript
Openlayers+EasyUI Tree动态实现图层控制
Sep 28 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 nl2br函数 将换行字符转成 &amp;lt;br&amp;gt;
2009/08/21 PHP
PHP防止跨域提交表单
2013/11/01 PHP
PHP延迟静态绑定示例分享
2014/06/22 PHP
深入解析PHP中foreach语句控制数组循环的用法
2015/11/30 PHP
浅析PHP类的反射来实现依赖注入过程
2018/02/06 PHP
js 图片轮播(5张图片)
2008/12/30 Javascript
利用javascript移动div层-javascript 拖动层
2009/03/22 Javascript
编写兼容IE和FireFox的脚本
2009/05/18 Javascript
给jqGrid数据行添加修改和删除操作链接(之一)
2011/11/04 Javascript
jsp js鼠标移动到指定区域显示选项卡离开时隐藏示例
2013/06/14 Javascript
Angularjs实现分页和分页算法的示例代码
2016/12/23 Javascript
利用three.js画一个3D立体的正方体示例代码
2017/11/19 Javascript
微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
2017/12/06 Javascript
使用proxy实现一个更优雅的vue【推荐】
2018/06/19 Javascript
vue  自定义组件实现通讯录功能
2018/09/30 Javascript
[01:04]不如跳舞!DOTA2新英雄玛尔斯的欢乐日常
2019/03/11 DOTA
python 实现归并排序算法
2012/06/05 Python
python框架django基础指南
2016/09/08 Python
Python生成数字图片代码分享
2017/10/31 Python
浅谈Python中的私有变量
2018/02/28 Python
Python实现的网页截图功能【PyQt4与selenium组件】
2018/07/12 Python
python通过文本在一个图中画多条线的实例
2020/02/21 Python
Python爬虫爬取有道实现翻译功能
2020/11/27 Python
css3弹性盒模型实例介绍
2013/05/27 HTML / CSS
西班牙手机之家:Phone House
2018/10/18 全球购物
有趣的流行文化T恤、马克杯、手机壳和更多:Look Human
2019/01/07 全球购物
幼儿园元旦亲子活动方案
2014/02/17 职场文书
无财产无子女离婚协议书范文
2014/09/14 职场文书
2014年客户经理工作总结
2014/11/20 职场文书
毕业实习计划书
2015/01/16 职场文书
工作表扬信
2015/01/17 职场文书
2015毕业实习推荐信
2015/03/23 职场文书
小学生手册家长意见
2015/06/03 职场文书
暗恋桃花源观后感
2015/06/12 职场文书
Python获取百度热搜的完整代码
2021/04/07 Python
Windows Server 2016 配置 IIS 的详细步骤
2022/04/28 Servers