在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中的细节分析
Jun 30 Javascript
JS中不为人知的五种声明Number的方式简要概述
Feb 22 Javascript
IE、FF、Chrome浏览器中的JS差异介绍
Aug 13 Javascript
onkeyup,onkeydown和onkeypress的区别介绍
Oct 21 Javascript
Get中文乱码IE浏览器Get中文乱码解决方案
Dec 26 Javascript
jquery插件开发之实现google+圈子选择功能
Mar 10 Javascript
RequireJS入门一之实现第一个例子
Sep 30 Javascript
Angular2 (RC5) 路由与导航详解
Sep 21 Javascript
Jqprint实现页面打印
Jan 06 Javascript
Vue 2.0学习笔记之Vue中的computed属性
Oct 16 Javascript
jQuery实现动态控制页面元素的方法分析
Dec 20 jQuery
JavaScript setTimeout()基本用法有哪些
Nov 04 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插件 HTMLPurifier HTML解析器
2013/07/01 PHP
php生成图片缩略图功能示例
2017/02/22 PHP
PHP Swoole异步MySQL客户端实现方法示例
2019/10/24 PHP
PHP7 其他修改
2021/03/09 PHP
js禁止小键盘输入数字功能代码
2011/08/01 Javascript
JS冒泡事件的快速解决方法
2013/12/16 Javascript
在Node.js中实现文件复制的方法和实例
2014/06/05 Javascript
extjs 时间范围选择自动判断的实现代码
2014/06/24 Javascript
js监听鼠标点击和键盘点击事件并自动跳转页面
2014/09/24 Javascript
Javascript基础知识(二)事件
2014/09/29 Javascript
深入解读JavaScript中的Iterator和for-of循环
2015/07/28 Javascript
js中unicode转码方法详解
2015/10/09 Javascript
浅谈JavaScript中的对象及Promise对象的实现
2015/11/15 Javascript
JS跨域解决方案之使用CORS实现跨域
2016/04/14 Javascript
浅谈Vue SSR 的 Cookies 问题
2017/11/20 Javascript
详解react关于事件绑定this的四种方式
2018/03/09 Javascript
[原创]jQuery实现合并/追加数组并去除重复项的方法
2018/04/11 jQuery
vue-socket.io跨域问题有效解决方法
2020/02/11 Javascript
vue 动态设置img的src地址无效,npm run build 后找不到文件的解决
2020/07/26 Javascript
[01:52]DOTA2完美大师赛Vega战队趣味视频——kpii老师小课堂
2017/11/25 DOTA
[01:08:17]2018DOTA2亚洲邀请赛3月29日 小组赛B组 EG VS VGJ.T
2018/03/30 DOTA
python基础教程之元组操作使用详解
2014/03/25 Python
python正则表达式match和search用法实例
2015/03/26 Python
详解Django框架中用context来解析模板的方法
2015/07/20 Python
Numpy数组转置的两种实现方法
2018/04/17 Python
Python中存取文件的4种不同操作
2018/07/02 Python
Django admin 实现search_fields精确查询实例
2020/03/30 Python
html5 canvas 画图教程案例分析
2012/11/23 HTML / CSS
巴西一家专门从事家居和装饰的连锁店:Camicado
2019/08/14 全球购物
2014年教育培训工作总结
2014/12/08 职场文书
有关西游记的读书笔记
2015/06/25 职场文书
理想国读书笔记
2015/06/25 职场文书
2015年小学教师培训工作总结
2015/07/21 职场文书
创业计划书之奶茶店开店方案范本!
2019/08/06 职场文书
MySQL创建高性能索引的全步骤
2021/05/02 MySQL
nginx作grpc的反向代理踩坑总结
2021/07/07 Servers