首页
所有分类
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实现frame之间互通的方法
Jun 26 jQuery
一个有意思的鼠标点击文字特效jquery代码
Sep 23 jQuery
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 jQuery
jQuery实现动态控制页面元素的方法分析
Dec 20 jQuery
js和jQuery以及easyui实现对下拉框的指定赋值方法
Jan 23 jQuery
JQuery元素快速查找与操作
Apr 22 jQuery
Jquery实现无缝向上循环滚动列表的特效
Feb 13 jQuery
jquery实现Ajax请求的几种常见方式总结
May 28 jQuery
JQuery实现简单的复选框树形结构图示例【附源码下载】
Jul 16 jQuery
jQuery 查找元素操作实例小结
Oct 02 jQuery
原生jQuery实现只显示年份下拉框
Dec 24 jQuery
jQuery冲突问题解决方法
Jan 19 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
Jmerte(1) Yolov5(1) vue-router-link(1) vue-cli3.x(1) 监听(2) watch(1) TimePickerView(1) scss(1) sched(1) 项目打包(2)
You might like
php 字符串函数收集
2010/03/29 PHP
php set_time_limit(0) 设置程序执行时间的函数
2010/05/26 PHP
php返回相对时间（如：20分钟前，3天前）的方法
2015/04/14 PHP
PHP Yii框架之表单验证规则大全
2015/11/16 PHP
php array 转json及java 转换 json数据格式操作示例
2019/11/13 PHP
JavaScript Date对象使用总结
2009/05/14 Javascript
javascript:void(0)的作用示例介绍
2013/10/28 Javascript
使用javascript实现判断当前浏览器
2015/04/14 Javascript
一款简单的jQuery图片标注效果附源码下载
2016/03/22 Javascript
使用JS批量选中功能实现更改数据库中的status状态值（批量展示）
2016/11/22 Javascript
jQuery实现判断控件是否显示的方法
2017/01/11 Javascript
JavaScript基本类型值-Number类型
2017/02/24 Javascript
Vue入门之数据绑定(小结)
2018/01/08 Javascript
react.js组件实现拖拽复制和可排序的示例代码
2018/08/20 Javascript
基于Layui自定义模块的使用方法详解
2019/09/14 Javascript
ES6 Iterator遍历器原理，应用场景及相关常用知识拓展详解
2020/02/15 Javascript
JS中FileReader类实现文件上传及时预览功能
2020/03/27 Javascript
Postman参数化实现过程及原理解析
2020/08/13 Javascript
[02:11]2016国际邀请赛中国区预选赛全程回顾
2016/07/01 DOTA
python中json格式数据输出的简单实现方法
2016/10/31 Python
python+PyQT实现系统桌面时钟
2020/06/16 Python
学python安装的软件总结
2019/10/12 Python
PyCharm Anaconda配置PyQt5开发环境及创建项目的教程详解
2020/03/24 Python
python开发入门——列表生成式
2020/09/03 Python
Django websocket原理及功能实现代码
2020/11/14 Python
美国单身专业人士在线约会网站：EliteSingles
2019/03/19 全球购物
美国在线鞋类零售商：LifeStride
2019/06/09 全球购物
九年级体育教学反思
2014/01/23 职场文书
2014两会学习心得：时代的发展
2014/03/17 职场文书
养生餐厅创业计划书范文
2014/03/26 职场文书
团支部建设方案
2014/05/02 职场文书
中药学自荐信
2014/06/15 职场文书
授权委托书公证
2014/09/14 职场文书
清明节寄语2015
2015/03/23 职场文书
民事撤诉申请书范本
2015/05/18 职场文书
通过shell脚本对mysql的增删改查及my.cnf的配置
2021/07/07 MySQL