在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 HotKeys轻松搞定键盘事件代码
Aug 30 Javascript
JavaScript 对象、函数和继承
Jul 07 Javascript
鼠标滑在标题上显示图片的JS代码
Nov 19 Javascript
让jQuery与其他JavaScript库并存避免冲突的方法
Dec 23 Javascript
node.js实现快速截图
Aug 27 Javascript
AngularJS实现一次监听多个值发生的变化
Aug 31 Javascript
jQuery  ready方法实现原理详解
Oct 19 Javascript
微信小程序 九宫格实例代码
Jan 21 Javascript
js canvas实现QQ拨打电话特效
May 10 Javascript
微信小程序项目实践之主页tab选项实现
Jul 18 Javascript
详解如何配置vue-cli3.0的vue.config.js
Aug 23 Javascript
从Vuex中取出数组赋值给新的数组,新数组push时报错的解决方法
Sep 18 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中$_SERVER[PHP_SELF] 和 $_SERVER[SCRIPT_NAME]之间的区别
2009/09/05 PHP
PHP 数组教程 定义数组
2009/10/23 PHP
php中的PHP_EOL换行符详细解析
2013/10/26 PHP
PHP获取表单所有复选框的值的方法
2014/08/28 PHP
PHP线程的内存回收问题
2016/07/08 PHP
php新建文件的方法实例
2019/09/26 PHP
PHP PDO和消息队列的个人理解与应用实例分析
2019/11/25 PHP
参考:关于Javascript中实现暂停的几篇文章
2007/03/04 Javascript
Jquery 动态添加按钮实现代码
2010/05/06 Javascript
获取select元素被选中的文本内容的js代码
2014/01/29 Javascript
AngularJS入门教程之AngularJS表达式
2016/04/18 Javascript
Bootstrap使用基础教程详解
2016/09/05 Javascript
JS搜狐面试题分析
2016/12/16 Javascript
jquery实现放大镜简洁代码(推荐)
2017/06/08 jQuery
C#实现将一个字符转换为整数
2017/12/12 Javascript
vue 实现复制内容到粘贴板clipboard的方法
2018/03/17 Javascript
详解NodeJS Https HSM双向认证实现
2019/03/12 NodeJs
pyqt5简介及安装方法介绍
2018/01/31 Python
使用python-opencv读取视频,计算视频总帧数及FPS的实现
2019/12/10 Python
python实现猜数游戏
2020/03/27 Python
用python监控服务器的cpu,磁盘空间,内存,超过邮件报警
2021/01/29 Python
美国隐形眼镜网:Major Lens
2018/02/09 全球购物
意大利独特而优质的家居用品:Fazzini
2018/12/05 全球购物
澳大利亚拥有最好的家具和家居用品在线目的地:Nestz
2019/02/23 全球购物
MYPROTEIN澳大利亚官方网站:欧洲运动营养品牌
2019/06/26 全球购物
PHP面试题附答案
2015/11/28 面试题
数据库面试要点基本概念
2013/10/31 面试题
应届毕业生个人求职自荐信
2014/01/06 职场文书
魅力教师事迹材料
2014/01/10 职场文书
大学新闻系应届生求职信
2014/06/02 职场文书
大学生军训感言
2015/08/01 职场文书
《清澈的湖水》教学反思
2016/02/17 职场文书
告诉你一个秘密:富人致富的五大优点
2019/07/11 职场文书
python基于OpenCV模板匹配识别图片中的数字
2021/03/31 Python
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
2021/05/18 Vue.js
一篇文章带你掌握SQLite3基本用法
2022/06/14 数据库