在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 css styleFloat和cssFloat
Mar 15 Javascript
javascript 触发HTML元素绑定的函数
Sep 11 Javascript
JavaScript实现把数字转换成中文
Jun 29 Javascript
JavaScript修改作用域外变量的方法
Mar 25 Javascript
jstree创建无限分级树的方法【基于ajax动态创建子节点】
Oct 25 Javascript
socket.io实现在线群聊功能
Apr 07 Javascript
Javascript循环删除数组中元素的几种方法示例
May 18 Javascript
AngularJS获取json数据的方法详解
May 27 Javascript
node vue项目开发之前后端分离实战记录
Dec 13 Javascript
jQuery中常用动画效果函数知识点整理
Aug 19 jQuery
利用Angular7开发一个Radio组件的全过程
Jul 11 Javascript
《javascript设计模式》学习笔记四:Javascript面向对象程序设计链式调用实例分析
Apr 07 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中使用imagick实现把PDF转成图片
2015/01/26 PHP
PHP中each与list用法分析
2016/01/08 PHP
php实现的debug log日志操作类实例
2016/07/12 PHP
PHP获取数组中指定的一列实例
2017/12/27 PHP
总结AJAX相关JS代码片段和浏览器模型
2007/08/15 Javascript
Javascript 错误处理的几种方法
2009/06/13 Javascript
使用JavaScript 实现对象 匀速/变速运动的方法
2013/05/08 Javascript
jQuery 重复加载错误以及修复方法
2014/12/16 Javascript
jQuery实现下拉框选择图片功能实例
2015/08/08 Javascript
jquery实现可自动收缩的TAB网页选项卡代码
2015/09/06 Javascript
AngularJS 使用$sce控制代码安全检查
2016/01/05 Javascript
JavaScript实现in-place思想的快速排序方法
2016/08/07 Javascript
jQuery实现导航高亮的方法【附demo源码下载】
2016/11/09 Javascript
微信小程序开发之圆形菜单 仿建行圆形菜单实例
2016/12/12 Javascript
JavaScript中利用for循环遍历数组
2017/01/15 Javascript
js学习总结_轮播图之渐隐渐现版(实例讲解)
2017/07/17 Javascript
JS解决IOS中拍照图片预览旋转90度BUG的问题
2017/09/13 Javascript
在React 组件中使用Echarts的示例代码
2017/11/08 Javascript
Parcel 打包示例(React HelloWorld)
2018/01/16 Javascript
[02:34]DOTA2英雄基础教程 幽鬼
2014/01/02 DOTA
[01:22:42]2014 DOTA2华西杯精英邀请赛 5 24 DK VS LGD
2014/05/26 DOTA
pytyon 带有重复的全排列
2013/08/13 Python
python解决汉字编码问题:Unicode Decode Error
2017/01/19 Python
Python 3实战爬虫之爬取京东图书的图片详解
2017/10/09 Python
Django REST framework 分页的实现代码
2019/06/19 Python
关于numpy中eye和identity的区别详解
2019/11/29 Python
Python enumerate内置库用法解析
2020/02/24 Python
安全的后院和健身蹦床:JumpSport
2019/07/15 全球购物
德国在线购买葡萄酒网站:Geile Weine
2019/09/24 全球购物
毕业学生推荐信
2013/12/01 职场文书
创先争优活动方案
2014/02/12 职场文书
家长建议怎么写
2014/05/15 职场文书
前台接待岗位职责范本
2015/04/03 职场文书
不会写演讲稿,快来看看这篇文章!
2019/08/06 职场文书
css3手动实现pc端横向滚动
2022/06/21 HTML / CSS
delete in子查询不走索引问题分析
2022/07/07 MySQL