轻松搞定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制作input提示内容(兼容IE8以上)
Jul 05 jQuery
jQuery初级教程之网站品牌列表效果
Aug 02 jQuery
基于jQuery对象和DOM对象和字符串之间的转化实例
Aug 08 jQuery
zTree jQuery 树插件的使用(实例讲解)
Sep 25 jQuery
jQuery响应滚动条事件功能示例
Oct 14 jQuery
基于jquery.page.js实现分页效果
Jan 01 jQuery
jQuery中将json数据显示到页面表格的方法
May 27 jQuery
jQuery中DOM操作原则实例分析
Aug 01 jQuery
jQuery实现提交表单时不提交隐藏div中input的方法
Oct 08 jQuery
jquery实现掷骰子小游戏
Oct 24 jQuery
jquery实现简单自动轮播图效果
Jul 29 jQuery
Jquery 获取相同NAME 或者id删除行操作
Aug 24 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 Undefined index报错的修复方法
2011/07/17 PHP
CodeIgniter错误mysql_connect(): No such file or directory解决方法
2014/09/06 PHP
PHP读取CURL模拟登录时生成Cookie文件的方法
2014/11/04 PHP
php实现简单文件下载的方法
2015/01/30 PHP
PHP实现的购物车类实例
2015/06/17 PHP
PHP错误处理函数register_shutdown_function使用示例
2017/07/03 PHP
PHP ADODB生成下拉列表框功能示例
2018/05/29 PHP
PHP7 其他语言层面的修改
2021/03/09 PHP
许愿墙中用到的函数
2006/10/07 Javascript
Firebug 字幕文件JSON地址获取代码
2009/10/28 Javascript
XMLHTTPRequest的属性和方法简介
2010/11/23 Javascript
javascript实现div的拖动并调整大小类似qq空间个性编辑模块
2012/12/12 Javascript
js判断屏幕分辨率的代码
2013/07/16 Javascript
JS+DIV实现鼠标划过切换层效果的实例代码
2013/11/26 Javascript
jQuery不兼容input的change事件问题解决过程
2014/12/05 Javascript
JavaScript模块化开发之SeaJS
2015/12/13 Javascript
详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
2017/01/10 Javascript
BootStrap的双日历时间控件使用
2017/07/25 Javascript
微信小程序如何再次获取用户授权的方法
2019/05/10 Javascript
python socket网络编程步骤详解(socket套接字使用)
2013/12/06 Python
Python Web服务器Tornado使用小结
2014/05/06 Python
Python访问纯真IP数据库脚本分享
2015/06/29 Python
Python设计足球联赛赛程表程序的思路与简单实现示例
2016/06/28 Python
Python实现爬取需要登录的网站完整示例
2017/08/19 Python
python学习笔记--将python源文件打包成exe文件(pyinstaller)
2018/05/26 Python
Python二叉树的镜像转换实现方法示例
2019/03/06 Python
Python Django实现layui风格+django分页功能的例子
2019/08/29 Python
Django Haystack 全文检索与关键词高亮的实现
2020/02/17 Python
Python进行统计建模
2020/08/10 Python
利用python绘制中国地图(含省界、河流等)
2020/09/21 Python
澳大利亚手表品牌:Time IV Change
2018/10/06 全球购物
Wallis官网:英国女装零售商
2020/01/21 全球购物
System.Array.CopyTo()和System.Array.Clone()有什么区别
2016/06/20 面试题
毕业生实习鉴定
2013/12/11 职场文书
班子查摆四风个人对照检查材料思想汇报
2014/10/04 职场文书
详解Spring Boot使用系统参数表提升系统的灵活性
2021/06/30 Java/Android