Java Ajax jsonp 跨域请求

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

1. 什么是JSONP

        一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的<script> 元素是一个例外。利用 <script> 元素的这个开放策略,网页可以得到从其他来源动态产生的 JSON 资料,而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON,而是任意的JavaScript,用 JavaScript 直译器执行而不是用 JSON 解析器解析。

        JSONP是一种协议,为了解决客户端请求服务器跨域的问题,但是并非是正式的传输协议。该协议的一个要点就是允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了.

2. Ajax 请求其他域接口

        举个例子:

我这个项目要请求另外一个第一个后台接口请求数据,在页面渲染的时候,通过ajax加载数据如下:

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

这样就出现跨域的错误,如下所示:

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 500.

161309_vrAX_1045974.png

这里就说明不允许跨域请求,那么怎么办? 换成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

161709_rNvr_1045974.png

what the fuck!161806_yuGs_1045974.png 明明请求回来数据,结果还是报错。原因是ajax请求服务器,而返回的数据格式不符合jsonp的返回格式,那么jsonp格式是什么样的?

Callback({msg:'this is json data'})。这是什么叼东西,奇葩谁定义的!

看来你没有仔细看第1点,JSON是一种轻量级的数据交换格式,像xml一样。JSONP是一种使用JSON数据的方式,返回的不是JSON对象,是包含JSON对象的javaScript脚本。但是上图是一段json串,所以报错啦。

3. 参数返回处理

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

162537_tIPb_1045974.png

看看这个参数是什么东西,因为我在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 字符串

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

172557_k9hg_1045974.png

 

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

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

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

163246_4Twm_1045974.png

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://my.oschina.net/xiaomianyang/blog/729649

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/260910.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

对IEnumerableT,IDictionaryTkey,TValue,ICollectionT,IListT的总结

1、IEnumerable<T>接口和IEnumerable接口 实现了IEnumerable接口的集合表明该集合能够提供一个enumerator(枚举器)对象&#xff0c;支持当前的遍历集合。IEnumerable接口只有一个成员GetEnumerator()方法。 IEnumerator接口实现了IEnumerator接口的集合实现了从一个元素到…

学习Python中用numpy与matplotlib遇到的一些数学函数与函数的绘图

学习Python中的一些数学函数与函数的绘图 主要用到numpy 与 matplotlib 如果有什么不正确&#xff0c;欢迎指教。 图片不知道怎样批量上传&#xff0c;一个一个怎么感觉很小&#xff0c;请见谅 自行复制拷贝&#xff0c;到vs&#xff0c;jupyter notebook, spyder都可以 函…

有这个OCR程序,不用再买VIP了,Python 调用百度OCR API

最近学习&#xff0c;很多东西都是视频&#xff0c;截图后&#xff0c;又想做成文档保存起来。 刚开始不多&#xff0c;打一下字就很快解决了。 随着时间的推移&#xff0c;现在越来越多的图了&#xff0c;管理起来确实不方便&#xff0c;打字有时也不能很快的解决。 所以就…

linux常用命令_Linux常用命令全称

从事IT行业的很多人都会使用Linux常用命令&#xff0c;但是知道这些常用命令全称的人并不多&#xff0c;让我们来看看这些常用命令对应的全称吧&#xff01;必备Linux命令和C语言基础_C语言_嵌入式开发工程师-创客学院​www.makeru.com.cnpwd:print work directory 打印当前目录…

存储程序(1)——MYSQL

MySQL支持把几种对象存放在服务器端供以后使用。这几种对象有一些可以根据情况通过程序代码调用&#xff0c;有一些会在数据表被修改时自动执行&#xff0c;还有一些可以在预定时刻自动执行。它们包括以下几种: 1.存储函数(stored function)。返回一个计算结果&#xff0c;该结…

闯过这 54 关,点亮你的 Git 技能树 (五) - 完结篇

这是一个系列文章&#xff0c;介绍学习 Git 的一个小游戏 - githug&#xff0c;如果你是第一次看到&#xff0c;请先阅读&#xff1a;闯过这 54 关&#xff0c;点亮你的 Git 技能树闯过这 54 关&#xff0c;点亮你的 Git 技能树&#xff08;一&#xff09;闯过这 54 关&#xf…

Jupyter notebook 不安装主题,通过修改css更改 默认字体,字体大小等

目标&#xff1a; Jupyter notebook 又不想改更主题的的情况下&#xff0c;可以通过修改css的目的来达到修改默认的字体&#xff0c;字号心达到可以好的阅读效果。 方法 要修改的css文件目录如下&#xff0c; D:\Anaconda\Lib\site-packages\notebook\static\custom 这个就是…

坚果nuts 加速 官网_【喂你播】坚果手机2020新品发布会来了;三星定向华为手机推以旧换新...

周五喂diu 不只有你们爱的女主播 还有小编呢BGM&#xff1a;Make You Hustle-Croatia Squad坚果手机2020新品发布会来了坚果手机正式宣布&#xff1a;坚果手机2020新品发布会将于10月20日19:30在五棵松M空间举行。根据此前爆料&#xff0c;坚果手机新品或命名为坚果Pro4&#x…

