轻松搞定jQuery+JSONP跨域请求的解决方案


Posted in jQuery onMarch 06, 2018

JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的<script> 元素是一个例外。利用 <script> 元素的这个开放策略,网页可以得到从其他来源动态产生的 JSON 资料,而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON,而是任意的JavaScript,用 JavaScript 直译器执行而不是用 JSON 解析器解析。

  上面一段话来自百度百科,概念永远是那么抽象难懂,看例子才是最直观的表现。例子看的多了,领悟到那个点了,自然自己也会学着抽象的描述了。这就是为什么常说“学习知识是从薄到厚,又由厚到薄的过程”。好了扯远了。下面直接来看一个例子。

 轻松搞定jQuery+JSONP跨域请求的解决方案

  问题:本地现有一个页面demo.html需要从http://localhost:3561/User/GetAllNames获取数据并展示。

  解答:由于问题中的两方不在同一服务器,故需要使用jsonp来跨域访问。

  ① 客户端编写

  客户端使用jQuery中提供的$.getJson方法来跨域访问。getJson有3个参数:

    I.   url:请求地址;

    II.  data:发送到服务端的参数;

    III. callback:成功时的回调函数。

  getJson的使用方法和普通的$.get方法基本一致,不同的地方在于getJson需要在url后面的参数部分加上callback=?这一固定部分,jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。然后在回调函数中操作从异域返回的json对象,回调函数callback的参数即为该json对象。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
</head>
<body>
  <ul id="nameList"></ul>

  <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
  <script type="text/javascript">
    $.getJSON("http://localhost:3561/User/GetAllNames?callback=?", function(json) {
      for (var i = 0; i < json.length; i++) {
        $("#nameList").append("<li>" + json[i] + "</li>");
      }
    });
  </script>
</body>
</html>

② 服务端编写

  服务端的逻辑主要是将数据序列化为json字符串,然后封装成"callback(json)"的形式,callback为jQuery自动生成并传到服务端的函数名称。下面使用C#实现:

public class UserController : Controller
{
    public string GetAllNames(string callback)
  {
    string[] names = new string[] { "张三丰", "张无忌", "令狐冲", "杨过", "郭靖" };
    JavaScriptSerializer jss = new JavaScriptSerializer();
    string json = jss.Serialize(names);
    return string.Format("{0}({1})", callback, json);
  }
}

至此,便成功解决了问题。

轻松搞定jQuery+JSONP跨域请求的解决方案

 思考:如果服务端已经写死了callback(如:return string.Format("moty({0})", json);),那么客户端该怎么写呢?

 参考:

$.ajax("http://localhost:3561/User/GetAllNames", {
  jsonpCallback: "moty",
  dataType: "jsonp",
  success: function(json) {
    for (var i = 0; i < json.length; i++) {
      $("#nameList").append("<li>" + json[i] + "</li>");
    }
  }
});
jQuery 相关文章推荐
jQuery制作全屏宽度固定高度轮播图(实例讲解)
Jul 08 jQuery
jQuery结合jQuery.cookie.js插件实现换肤功能示例
Oct 14 jQuery
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 jQuery
jQuery实现页码跳转式动态数据分页
Dec 31 jQuery
如何快速解决JS或Jquery ajax异步跨域的问题
Jan 08 jQuery
jquery+css3实现熊猫tv导航代码分享
Feb 12 jQuery
jQuery中内容过滤器简单用法示例
Mar 31 jQuery
jQuery简单判断值是否存在于数组中的方法示例
Apr 17 jQuery
jQuery实现的3D版图片轮播示例【滑动轮播】
Jan 18 jQuery
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
Feb 15 jQuery
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
Apr 01 jQuery
jQuery实现简单全选框
Sep 13 jQuery
jQuery实现左右滑动的toggle方法
Mar 03 #jQuery
jquery radio 动态控制选中失效问题的解决方法
Feb 28 #jQuery
详解jQuery中的isPlainObject()使用方法
Feb 27 #jQuery
jQuery幻灯片插件owlcarousel参数说明中文文档
Feb 27 #jQuery
jQuery实现碰到边缘反弹的动画效果
Feb 24 #jQuery
jQuery 改变P标签文本值方法
Feb 24 #jQuery
jQuery实现标签子元素的添加和赋值方法
Feb 24 #jQuery
You might like
PHP脚本的10个技巧(6)
2006/10/09 PHP
PHP中exec与system用法区别分析
2014/09/22 PHP
thinkphp常见路径用法分析
2014/12/02 PHP
php通过淘宝API查询IP地址归属等信息
2015/12/25 PHP
thinkPHP实现递归循环栏目并按照树形结构无限极输出的方法
2016/05/19 PHP
ThinkPHP3.2.3框架实现执行原生SQL语句的方法示例
2019/04/03 PHP
php下的原生ajax请求用法实例分析
2020/02/28 PHP
HTML IMG标签 onload 内存溢出导致浏览器CPU占用过高
2021/03/09 Javascript
在JS方法中返回多个值的方法汇总
2015/05/20 Javascript
浅谈JavaScript中的字符编码转换问题
2015/07/07 Javascript
JavaScript实现选择框按比例拖拉缩放的方法
2015/08/04 Javascript
js简单实现表单中点击按钮动态增加输入框数量的方法
2015/08/18 Javascript
轻松使用jQuery双向select控件Bootstrap Dual Listbox
2015/12/13 Javascript
jQuery form插件的使用之处理server返回的JSON, XML,HTML数据
2016/01/26 Javascript
Bootstrap基本样式学习笔记之标签(5)
2016/12/07 Javascript
JavaScript中清空数组的三种方式
2017/03/22 Javascript
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
2017/03/23 jQuery
详谈js模块化规范
2017/07/07 Javascript
分分钟学会vue中vuex的应用(入门教程)
2017/09/14 Javascript
详解vue-router 动态路由下子页面多页共活的解决方案
2019/12/22 Javascript
[08:47]2018国际邀请赛 OG战队举杯时刻
2018/08/29 DOTA
python 从远程服务器下载东西的代码
2013/02/10 Python
python实现微信远程控制电脑
2018/02/22 Python
python写入已存在的excel数据实例
2018/05/03 Python
django如何自己创建一个中间件
2019/07/24 Python
Python 实现大整数乘法算法的示例代码
2019/09/17 Python
pytorch实现MNIST手写体识别
2020/02/14 Python
深入浅析Python 函数注解与匿名函数
2020/02/24 Python
keras中的backend.clip用法
2020/05/22 Python
pyqt5 textEdit、lineEdit操作的示例代码
2020/08/12 Python
python,Java,JavaScript实现indexOf
2020/09/09 Python
UGG美国官网:购买UGG雪地靴、拖鞋和鞋子
2017/12/31 全球购物
英国顶级珠宝品牌之家:John Greed
2018/06/09 全球购物
幼儿园教师自我鉴定
2014/03/20 职场文书
企业安全生产责任书
2014/04/14 职场文书
理财学专业自荐书
2014/06/28 职场文书