jsonp实现ajax跨域

最新推荐文章于 2023-10-19 11:41:31 发布

娟宝宝萌萌哒

最新推荐文章于 2023-10-19 11:41:31 发布

阅读量293

点赞数

分类专栏：前端文章标签： jsonp 跨域 ajax

本文链接：https://blog.csdn.net/qq_40369829/article/details/79667682

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

文章目录

Jsonp

Jsonp其实就是一个跨域解决方案。Js跨域请求数据是不可以的，但是js跨域请求脚本是可以的。
可以把数据封装成一个js语句，做一个方法的等待调用。跨域请求js脚本可以得到此js语句之后，通过回调函数提取数据。

实例

环境

本地端口号8081和8082的两个tomcat，8082的tomcat为门户工程，8081的tomcat作为服务层拦截 /rest/* 请求。
两个工程webapp根目录下有相同的json数据,jsonholder.json。

{
  "id": 1,
  "name": "name"
}

门户工程webapp根目录下有发起ajax调用的页面jsonpTest.jsp。
需要同时启动连个tomcat。

ajax不跨域请求本地数据

jsonpTest.jsp为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JsonpTest</title>
</head>
<body>
</body>
<script src="js/jquery-1.6.4.js" type="text/javascript"></script>
<script>

  function jsonhandle(data) {
    alert("id: " + data.id + "\n" + "name: " + data.name);
  }

  $(document).ready(function () {
    $.ajax({
      type: "get",
      url: "http://localhost:8082/jsonholder.json",
      success: function (data) {
        alert("success");
      }
    });
  })
</script>
</html>

页面显示弹出，调用成功：

ajax跨域请求数据

将ajax的url改为：

 url: "http://localhost:8081/jsonholder.json",

页面无响应，控制台显示访问受限：

jsonp跨域请求脚本

服务层中创建控制器：

public class JsonpController {

    @RequestMapping("/jsonp")
    @ResponseBody
    public String showIndex(String callback) {
        return callback + "(" + "{\n"
                + "  \"id\": 1,\n"
                + "  \"name\": \"name\"\n"
                + "}" + ")";

    }

}

门户工程中的ajax使用jsonp方式：

  $(document).ready(function () {
    $.ajax({
      type: "get",
      url: "http://localhost:8081/rest/jsonp",
      dataType: "jsonp",  //指定服务器返回的数据类型
      jsonp: "callback",   //指定url查询参数名称
      jsonpCallback: "jsonhandle",  //指定回调函数名称
      success: function (data) {
        alert("success");
      }
    });
  })

页面弹出，调用成功：
请求URL和响应实体如下：

娟宝宝萌萌哒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jsonp实现ajax跨域

跨域限制Jsonp实例环境ajax不跨域请求本地数据ajax跨域请求数据jsonp跨域请求脚本跨域限制跨域：域名不同，或者端口号不同。处于安全考虑，浏览器使用了同源策略，即不允许访问非同源的页面，js不允许跨域请求。JsonpJsonp是一个跨域解决方案。Js跨域请求数据是不可以的，但是js跨域请求脚本是可以的。可以把数据封装成一...
复制链接

扫一扫