在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 相关文章推荐
arguments对象
Nov 20 Javascript
JavaScript 字符编码规则
May 04 Javascript
jQuery学习笔记之DOM对象和jQuery对象
Dec 22 Javascript
js获得参数的getParameter使用示例
Feb 26 Javascript
使用coffeescript编写node.js项目的方法汇总
Aug 05 Javascript
js removeChild 方法深入理解
Aug 16 Javascript
JavaScript中in和hasOwnProperty区别详解
Aug 04 Javascript
vue小图标favicon不显示的解决方案
Sep 19 Javascript
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
Jul 22 jQuery
javascript设计模式 ? 建造者模式原理与应用实例分析
Apr 10 Javascript
vue前端和Django后端如何查询一定时间段内的数据
Feb 28 Vue.js
React如何创建组件
Jun 27 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 变量类型的强制转换
2009/10/23 PHP
处理php自动反斜杠的函数代码
2010/01/05 PHP
php数组一对一替换实现代码
2012/08/31 PHP
php jsonp单引号转义
2014/11/23 PHP
checkbox 复选框不能为空
2009/07/11 Javascript
Jquery中增加参数与Json转换代码
2009/11/20 Javascript
基于jQuery的试卷自动排版系统实现代码
2011/01/06 Javascript
javascript学习笔记(三)显示当时时间的代码
2011/04/08 Javascript
Jquery同辈元素选中/未选中效果的实例代码
2013/08/01 Javascript
JQuery 文本框回车跳到下一个文本框示例代码
2013/08/30 Javascript
JS截取字符串常用方法整理及使用示例
2013/10/18 Javascript
js利用prototype调用Array的slice方法示例
2014/06/09 Javascript
javascript关于继承的用法汇总
2014/12/20 Javascript
Javascript 动态改变imput type属性
2016/11/01 Javascript
js实现简单的二级联动效果
2017/03/09 Javascript
JS实现简单的天数计算器完整实例
2017/04/28 Javascript
node.js中使用Export和Import的方法
2017/09/18 Javascript
vue实现局部刷新的实现示例
2019/04/16 Javascript
vue中用 async/await 来处理异步操作
2020/07/18 Javascript
python基础教程之分支、循环简单用法
2016/06/16 Python
Python科学计算之Pandas详解
2017/01/15 Python
深入探究Django中的Session与Cookie
2017/07/30 Python
Python排序算法之选择排序定义与用法示例
2018/04/29 Python
pytorch 在网络中添加可训练参数,修改预训练权重文件的方法
2019/08/17 Python
css3边框_动力节点Java学院整理
2017/07/11 HTML / CSS
法雷奥SQA(electric)面试问题
2016/01/23 面试题
医学生自荐信范文
2013/12/03 职场文书
母亲七十大寿答谢词
2014/01/18 职场文书
公务员更新知识培训实施方案
2014/03/31 职场文书
对祖国的寄语大全
2014/04/11 职场文书
人力资源管理毕业求职信
2014/08/05 职场文书
导游词之金鞭溪风景区
2019/09/12 职场文书
《鲁班学艺》读后感3篇
2019/11/27 职场文书
Python 制作自动化翻译工具
2021/04/25 Python
nginx lua 操作 mysql
2022/05/15 Servers
一文了解Java动态代理的原理及实现
2022/07/07 Java/Android