jquery中的ajax方法怎样通过JSONP进行远程调用


Posted in Javascript onMay 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 相关文章推荐
js的with语句使用方法
Sep 21 Javascript
jQuery Ajax 仿AjaxPro.Utility.RegisterTypeForAjax辅助方法
Sep 27 Javascript
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
Apr 11 Javascript
jQuery实现仿QQ在线客服效果的滚动层代码
Oct 15 Javascript
JavaScript基本类型值-Undefined、Null、Boolean
Feb 23 Javascript
jquery实现简单实用的轮播器
May 23 jQuery
基于jQuery封装的分页组件
Jun 26 jQuery
详谈vue+webpack解决css引用图片打包后找不到资源文件的问题
Mar 06 Javascript
基于jQuery.i18n实现web前端的国际化
May 04 jQuery
JavaScript多态与封装实例分析
Jul 27 Javascript
微信jssdk踩坑之签名错误invalid signature
May 19 Javascript
微信小程序调用wx.getImageInfo遇到的坑解决
May 31 Javascript
动态创建script在IE中缓存js文件时导致编码的解决方法
May 04 #Javascript
将HTML的左右尖括号等转义成实体形式的两种实现方式
May 04 #Javascript
IE6-8中Date不支持toISOString的修复方法
May 04 #Javascript
元素未显示设置width/height时IE中使用currentStyle获取为auto
May 04 #Javascript
JavaScript获取图片的原始尺寸以宽度为例
May 04 #Javascript
使用JavaScript判断图片是否加载完成的三种实现方式
May 04 #Javascript
使用JavaScript获取电池状态的方法
May 03 #Javascript
You might like
PHP 和 XML: 使用expat函数(二)
2006/10/09 PHP
php中随机函数mt_rand()与rand()性能对比分析
2014/12/01 PHP
编写兼容IE和FireFox的脚本
2009/05/18 Javascript
JavaScript获取和设置CheckBox状态的简单方法
2013/07/05 Javascript
JS获取节点的兄弟,父级,子级元素的方法
2014/01/09 Javascript
ExtJs纵坐标值重复问题的解决方法
2014/02/27 Javascript
javascript写的一个模拟阅读小说的程序
2014/04/04 Javascript
javascript实现阻止iOS APP中的链接打开Safari浏览器
2014/06/12 Javascript
JavaScript使用indexOf获得子字符串在字符串中位置的方法
2015/04/06 Javascript
JS排序方法(sort,bubble,select,insert)代码汇总
2016/01/30 Javascript
JavaScript读二进制文件并用ajax传输二进制流的方法
2016/07/18 Javascript
让DIV的滚动条自动滚动到最底部的3种方法(推荐)
2016/09/24 Javascript
Node.js设置CORS跨域请求中多域名白名单的方法
2017/03/28 Javascript
JavaScript中递归实现的方法及其区别
2017/09/12 Javascript
用 Vue.js 递归组件实现可折叠的树形菜单(demo)
2017/12/25 Javascript
详解Eslint 配置及规则说明
2018/09/10 Javascript
微信小程序利用swiper+css实现购物车商品删除功能
2019/03/06 Javascript
VueX模块的具体使用(小白教程)
2020/06/05 Javascript
小程序实现简单语音聊天的示例代码
2020/07/24 Javascript
vue中配置scss全局变量的步骤
2020/12/28 Vue.js
Python中os和shutil模块实用方法集锦
2014/05/13 Python
测试、预发布后用python检测网页是否有日常链接
2014/06/03 Python
配置 Pycharm 默认 Test runner 的图文教程
2018/11/30 Python
python 实现一个反向单位矩阵示例
2019/11/29 Python
python同义词替换的实现(jieba分词)
2020/01/21 Python
Python操作Jira库常用方法解析
2020/04/10 Python
Python爬虫headers处理及网络超时问题解决方案
2020/06/19 Python
Python Selenium XPath根据文本内容查找元素的方法
2020/12/07 Python
公司会计主管岗位责任制
2014/03/01 职场文书
旺仔牛奶广告词
2014/03/20 职场文书
中学生寄语大全
2014/04/03 职场文书
应届毕业生求职信
2014/05/26 职场文书
十佳家长事迹材料
2014/08/26 职场文书
党支部对转正的意见
2015/06/02 职场文书
男方家长婚礼致辞
2015/07/27 职场文书
nginx搭建图片服务器的过程详解(root和alias的区别)
2021/03/31 Servers