轻松搞定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实现动态生成表格并为行绑定单击变色动作的方法
Apr 17 jQuery
JQuery实现定时刷新功能代码
May 09 jQuery
bootstrap+jQuery实现的动态进度条功能示例
May 25 jQuery
jQuery 表单序列化实例代码
Jun 11 jQuery
jQuery.form.js的使用详解
Jun 14 jQuery
jquery插件canvaspercent.js实现百分比圆饼效果
Jul 18 jQuery
jQuery实现的电子时钟效果完整示例
Apr 28 jQuery
jQuery实现获取动态添加的标签对象示例
Jun 28 jQuery
jquery层次选择器的介绍
Jan 18 jQuery
JQuery实现简单的复选框树形结构图示例【附源码下载】
Jul 16 jQuery
Jquery Fade用法详解
Nov 06 jQuery
jquery实现拖拽添加元素功能
Dec 01 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 setcookie设置Cookie用法(及设置无效的问题)
2011/07/13 PHP
Win10 下安装配置IIS + MySQL + nginx + php7.1.7
2017/08/04 PHP
php readfile()修改文件上传大小设置
2017/08/11 PHP
PHP空值检测函数与方法汇总
2017/11/19 PHP
浅谈PHP SHA1withRSA加密生成签名及验签
2019/03/18 PHP
mac pecl 安装php7.1扩展教程
2019/10/17 PHP
使用jquery实现图文切换效果另加特效
2013/01/20 Javascript
编写针对IE的JS代码两种编写方法
2013/01/30 Javascript
Jquery.Form 异步提交表单的简单实例
2014/03/03 Javascript
9款2014最热门jQuery实用特效推荐
2014/12/07 Javascript
jquery判断复选框是否选中进行答题提示特效
2015/12/10 Javascript
node.js实现爬虫教程
2020/08/25 Javascript
AngularJS解决ng界面长表达式(ui-set)的方法分析
2016/11/07 Javascript
Jquery EasyUI $.Parser
2017/06/02 jQuery
laravel5.4+vue+element简单搭建的示例代码
2017/08/29 Javascript
JavaScript实现的DOM树遍历方法详解【二叉DOM树、多叉DOM树】
2018/05/07 Javascript
微信小程序自定义纯净模态框(弹出框)的实例代码
2020/03/09 Javascript
Vue通过provide inject实现组件通信
2020/09/03 Javascript
node.js通过Sequelize 连接MySQL的方法
2020/12/28 Javascript
jQuery实现鼠标拖动图片功能
2021/03/04 jQuery
简单介绍Python中的filter和lambda函数的使用
2015/04/07 Python
Python 40行代码实现人脸识别功能
2017/04/02 Python
Python自定义一个异常类的方法
2019/06/27 Python
python 获取sqlite3数据库的表名和表字段名的实例
2019/07/17 Python
python实现两个文件夹的同步
2019/08/29 Python
python实现人工智能Ai抠图功能
2019/09/05 Python
python 消除 futureWarning问题的解决
2019/12/25 Python
使用Python+Appuim 清理微信的方法
2021/01/26 Python
马来西亚在线购物:POPLOOK.com
2019/12/09 全球购物
法院反腐倡廉心得体会
2014/09/09 职场文书
学生实习证明范文
2014/09/28 职场文书
幼儿园大班个人总结
2015/02/28 职场文书
2015年教研室工作总结范文
2015/05/23 职场文书
golang 实现菜单树的生成方式
2021/04/28 Golang
Python实现信息轰炸工具(再也不怕说不过别人了)
2021/06/11 Python
LeetCode189轮转数组python示例
2022/08/05 Python