轻松搞定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实现可拖动进度条实例代码
Jun 21 jQuery
jquery tmpl模板(实例讲解)
Sep 02 jQuery
jQuery实现注册会员时密码强度提示信息功能示例
Sep 05 jQuery
jQuery结合jQuery.cookie.js插件实现换肤功能示例
Oct 14 jQuery
springmvc接收jquery提交的数组数据代码分享
Oct 28 jQuery
基于jQuery中ajax的相关方法汇总(必看篇)
Nov 08 jQuery
jQuery实现动态添加节点与遍历节点功能示例
Nov 09 jQuery
jQuery 操作 HTML 元素和属性的方法
Nov 12 jQuery
JQuery animate动画应用示例
May 14 jQuery
JQuery属性操作与循环用法示例
May 15 jQuery
使用jQuery实现掷骰子游戏
Oct 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
zend framework文件上传功能实例代码
2013/12/25 PHP
php中socket的用法详解
2014/10/24 PHP
PHP实现冒泡排序的简单实例
2016/05/26 PHP
Yii2 hasOne(), hasMany() 实现三表关联的方法(两种)
2017/02/15 PHP
JQuery+DIV自定义滚动条样式的具体实现
2013/06/25 Javascript
jquery和ajax的关系详细介绍
2013/11/29 Javascript
javascript设计模式之解释器模式详解
2014/06/05 Javascript
jQuery scrollFix滚动定位插件
2015/04/01 Javascript
初步了解javascript面向对象
2015/11/09 Javascript
浅谈JavaScript的内置对象和浏览器对象
2016/06/03 Javascript
Bootstrap模态框(modal)垂直居中的实例代码
2016/08/18 Javascript
AngularJS入门教程之双向绑定详解
2016/08/18 Javascript
js获取页面引用的css样式表中的属性值方法(推荐)
2016/08/19 Javascript
JavaScript实现经典排序算法之插入排序
2016/12/28 Javascript
原生js实现焦点轮播图效果
2017/01/12 Javascript
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
2017/02/22 Javascript
用纯Node.JS弹出Windows系统消息提示框实例(MessageBox)
2017/05/17 Javascript
JS中的const命令你真懂它吗
2020/03/08 Javascript
vue-quill-editor插入图片路径太长问题解决方法
2021/01/08 Vue.js
Python深入学习之装饰器
2014/08/31 Python
Python读取环境变量的方法和自定义类分享
2014/11/22 Python
利用Psyco提升Python运行速度
2014/12/24 Python
使用python绘制二维图形示例
2019/11/22 Python
python获取网络图片方法及整理过程详解
2019/12/20 Python
python实现简易版学生成绩管理系统
2020/06/22 Python
美国在线宠物用品商店:Entirely Pets
2017/01/01 全球购物
美国第一个网上卖鞋零售商:OnlineShoes.com
2017/09/24 全球购物
日语专业毕业生自荐信
2013/11/11 职场文书
我的未来不是梦演讲稿
2014/09/02 职场文书
党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
领导干部考核评语
2015/01/04 职场文书
长城的导游词
2015/01/30 职场文书
导游词之昭君岛
2020/01/17 职场文书
vue实现同时设置多个倒计时
2021/05/20 Vue.js
golang 实用库gotable的具体使用
2021/07/01 Golang
js 实现Material UI点击涟漪效果示例
2022/09/23 Javascript