图像处理核函数:之高斯核的生成方法 python

图像处理核函数&#xff1a;之高斯核函数的生成方法 python高斯核函数&#xff08;低通高斯滤波器核&#xff09;高斯分布函数高斯核生成函数代码效果高斯核函数的图像高斯核函数&#xff08;低通高斯滤波器核&#xff09; 最近在看DIP&#xff08;Digital Image Processing)&…

WEB-INFO/lib build path 的jar包问题

为什么80%的码农都做不了架构师&#xff1f;>>> 一、build path&WEB-INFO/lib介绍 build path&#xff1a;可以说是引用&#xff1b; WEB-INFO/lib&#xff1a;可以说是固定在一个地方&#xff1b; eclipse编译项目的时候是根据build path的&#xff0c;如果…

Windows phone 7之页面布局

Windows phone的页面布局方式一般是依赖布局控件实现的&#xff0c;而布局控件有三种Grid&#xff0c;StackPanel和Canvas Grid是网格布局方式&#xff0c;相当于一个表格&#xff0c;有行和列&#xff0c;新建一个Windows phone项目&#xff0c;打开MainPage.xaml&#xff0c;…

苹果电脑删除软件_软件自动开启很烦人?如何彻底关掉开机自动开启的应用程序...

使用Mac的小伙伴有没有这样的烦恼&#xff0c;电脑一开机&#xff0c;一堆烦人的软件就自动开启了&#xff0c;让人很懊恼&#xff0c;如何才能彻底关掉开机自动开启的应用程序&#xff1f;mac开机启动项怎么设置&#xff1f;开机启动项要怎么禁止&#xff1f;今天就带大家解决…

csgo怎么控制电脑玩家_电脑远程控制怎么弄

本教程以“Win 10”系统为例进行演示。方法一&#xff1a;1/6在“此电脑”单击鼠标右键选择“属性”2/6在弹出窗口中点击“远程设置”3/6勾选“允许远程协助连接这台计算机”&#xff0c;然后点击应用并确定4/6在微软小娜搜索“mstsc”5/6打开“远程桌面连接”6/6输入对方的IP地…

MNIST 手写数字识别,我是如何做到886个可训练参数,识别率达到98.2%? (参数、模型压缩), Keras实现,模型优化

一 项目展示 下面可以看到验证集可以到了0.9823了&#xff0c;实际上&#xff0c;在下面的另外一个训练&#xff0c;可以得到0.9839&#xff0c;我保守的写了0.982 二 项目参数展示 我们先来看看LeNet 5 的结构与参数&#xff0c;参数有61&#xff0c;706个。 这个是我用…

javascript 计算两个坐标的距离 米_土方全面应用计算

各种土方量的计算方法汇总8.2.1 DTM法土方计算由DTM模型来计算土方量是根据实地测定的地面点坐标(X&#xff0c;Y&#xff0c;Z)和设计高程&#xff0c;通过生成三角网来计算每一个三棱锥的填挖方量&#xff0c;最后累计得到指定范围内填方和挖方的土方量&#xff0c;并绘出填…

unity 阳光插件_网络广告,阳光创信保驾护航

网络广告 就找阳光创信。网络营销的技术基础主要是以计算机网络技术为代表的信息技术。计算机网络是现代通信技术与计算机技术相结合的产物&#xff0c;它把分布在不同地理区域的计算机与专门的外部设备用通信线路互连成一个规模大、功能强的网络&#xff0c;从而使众多的计算机…

第2章 Python 数字图像处理(DIP) --数字图像基础1 - 视觉感知要素 - 亮度适应与辨别

数字图像基础1视觉感知要素亮度适应与辨别import sys import numpy as np import cv2 import matplotlib import matplotlib.pyplot as plt import PIL from PIL import Imageprint(f"Python version: {sys.version}") print(f"Numpy version: {np.__version__…

快速幂与快速乘法

List 快速幂与快速乘法 ListKnowledge快速幂 原理code快速乘法 原理codeKnowledge 快速幂 原理 a^b%p 采用二进制得思想&#xff0c;将b转化为二进制数。 b c02^0c12^1c22^2c32^3……cn2^n a^b a^(a12^0)a^(c12^1)……a^(cn2^n) 所以我们可以在log(b)的时间内求出a^(2^0)…

Java程序设计 图形用户界面 小巫版简易计算器

/** 作者&#xff1a;wwj 时间&#xff1a;2012/4/13 功能&#xff1a;实现一个计算器应用程序实验要求&#xff1a;编写一个模拟计算器的应用程序&#xff0c;使用面板和网格布局&#xff0c; 添加一个文本框&#xff0c;10个数字按钮&#xff08;0~9&#xff09;&#xff0c;…

phython在file同时写入两个_轻松支撑百万级数据点写入 京东智联云时序数据库HoraeDB架构解密...

本文将通过对时序数据的基本概念、应用场景以及京东智联云时序数据库HoraeDB的介绍&#xff0c;为大家揭秘HoraeDB的核心技术架构和解决方案。首先我们来了解下时序数据库的基本概念。时序数据库全称时间序列数据库&#xff0c;主要用于处理带时间标签的数据&#xff0c;带时间…