在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字符串循环匹配实例分析
Jul 17 Javascript
js脚本分页代码分享(7种样式)
Aug 19 Javascript
window.close(); 关闭浏览器窗口js代码的总结介绍
Jul 14 Javascript
Es6 写的文件import 起来解决方案详解
Dec 13 Javascript
JS经典正则表达式笔试题汇总
Dec 15 Javascript
jQuery实用密码强度检测
Mar 02 Javascript
解决vue.js在编写过程中出现空格不规范报错的问题
Sep 20 Javascript
vue-content-loader内容加载器的使用方法
Aug 05 Javascript
对vue下点击事件传参和不传参的区别详解
Sep 15 Javascript
vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
Aug 28 Javascript
vue 动态生成拓扑图的示例
Jan 03 Vue.js
如何使用CocosCreator对象池
Apr 14 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
Banner程序
2006/10/09 PHP
php网站来路获取代码(针对搜索引擎)
2010/06/08 PHP
PHP 中关于ord($str)&amp;gt;0x80的详细说明
2012/09/23 PHP
浅析PHP绘图技术
2013/07/03 PHP
php可应用于面包屑导航的迭代寻找家谱树实现方法
2015/02/02 PHP
PHP+apc+ajax实现的ajax_upload上传进度条代码
2016/01/25 PHP
php设计模式之备忘模式分析【星际争霸游戏案例】
2020/03/24 PHP
Javascript Select操作大集合
2009/05/26 Javascript
Prototype String对象 学习
2009/07/19 Javascript
5个可以帮你理解JavaScript核心闭包和作用域的小例子
2014/10/08 Javascript
javascript实现ecshop搜索框键盘上下键切换控制
2015/03/18 Javascript
jQuery跨域问题解决方案
2015/08/03 Javascript
jQuery实现删除li节点的方法
2016/12/06 Javascript
浅谈jQuery的bind和unbind事件(绑定和解绑事件)
2017/03/02 Javascript
Vue组件实例间的直接访问实现代码
2017/08/20 Javascript
AngularJS实现动态切换样式的方法分析
2018/06/26 Javascript
vue-router beforeEach跳转路由验证用户登录状态
2018/12/26 Javascript
详解element-ui中表单验证的三种方式
2019/09/18 Javascript
微信小程序关键字变色实现代码实例
2019/12/13 Javascript
JS实现秒杀倒计时特效
2020/01/02 Javascript
python strip()函数 介绍
2013/05/24 Python
一个基于flask的web应用诞生 组织结构调整(7)
2017/04/11 Python
解决python3 网络请求路径包含中文的问题
2018/05/10 Python
Python实现SQL注入检测插件实例代码
2019/02/02 Python
Python使用eval函数执行动态标表达式过程详解
2020/10/17 Python
汉森批发:Hansen Wholesale
2018/05/24 全球购物
2014年党支部承诺书
2014/05/30 职场文书
施工安全协议书范本
2014/09/26 职场文书
诉讼授权委托书范本
2014/10/05 职场文书
公司领导班子召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
工作经验交流材料
2014/12/30 职场文书
社区党风廉政建设调研报告
2015/01/01 职场文书
职代会闭幕词
2015/01/28 职场文书
单位介绍信格式
2015/01/31 职场文书
《唯一的听众》教学反思
2016/02/18 职场文书
golang用type-switch判断interface的实际存储类型
2022/04/14 Golang