在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 相关文章推荐
提高代码性能技巧谈—以创建千行表格为例
Jul 01 Javascript
js+div实现图片滚动效果代码
Feb 10 Javascript
基于豆瓣API+Angular开发的web App
Jan 02 Javascript
jQuery中last()方法用法实例
Jan 06 Javascript
javascript转换静态图片,增加粒子动画效果
May 28 Javascript
详解javascript表单的Ajax提交插件的使用
Dec 29 Javascript
jQuery事件与动画基础详解
Feb 23 Javascript
详解javascript常用工具类的封装
Jan 30 Javascript
解决koa2 ctx.render is not a function报错问题
Aug 07 Javascript
Vue监听一个数组id是否与另一个数组id相同的方法
Sep 26 Javascript
JavaScript实现好看的跟随彩色气泡效果
Feb 06 Javascript
Vue两个版本的区别和使用方法(更深层次了解)
Feb 16 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
Ajax实现对静态页面的文章访问统计功能示例
2016/10/10 PHP
IE innerHTML,outerHTML所引起的问题
2009/06/04 Javascript
javascript web页面刷新的方法收集
2009/07/02 Javascript
IE与firefox下Dhtml的一些区别小结
2009/12/02 Javascript
动态调用CSS文件的JS代码
2010/07/29 Javascript
在浏览器窗口上添加遮罩层的方法
2012/11/12 Javascript
jQuery性能优化的38个建议
2014/03/04 Javascript
javascript解析json实例详解
2014/11/05 Javascript
JavaScript动态改变表格单元格内容的方法
2015/03/30 Javascript
使用jquery插件qrcode生成二维码
2015/10/22 Javascript
解析AngularJS中get请求URL出现的跨域问题
2016/12/01 Javascript
JavaScript获取服务器时间的方法详解
2016/12/11 Javascript
一句jQuery代码实现返回顶部效果(简单实用)
2016/12/28 Javascript
微信小程序本作用域下调用全局JS详解及实例
2017/02/22 Javascript
js实现年月日表单三级联动
2020/04/17 Javascript
JS简单生成随机数(随机密码)的方法
2017/05/11 Javascript
Bootstrap Table从零开始
2017/06/30 Javascript
vue vantUI实现文件(图片、文档、视频、音频)上传(多文件)
2019/10/15 Javascript
Python使用matplotlib填充图形指定区域代码示例
2018/01/16 Python
使用numpy和PIL进行简单的图像处理方法
2018/07/02 Python
python 实现将多条曲线画在一幅图上的方法
2019/07/07 Python
详解如何用python实现一个简单下载器的服务端和客户端
2019/10/28 Python
python scrapy重复执行实现代码详解
2019/12/28 Python
python如何输出反斜杠
2020/06/18 Python
CSS3 二级导航菜单的制作的示例
2018/04/02 HTML / CSS
阿根廷网上配眼镜:SmartBuyGlasses阿根廷
2016/08/19 全球购物
Furla官网:意大利著名的皮革品牌
2019/08/06 全球购物
JSF面试题:Jsf中的核心类用那些?有什么作用?LiftCycle六大生命周期是什么?
2014/07/17 面试题
简单而又朴实的个人求职信分享
2013/12/12 职场文书
党的群众路线教育实践活动整改方案
2014/10/28 职场文书
2014工程部年度工作总结
2014/12/17 职场文书
预备党员自我评价范文
2015/03/04 职场文书
导游词之苏州阳澄湖
2019/11/15 职场文书
Vue接口封装的完整步骤记录
2021/05/14 Vue.js
如何利用React实现图片识别App
2022/02/18 Javascript
使用SQL实现车流量的计算的示例代码
2022/02/28 SQL Server