在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 相关文章推荐
firefo xml 读写实现js代码
Jun 11 Javascript
统计出现最多的字符次数的js代码
Dec 03 Javascript
IE6/7/8/9不支持exec的简写方式
May 25 Javascript
在JavaScript中监听IME键盘输入事件
May 29 Javascript
js实现屏幕自适应局部代码分享
Jan 30 Javascript
Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面
Jul 01 Javascript
JS实现随机颜色的3种方法与颜色格式的转化
Jan 05 Javascript
详解javascript常用工具类的封装
Jan 30 Javascript
vue+SSM实现验证码功能
Dec 07 Javascript
cocos2dx+lua实现橡皮擦功能
Dec 20 Javascript
jquery实现手风琴案例
May 04 jQuery
vue实现打地鼠小游戏
Aug 21 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
丧钟首部独立剧集《丧钟:骑士与龙》北美正式开播,场面血腥
2020/04/09 欧美动漫
php session和cookie使用说明
2010/04/07 PHP
PHP仿微信发红包领红包效果
2016/10/30 PHP
Jquery插件 easyUI属性汇总
2011/01/19 Javascript
js实现的后台左侧管理菜单代码
2015/09/11 Javascript
浅谈JS运算符&amp;&amp;和|| 及其优先级
2016/08/10 Javascript
jQuery实现图片轮播效果代码
2016/09/27 Javascript
JAVA Web实时消息后台服务器推送技术---GoEasy
2016/11/04 Javascript
微信小程序 开发之顶部导航栏实例代码
2017/02/23 Javascript
vue的基本用法与常见指令
2017/08/15 Javascript
React Navigation 使用中遇到的问题小结
2018/05/08 Javascript
vue项目中引入Sass实例方法
2019/08/27 Javascript
JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法
2020/04/13 Javascript
详解JavaScript之ES5的继承
2020/07/08 Javascript
vue项目在线上服务器访问失败原因分析
2020/08/14 Javascript
[20:21]《一刀刀一天》第十六期:TI国际邀请赛正式打响,总奖金超过550万
2014/05/23 DOTA
[06:43]2018DOTA2国际邀请赛寻真——VGJ.Thunder
2018/08/11 DOTA
Python操作json数据的一个简单例子
2014/04/17 Python
centos 下面安装python2.7 +pip +mysqld
2014/11/18 Python
安装Python的web.py框架并从hello world开始编程
2015/04/25 Python
Python算法之求n个节点不同二叉树个数
2017/10/27 Python
jupyter notebook 增加kernel教程
2020/04/10 Python
Python requests模块session代码实例
2020/04/14 Python
python获取响应某个字段值的3种实现方法
2020/04/30 Python
纯DOM+CSS3实现简单的小风车动画
2016/09/27 HTML / CSS
自考生自我评价分享
2014/01/18 职场文书
食堂标语大全
2014/06/11 职场文书
运动员获奖感言
2014/08/15 职场文书
2014县委书记党的群众路线教育实践活动对照检查材料思想汇报
2014/09/22 职场文书
上课玩手机的检讨书
2014/10/01 职场文书
2015年乡镇扶贫工作总结
2015/04/08 职场文书
公司人事任命通知
2015/04/20 职场文书
社区禁毒宣传活动总结
2015/05/07 职场文书
导游词之海南天涯海角
2019/12/05 职场文书
node.js使用express-fileupload中间件实现文件上传
2021/07/16 Javascript
Win11如何修改dns?Win11修改dns图文教程
2022/01/18 数码科技