首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript jQuery

使用jquery的jsonp如何发起跨域请求及其原理详解

Posted in jQuery onAugust 17, 2017

前言

本文主要给大家介绍的是关于jquery jsonp发起跨域请求及其原理的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍：

跨域的安全限制都是对浏览器端来说的，服务器端是不存在跨域安全限制的。

浏览器的同源策略限制从一个源加载的文档或脚本与来自另一个源的资源进行交互。

如果协议，端口和主机对于两个页面是相同的，则两个页面具有相同的源，否则就是不同源的。

如果要在js里发起跨域请求，则要进行一些特殊处理了。或者，你可以把请求发到自己的服务端，再通过后台代码发起请求，再将数据返回前端。

这里讲下使用jquery的jsonp如何发起跨域请求及其原理。

先看下准备环境：两个端口不一样，构成跨域请求的条件。

获取数据：获取数据的端口为9090

使用jquery的jsonp如何发起跨域请求及其原理详解

请求数据：请求数据的端口为8080

使用jquery的jsonp如何发起跨域请求及其原理详解

1、先看下直接发起ajax请求会怎么样

下面是发起请求端的代码：

<%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
 <title>跨域测试</title>
 <script src="js/jquery-1.7.2.js"></script>
 <script>
 $(document).ready(function () {
  
  $("#btn").click(function () {
  $.ajax({
   url: 'http://localhost:9090/student',
   type: 'GET',
   success: function (data) {
   $(text).val(data);
   }
  });

  });
  
 });
 </script>
</head>
<body>
 <input id="btn" type="button" value="跨域获取数据" />
 <textarea id="text" style="width: 400px; height: 100px;"></textarea>
</body>
</html>

请求的结果如下图：可以看到跨域请求因为浏览器的同源策略被拦截了。

使用jquery的jsonp如何发起跨域请求及其原理详解

2、接下来看如何发起跨域请求。解决跨域请求的方式有很多，这里只说一下jquery的jsop方式及其原理。

首先我们需要明白，在页面上直接发起一个跨域的ajax请求是不可以的，但是，在页面上引入不同域上的js脚本却是可以的，就像你可以在自己的页面上使用<img src=""> 标签来随意显示某个域上的图片一样。

比如我在8080端口的页面上请求一个9090端口的图片：可以看到直接通过src跨域请求是可以的。

使用jquery的jsonp如何发起跨域请求及其原理详解

3、那么看下如何使用<script src="">来完成一个跨域请求：

当点击"跨域获取数据"的按钮时，添加一个<script>标签，用于发起跨域请求；注意看请求地址后面带了一个callback=showData的参数；

showData即是回调函数名称，传到后台，用于包裹数据。数据返回到前端后，就是showData(result)的形式，因为是script脚本，所以自动调用showData函数，而result就是showData的参数。

至此，我们算是跨域把数据请求回来了，但是比较麻烦，需要自己写脚本发起请求，然后写个回调函数处理数据，不是很方便。

<%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
 <title>跨域测试</title>
 <script src="js/jquery-1.7.2.js"></script>
 <script>
 //回调函数
 function showData (result) {
  var data = JSON.stringify(result); //json对象转成字符串
  $("#text").val(data);
 }

 $(document).ready(function () {

  $("#btn").click(function () {
  //向头部输入一个脚本，该脚本发起一个跨域请求
  $("head").append("<script src='http://localhost:9090/student?callback=showData'><\/script>");
  });

 });
 </script>
</head>
<body>
 <input id="btn" type="button" value="跨域获取数据" />
 <textarea id="text" style="width: 400px; height: 100px;"></textarea>

</body>
</html>

服务端：

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 response.setCharacterEncoding("UTF-8");
 response.setContentType("text/html;charset=UTF-8");

 //数据
 List<Student> studentList = getStudentList();


 JSONArray jsonArray = JSONArray.fromObject(studentList);
 String result = jsonArray.toString();

 //前端传过来的回调函数名称
 String callback = request.getParameter("callback");
 //用回调函数名称包裹返回数据，这样，返回数据就作为回调函数的参数传回去了
 result = callback + "(" + result + ")";

 response.getWriter().write(result);
}

结果：

使用jquery的jsonp如何发起跨域请求及其原理详解

4、再来看jquery的jsonp方式跨域请求：

服务端代码不变，js代码如下：最简单的方式，只需配置一个dataType:'jsonp' ，就可以发起一个跨域请求。jsonp指定服务器返回的数据类型为jsonp格式，可以看发起的请求路径，自动带了一个callback=xxx，xxx是jquery随机生成的一个回调函数名称。

这里的success就跟上面的showData一样，如果有success函数则默认success()作为回调函数。

<%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
 <title>跨域测试</title>
 <script src="js/jquery-1.7.2.js"></script>
 <script>

 $(document).ready(function () {

  $("#btn").click(function () {

  $.ajax({
   url: "http://localhost:9090/student",
   type: "GET",
   dataType: "jsonp", //指定服务器返回的数据类型
   success: function (data) {
   var result = JSON.stringify(data); //json对象转成字符串
   $("#text").val(result);
   }
  });

  });

 });
 </script>
