在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系列(12) 变量对象(Variable Object)
Jan 16 Javascript
JQuery触发事件例如click
Sep 11 Javascript
js实现简单随机抽奖的方法
Jan 27 Javascript
js实现iGoogleDivDrag模块拖动层拖动特效的方法
Mar 04 Javascript
JQuery点击事件回到页面顶部效果的实现代码
May 24 Javascript
JavaScript 弹出子窗体并返回结果到父窗体的实现代码
May 28 Javascript
javascript回到顶部特效
Jul 30 Javascript
JavaScript实现经典排序算法之冒泡排序
Dec 28 Javascript
nuxt+axios实现打包后动态修改请求地址的方法
Apr 22 Javascript
详解js中的几种常用设计模式
Jul 16 Javascript
jdk1.8+vue elementui实现多级菜单功能
Sep 24 Javascript
webpack介绍使用配置教程详解webpack介绍和使用
Jun 25 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
德劲1107的电路分析与打磨
2021/03/02 无线电
php中DOMElement操作xml文档实例演示
2013/03/26 PHP
Chrome Web App开发小结
2014/09/04 PHP
在Win7 中为php扩展配置Xcache
2014/10/08 PHP
php命令行(cli)下执行PHP脚本文件的相对路径的问题解决方法
2015/05/25 PHP
ThinkPHP中session函数详解
2016/09/14 PHP
php删除一个路径下的所有文件夹和文件的方法
2018/02/07 PHP
PHP 访问数据库配置通用方法(json)
2018/05/20 PHP
ThinkPHP5框架中使用JWT的方法示例
2020/06/03 PHP
window.js 主要包含了页面的一些操作
2009/12/23 Javascript
详解AngularJS中ng-src指令的使用
2016/09/07 Javascript
vue项目常用组件和框架结构介绍
2017/12/24 Javascript
基于substring()和substr()的使用以及区别(实例讲解)
2017/12/28 Javascript
Vue组件化开发思考
2018/02/02 Javascript
iconfont的三种使用方式详解
2018/08/05 Javascript
微信小程序模板消息限制实现无限制主动推送的示例代码
2019/08/27 Javascript
微信小程序实现Swiper轮播图效果
2019/11/22 Javascript
jQuery实现tab栏切换效果
2020/12/22 jQuery
Python入门篇之列表和元组
2014/10/17 Python
Python无损音乐搜索引擎实现代码
2018/02/02 Python
python中数组和矩阵乘法及使用总结(推荐)
2019/05/18 Python
Django对数据库进行添加与更新的例子
2019/07/12 Python
Python统计时间内的并发数代码实例
2019/12/28 Python
如何基于Django实现上下文章跳转
2020/09/16 Python
python爬虫scrapy图书分类实例讲解
2020/11/23 Python
5分钟快速掌握Python定时任务框架的实现
2021/01/26 Python
详解三种方式实现平滑滚动页面到顶部的功能
2019/04/23 HTML / CSS
英国网上购买门:Direct Doors
2018/06/07 全球购物
英国家电购物网站:Sonic Direct
2019/03/26 全球购物
软件测试面试题
2014/01/05 面试题
医学专业五年以上个人求职信
2013/12/03 职场文书
创业者迈进成功第一步:如何写创业计划书?
2014/03/22 职场文书
岗位廉政承诺书
2014/03/27 职场文书
2014年人事工作总结范文
2014/11/19 职场文书
小学主题班会教案
2015/08/17 职场文书
幼儿园托班开学寄语(2016秋季)
2015/12/03 职场文书