在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转换字符串为dom对象(字符串动态创建dom)
May 10 Javascript
详谈JavaScript 匿名函数及闭包
Nov 14 Javascript
详解JavaScript ES6中的Generator
Jul 28 Javascript
JavaScript实现动态删除列表框值的方法
Aug 12 Javascript
js编写一个简单的产品放大效果代码
Jun 27 Javascript
jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍
Sep 01 Javascript
详解JS去重及字符串奇数位小写转大写
Dec 29 Javascript
jquery Easyui Datagrid实现批量操作(编辑,删除,添加)
Feb 20 Javascript
JavaScript中Hoisting详解 (变量提升与函数声明提升)
Aug 18 Javascript
帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)
Aug 23 Javascript
vue elementui 实现搜索栏公共组件封装的实例代码
Jan 20 Javascript
VSCode Vue开发推荐插件和VSCode快捷键(小结)
Aug 08 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默认安装产生系统漏洞
2006/10/09 PHP
如何使用脚本模仿登陆过程
2006/11/22 PHP
深入解析PHP垃圾回收机制对内存泄露的处理
2013/06/14 PHP
PHP获取MAC地址的具体实例
2013/12/13 PHP
php实现生成code128条形码的方法详解
2017/07/19 PHP
Laravel框架中Blade模板的用法示例
2017/08/30 PHP
php curl批处理实现可控并发异步操作示例
2018/05/09 PHP
Laravel5.1 框架数据库操作DB运行原生SQL的方法分析
2020/01/07 PHP
Javascript的IE和Firefox兼容性汇编(zz)
2007/02/02 Javascript
JavaScript的面向对象方法以及差别
2008/03/31 Javascript
不同Jquery版本引发的问题解决
2013/10/14 Javascript
浅析JavaScript中的typeof运算符
2013/11/30 Javascript
JS+CSS实现下拉列表框美化效果(3款)
2015/08/15 Javascript
基于jQuery实现美观且实用的倒计时实例代码
2015/12/30 Javascript
jQuery弹出层插件popShow用法示例
2017/01/23 Javascript
jquery获取下拉框中的循环值
2017/02/08 Javascript
jQuery.form.js的使用详解
2017/06/14 jQuery
vue实现简单的星级评分组件源码
2018/11/16 Javascript
基于jsbarcode 生成条形码并将生成的条码保存至本地+源码
2020/04/27 Javascript
vue项目开启Gzip压缩和性能优化操作
2020/10/26 Javascript
[07:31]DOTA2卡尔工作室 英雄介绍主宰篇
2013/06/25 DOTA
[00:44]2016完美“圣”典 风云人物:Mikasa宣传片
2016/12/07 DOTA
python基于xmlrpc实现二进制文件传输的方法
2015/06/02 Python
Python聚类算法之凝聚层次聚类实例分析
2015/11/20 Python
Python使用poplib模块和smtplib模块收发电子邮件的教程
2016/07/02 Python
Python Pandas分组聚合的实现方法
2019/07/02 Python
将python安装信息加入注册表的示例
2019/11/20 Python
Python利用Faiss库实现ANN近邻搜索的方法详解
2020/08/03 Python
CSS3实现文本垂直排列的方法
2018/07/10 HTML / CSS
html5实现微信打飞机游戏
2014/03/27 HTML / CSS
初中校园之声广播稿
2014/01/15 职场文书
汽车队司机先进事迹材料
2014/02/01 职场文书
国庆节演讲稿范文2014
2014/09/19 职场文书
督导岗位职责
2015/02/04 职场文书
煤矿安全学习心得体会
2016/01/18 职场文书
Laravel中获取IP的真实地理位置
2021/04/01 PHP