在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监测ActiveX控件是否已经安装过的代码
Sep 02 Javascript
改变javascript函数内部this指针指向的三种方法
Apr 23 Javascript
javascript中强制执行toString()具体实现
Apr 27 Javascript
JQuery插件iScroll实现下拉刷新,滚动翻页特效
Jun 22 Javascript
JavaScript获得当前网页来源页面(即上一页)的方法
Apr 03 Javascript
使用Javascript写的2048小游戏
Nov 25 Javascript
15个常用的jquery代码片段
Dec 19 Javascript
js中遍历对象的属性和值的方法
Jul 27 Javascript
AngularJS 简单应用实例
Jul 28 Javascript
基于vue+ bootstrap实现图片上传图片展示功能
May 17 Javascript
vue引入jq插件的实例讲解
Sep 12 Javascript
Javascript迭代、递推、穷举、递归常用算法实例讲解
Feb 01 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
JAVA/JSP学习系列之四
2006/10/09 PHP
PHP注释实例技巧
2008/10/03 PHP
PHP Cookei记录用户历史浏览信息的代码
2016/02/03 PHP
laravel框架的安装与路由实例分析
2019/10/11 PHP
基于IE下ul li 互相嵌套时的bug,排查,解决过程以及心得介绍
2013/05/07 Javascript
jquery中邮箱地址 URL网站地址正则验证实例代码
2013/09/15 Javascript
基于jquery的网站幻灯片切换效果焦点图代码
2013/09/15 Javascript
js 删除数组的几种方法小结
2014/02/21 Javascript
JS根据变量保存方法名并执行方法示例
2014/04/04 Javascript
jQuery插件EnPlaceholder实现输入框提示文字
2015/06/05 Javascript
基于Node.js的强大爬虫 能直接发布抓取的文章哦
2016/01/10 Javascript
基于javascript bootstrap实现生日日期联动选择
2016/04/07 Javascript
JavaScript算法系列之快速排序(Quicksort)算法实例详解
2016/09/04 Javascript
JavaScript用构造函数如何获取变量的类型名
2016/12/23 Javascript
详解JavaScript中return的用法
2017/05/08 Javascript
解析Angular 2+ 样式绑定方式
2018/01/15 Javascript
react以create-react-app为基础创建项目
2018/03/14 Javascript
微信小程序地图绘制线段并且测量(实例代码)
2020/01/02 Javascript
从零学python系列之教你如何根据图片生成字符画
2014/05/23 Python
Python 文件管理实例详解
2015/11/10 Python
对python3 urllib包与http包的使用详解
2018/05/10 Python
django+mysql的使用示例
2018/11/23 Python
在pycharm 中添加运行参数的操作方法
2019/01/19 Python
Python OOP类中的几种函数或方法总结
2019/02/22 Python
python爬虫实例之获取动漫截图
2020/05/31 Python
TensorFlow Autodiff自动微分详解
2020/07/06 Python
五分钟带你搞懂python 迭代器与生成器
2020/08/30 Python
Django和Ueditor自定义存储上传文件的文件名
2021/02/25 Python
社区志愿者心得体会
2014/01/03 职场文书
预备党员表决心书
2014/03/11 职场文书
签约仪式主持词
2014/03/19 职场文书
2014年团支书工作总结
2014/11/14 职场文书
社区禁毒宣传活动总结
2015/05/07 职场文书
个人欠条范本
2015/07/03 职场文书
2016年社区国庆节活动总结
2016/04/01 职场文书
MySQL 数据库范式化设计理论
2022/04/22 MySQL