</head>
<body>
 <input id="btn" type="button" value="跨域获取数据" />
 <textarea id="text" style="width: 400px; height: 100px;"></textarea>

</body>
</html>

效果：

使用jquery的jsonp如何发起跨域请求及其原理详解

再看看如何指定特定的回调函数：第30行代码

回调函数你可以写到<script>下(默认属于window对象)，或者指明写到window对象里，看jquery源码，可以看到jsonp调用回调函数时，是调用的window.callback。

然后看调用结果，发现，请求时带的参数是：callback=showData；调用回调函数的时候，先调用了指定的showData，然后再调用了success。所以，success是返回成功后必定会调用的函数，就看你怎么写了。

<%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
 <title>跨域测试</title>
 <script src="js/jquery-1.7.2.js"></script>
 <script>

 function showData (data) {
  console.info("调用showData");

  var result = JSON.stringify(data);
  $("#text").val(result);
 }

 $(document).ready(function () {

//  window.showData = function (data) {
//  console.info("调用showData");
//
//  var result = JSON.stringify(data);
//  $("#text").val(result);
//  }

  $("#btn").click(function () {

  $.ajax({
   url: "http://localhost:9090/student",
   type: "GET",
   dataType: "jsonp", //指定服务器返回的数据类型
   jsonpCallback: "showData", //指定回调函数名称
   success: function (data) {
   console.info("调用success");
   }
  });
  });

 });
 </script>
</head>
<body>
 <input id="btn" type="button" value="跨域获取数据" />
 <textarea id="text" style="width: 400px; height: 100px;"></textarea>

</body>
</html>

效果图：

使用jquery的jsonp如何发起跨域请求及其原理详解

使用jquery的jsonp如何发起跨域请求及其原理详解

再看看如何改变callback这个名称：第23行代码

指定callback这个名称后，后台也需要跟着更改。

<%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
 <title>跨域测试</title>
 <script src="js/jquery-1.7.2.js"></script>
 <script>

 function showData (data) {
  console.info("调用showData");

  var result = JSON.stringify(data);
  $("#text").val(result);
 }

 $(document).ready(function () {

  $("#btn").click(function () {

  $.ajax({
   url: "http://localhost:9090/student",
   type: "GET",
   dataType: "jsonp", //指定服务器返回的数据类型
   jsonp: "theFunction", //指定参数名称
   jsonpCallback: "showData", //指定回调函数名称
   success: function (data) {
   console.info("调用success");
   }
  });
  });

 });
 </script>
</head>
<body>
 <input id="btn" type="button" value="跨域获取数据" />
 <textarea id="text" style="width: 400px; height: 100px;"></textarea>

</body>
</html>

后台代码：

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 response.setCharacterEncoding("UTF-8");
 response.setContentType("text/html;charset=UTF-8");

 //数据
 List<Student> studentList = getStudentList();


 JSONArray jsonArray = JSONArray.fromObject(studentList);
 String result = jsonArray.toString();

 //前端传过来的回调函数名称
 String callback = request.getParameter("theFunction");
 //用回调函数名称包裹返回数据，这样，返回数据就作为回调函数的参数传回去了
 result = callback + "(" + result + ")";

 response.getWriter().write(result);
}

效果图：

使用jquery的jsonp如何发起跨域请求及其原理详解

最后看看jsonp是否支持POST方式：ajax请求指定POST方式

可以看到，jsonp方式不支持POST方式跨域请求，就算指定成POST方式，会自动转为GET方式；而后端如果设置成POST方式了，那就请求不了了。

jsonp的实现方式其实就是<script>脚本请求地址的方式一样，只是ajax的jsonp对其做了封装，所以可想而知，jsonp是不支持POST方式的。

<%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
 <title>跨域测试</title>
 <script src="js/jquery-1.7.2.js"></script>
 <script>

 $(document).ready(function () {

  $("#btn").click(function () {

  $.ajax({
   url: "http://localhost:9090/student",
   type: "POST", //post请求方式
   dataType: "jsonp",
   jsonp: "callback",
   success: function (data) {
   var result = JSON.stringify(data);
   $("#text").val(result);
   }
  });
  });

 });
 </script>
</head>
<body>
 <input id="btn" type="button" value="跨域获取数据" />
 <textarea id="text" style="width: 400px; height: 100px;"></textarea>
</body>
</html>

效果图：

使用jquery的jsonp如何发起跨域请求及其原理详解

使用jquery的jsonp如何发起跨域请求及其原理详解

再补充一点，回到第一条：CORS头缺少“Access-Control-Allow-Origin” 。

有时候你会发现其它都没问题，出现这个错误：这个错误代表服务端拒绝跨域访问。如果出现这个错误，就需要在服务端设置允许跨域请求。

response.setHeader("Access-Control-Allow-Origin", "*"); 设置允许任何域名跨域访问

使用jquery的jsonp如何发起跨域请求及其原理详解

