在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 语法集锦 脚本之家基础推荐
Nov 15 Javascript
JavaScript实现生成GUID(全局统一标识符)
Sep 05 Javascript
javascript搜索框效果实现方法
May 14 Javascript
js实现大转盘抽奖游戏实例
Jun 24 Javascript
JavaScript创建对象的方式小结(4种方式)
Dec 17 Javascript
js实现获取两个日期之间所有日期的方法
Jun 17 Javascript
精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
Jul 01 Javascript
Bootstrap table使用方法详细介绍
Dec 09 Javascript
解决JavaScript layui 下拉框不显示的问题
Aug 14 Javascript
详解Angular中实现自定义组件的双向绑定的两种方法
Nov 23 Javascript
vue微信分享的实现(在当前页面分享其他页面)
Apr 16 Javascript
JS正则表达式常见函数与用法小结
Apr 13 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实现智能文件类型检测的实现代码
2011/08/02 PHP
PHP中的session安全吗?
2016/01/22 PHP
Json_decode 解析json字符串为NULL的解决方法(必看)
2017/02/17 PHP
调试Javascript代码(浏览器F12及VS中debugger关键字)
2013/01/25 Javascript
Extjs 3.3切换tab隐藏相应工具栏出现空白解决
2013/04/02 Javascript
JS去除数组重复值的五种不同方法
2013/09/06 Javascript
ie与ff下的event事件使用介绍
2013/11/25 Javascript
介绍一个简单的JavaScript类框架
2015/06/24 Javascript
JQuery实现鼠标移动图片显示描述层的方法
2015/06/25 Javascript
JS实现3D图片旋转展示效果代码
2015/09/22 Javascript
jQuery EasyUI之DataGrid使用实例详解
2016/01/04 Javascript
jQuery实现获取选中复选框的值实例详解
2018/06/28 jQuery
javascript显示动态时间的方法汇总
2018/07/06 Javascript
Vue axios全局拦截 get请求、post请求、配置请求的实例代码
2018/11/28 Javascript
angular 实现下拉列表组件的示例代码
2019/03/09 Javascript
基于Layui自定义模块的使用方法详解
2019/09/14 Javascript
通过js实现压缩图片上传功能
2020/02/25 Javascript
[02:39]DOTA2国际邀请赛助威团西雅图第一天
2013/08/08 DOTA
[00:32]2018DOTA2亚洲邀请赛VGJ.T出场
2018/04/03 DOTA
python类继承用法实例分析
2014/10/10 Python
Python面向对象特殊成员
2017/04/24 Python
python3利用ctypes传入一个字符串类型的列表方法
2019/02/12 Python
Python配置文件处理的方法教程
2019/08/29 Python
jupyter notebook 多行输出实例
2020/04/09 Python
详解Python模块化编程与装饰器
2021/01/16 Python
美国知名艺术画网站:Art.com
2017/02/09 全球购物
食品厂厂长岗位职责
2014/01/30 职场文书
行政人事岗位职责
2014/03/17 职场文书
艺术设计专业毕业生推荐信
2014/07/08 职场文书
学习朴航瑛老师爱岗敬业先进事迹思想汇报
2014/09/17 职场文书
个人务虚会发言材料
2014/10/20 职场文书
升职自荐信怎么写
2015/03/05 职场文书
芙蓉镇观后感
2015/06/10 职场文书
公司庆典主持词
2015/07/04 职场文书
该怎么书写道歉信?
2019/07/03 职场文书
深入浅析python3 依赖倒置原则(示例代码)
2021/07/09 Python