当前位置: 开发笔记 > 前端 > 正文

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

作者：DSSDD | 来源：互联网 | 2022-01-25 10:53

JSONP是一个非官方的协议，它允许在服务器端集成Scripttags返回至客户端，通过JavaScriptcallback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。下面这篇文章主要给大家介绍了关于使用jquery的jsonp如何发起跨域请求及其原理的相关资料，需要的朋友可以参考下。

前言

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

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

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

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

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

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

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

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

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

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

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

<%@ page pageEncoding="utf-8" cOntentType="text/html;charset=UTF-8" language="java" %>

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

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

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

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

3、那么看下如何使用

效果：

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

回调函数你可以写到

效果图：再看看如何改变callback这个名称：第23行代码指定callback这个名称后，后台也需要跟着更改。 <%@ page pageEncoding="utf-8" cOntentType="text/html;charset=UTF-8" language="java" %> 后台代码： protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setCharacterEncoding("UTF-8"); response.setContentType("text/html;charset=UTF-8"); //数据 List studentList = getStudentList(); JSONArray jsOnArray= JSONArray.fromObject(studentList); String result = jsonArray.toString(); //前端传过来的回调函数名称 String callback = request.getParameter("theFunction"); //用回调函数名称包裹返回数据，这样，返回数据就作为回调函数的参数传回去了 result = callback + "(" + result + ")"; response.getWriter().write(result); } 效果图：最后看看jsonp是否支持POST方式：ajax请求指定POST方式可以看到，jsonp方式不支持POST方式跨域请求，就算指定成POST方式，会自动转为GET方式；而后端如果设置成POST方式了，那就请求不了了。 jsonp的实现方式其实就是

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 studentList = getStudentList(); JSONArray jsOnArray= JSONArray.fromObject(studentList); String result = jsonArray.toString(); //前端传过来的回调函数名称 String callback = request.getParameter("callback"); //用回调函数名称包裹返回数据，这样，返回数据就作为回调函数的参数传回去了 result = callback + "(" + result + ")"; response.getWriter().write(result); }