Java Ajax jsonp 跨域请求

OBKoro1 发布于2019-08-20 10:13 / 2580人阅读

摘要：是一种协议，为了解决客户端请求服务器跨域的问题，但是并非是正式的传输协议。结果明明请求回来数据，结果还是报错。是一种使用数据的方式，返回的不是对象，是包含对象的脚本。

1、什么是JSONP

一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通，而 HTML 的

这里就说明不允许跨域请求，那么怎么办？换成jsonp好了。就改了dataType这个字段。

    $.ajax({
                url: "http://www.xxx.cn/lalala?method=10082&page=1&pageSize=10",
                type: "GET",
                dataType: "jsonp",
                timeout: 5000,
                contentType: "application/json; charset=utf-8",
                success: function (result) {
                   alter("aaaa");
                }
           });

结果： Uncaught SyntaxError: Unexpected token!

what the fuck！明明请求回来数据，结果还是报错。原因是ajax请求服务器，而返回的数据格式不符合jsonp的返回格式，那么jsonp格式是什么样的？

Callback({msg:"this is json data"})

这是什么叼东西，奇葩谁定义的！如果你这么想，看来你没有仔细看第1点，JSON是一种轻量级的数据交换格式，像xml一样。JSONP是一种使用JSON数据的方式，返回的不是JSON对象，是包含JSON对象的javaScript脚本。但是上图是一段json串，所以报错啦。

3、参数返回处理

有一点你会发现在你是用jsonp协议请求时，在参数中除了自己填写的参数外还有名为callback的参数，如图：

看看这个参数是什么东西，因为我在ajax请求的时候没有指定，jsonp这个参数，那么系统默认参数名为“callback”。没有指定jsonpCallback参数, 那么jquery会生成随机的函数名，如上图所示。

比如我如下配置：

$.ajax({
            url: "http://www.xxx.cn/lalala?method=10082&page=1&pageSize=10",
            type: "GET",
            dataType: "jsonp",
            jsonp:"callbacka",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(默认为:callback)
            jsonpCallback:"success_jsonpCallback",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名
            timeout: 5000,
            contentType: "application/json; charset=utf-8",
            success: function (result) {
               alter("aaaa");
            }
       });

那么服务器亦可以通过下面方法获取回调的函数名：

string callbackFunName =request.getParameter（"callbacka"）;//获取的就是success_jsonpCallback 字符串

注意：系统会区分函数名大小写。

那么下面按照格式包装一下看看咯：

String callback = request.getParameter("callback"); //不指定函数名默认 callback

return callback+ "(" + jsonStr + ")"

包了一下，结果真的不报错，看下返回数据如下图：

4、JSONP的执行过程

首先在客户端注册一个callback (如:"jsoncallback"), 然后把callback的名字(如:jsonp1236827957501)传给服务器。注意：服务端得到callback的数值后，要用jsonp1236827957501(......)把将要输出的json内容包括起来，此时，服务器生成 json 数据才能被客户端正确接收。

然后,以 javascript 语法的方式，生成一个function， function 名字就是传递上来的参数 "jsoncallback"的值 jsonp1236827957501 .

最后,将 json 数据直接以入参的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。
客户端浏览器，解析script标签，并执行返回的 javascript 文档，此时javascript文档数据，作为参数，传入到
了客户端预先定义好的 callback 函数(如上例中jquery $.ajax()方法封装的的success: function (json))里。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80040.html

AJAX跨域完全讲解

摘要：跨域完全讲解今天在慕课网上学习了跨域完全讲解我在收集面试题的时候其实就已经有过跨域的问题的了，当时候知道了为什么会存在跨域，以及跨域解决的方案有哪些，今天随着课程的学习，又加深了跨域的理解，以此记录下来。 AJAX跨域完全讲解今天在慕课网上学习了AJAX跨域完全讲解：https://www.imooc.com/learn/947 我在收集AJAX面试题的时候其实就已经有过AJAX跨域...

alexnevsky 2019-08-22 15:00 评论0 收藏0
AJAX跨域完全讲解

摘要：跨域完全讲解今天在慕课网上学习了跨域完全讲解我在收集面试题的时候其实就已经有过跨域的问题的了，当时候知道了为什么会存在跨域，以及跨域解决的方案有哪些，今天随着课程的学习，又加深了跨域的理解，以此记录下来。 AJAX跨域完全讲解今天在慕课网上学习了AJAX跨域完全讲解：https://www.imooc.com/learn/947 我在收集AJAX面试题的时候其实就已经有过AJAX跨域...

i_garfileo 2019-08-15 14:27 评论0 收藏0
JSONP的一点笔记<修改中>

摘要：请求服务器数据并规定回调函数为上面代码通过动态添加元素，向服务器发出请求。另外假设向服务发送的请求是这样的在这种情况下，是表示请求的请求参数，而是应用程序的回调函数的名称。清单调用回调服务注意，我们使用作为回调函数名，而非真实的函数名。同源策略同源策略(Same origin policy)，它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript的浏览器都...

姘存按 2019-08-20 17:22 评论0 收藏0
慕课网_《Ajax跨域完全讲解》学习总结

摘要：时间年月日星期三说明本文部分内容均来自慕课网。当预检请求通过的时候，才发送真正的请求。时间：2018年04月18日星期三说明：本文部分内容均来自慕课网。@慕课网：https://www.imooc.com教学源码：https://github.com/zccodere/s...学习源码：https://github.com/zccodere/s... 第一章：课程介绍 1-1 课程介...

fredshare 2019-08-15 15:34 评论0 收藏0