设置可以跨域访问：第6行代码或第8行代码，设置其中一个即可。

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 response.setCharacterEncoding("UTF-8");
 response.setContentType("text/html;charset=UTF-8");

 // * 表示允许任何域名跨域访问
 response.setHeader("Access-Control-Allow-Origin", "*");
 // 指定特定域名可以访问
 response.setHeader("Access-Control-Allow-Origin", "http:localhost:8080/");

 //数据
 List<Student> studentList = getStudentList();

 JSONArray jsonArray = JSONArray.fromObject(studentList);
 String result = jsonArray.toString();

 //前端传过来的回调函数名称
 String callback = request.getParameter("callback");
 //用回调函数名称包裹返回数据，这样，返回数据就作为回调函数的参数传回去了
 result = callback + "(" + result + ")";

 response.getWriter().write(result);
}

总结

jQuery ajax方式以jsonp类型发起跨域请求，其原理跟<script>脚本请求一样，因此使用jsonp时也只能使用GET方式发起跨域请求。跨域请求需要服务端配合，设置callback，才能完成跨域请求。

好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对三水点靠木的支持。

使用jquery的jsonp如何发起跨域请求及其原理详解

- Author -

Chiangchou

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

jQuery 相关文章推荐
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
Mar 23 jQuery
jquery Form轻松实现文件上传
May 24 jQuery
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
Sep 22 jQuery
jQuery实现动态显示select下拉列表数据的方法
Feb 05 jQuery
jQuery+Cookie实现切换皮肤功能【附源码下载】
Mar 25 jQuery
jquery获取元素到屏幕四周可视距离的方法
Sep 05 jQuery
jquery获取img的src值实例介绍
Jan 16 jQuery
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
jquery登录的异步验证操作示例
May 09 jQuery
jquery.pager.js分页实现详解
Jul 29 jQuery
基于JavaScript或jQuery实现网站夜间/高亮模式
May 30 jQuery
jquery插件实现悬浮的菜单
Apr 24 jQuery
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
Aug 17 #jQuery
jQuery实现全选、反选和不选功能
Aug 16 #jQuery
jQuery取得元素标签名称小结（附代码）
Aug 16 #jQuery
深入研究jQuery图片懒加载 lazyload.js使用方法
Aug 16 #jQuery
jQuery中each循环的跳出和结束实例
Aug 16 #jQuery
基于JQuery的Ajax方法使用详解
Aug 16 #jQuery
jquery获取链接地址和跳转详解（推荐）
Aug 15 #jQuery
ipv6(1) UV(1) PV(1) 访问日志(2) 连接数(1) 内存(1) 线程(1) 弱口令(1) 缓存(3) 策略(1)
You might like
ThinkPHP模板输出display用法分析
2014/11/26 PHP
支持png透明图片的php生成缩略图类分享
2015/02/08 PHP
PHP数据对象PDO操作技巧小结
2016/09/27 PHP
PHP实现打包zip并下载功能
2018/06/12 PHP
父窗口获取弹出子窗口文本框的值
2006/06/27 Javascript
Jquery 的outerHeight方法使用介绍
2013/09/11 Javascript
jQuery不使用插件及swf实现无刷新文件上传
2014/12/08 Javascript
Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发
2016/08/31 Javascript
微信小程序 wxapp内容组件 text详细介绍
2016/10/31 Javascript
JavaScript对象封装的简单实现方法(3种方法)
2017/01/03 Javascript
php main 与 iframe 相互通讯类(js+php同域/跨域)
2017/09/14 Javascript
浅谈React中的元素、组件、实例和节点
2018/02/27 Javascript
Vue微信项目按需授权登录策略实践思路详解
2018/05/07 Javascript
vue移动端弹框组件的实例
2018/09/25 Javascript
js根据json数据中的某一个属性来给数据分组的方法
2018/10/08 Javascript
ES6知识点整理之数组解构和字符串解构的应用示例
2019/04/17 Javascript
js中Function引用类型常见有用的方法和属性详解
2019/12/11 Javascript
使用vue3重构拼图游戏的实现示例
2021/01/25 Vue.js
[09:33]2015国际邀请赛第四日TOP10
2015/08/08 DOTA
python实现linux服务器批量修改密码并生成execl
2014/04/22 Python
python计算文本文件行数的方法
2015/07/06 Python
python操作列表的函数使用代码详解
2017/12/28 Python
django+echart数据动态显示的例子
2019/08/12 Python
python多任务之协程的使用详解
2019/08/26 Python
Python实现报警信息实时发送至邮箱功能(实例代码)
2019/11/11 Python
CSS3中31种选择器使用方法教程
2013/12/05 HTML / CSS
recorder.js 基于Html5录音功能的实现
2020/05/26 HTML / CSS
全球知名的婚恋交友网站：Match.com
2017/01/05 全球购物
Wedgwood美国官网：英国骨瓷，精美礼品及家居装饰
2018/02/17 全球购物
TCP/IP模型的分界线
2012/12/01 面试题
成人毕业生自我鉴定
2013/10/18 职场文书
家长给孩子的评语
2014/01/30 职场文书
音乐教师求职信
2014/06/28 职场文书
初中语文教学研修日志
2015/11/13 职场文书
Laravel中获取IP的真实地理位置
2021/04/01 PHP
如何利用JavaScript实现二叉搜索树
2021/04/02 Javascript