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接口的集合实现了从一个元素到…

Backup--修改实例级别是否使用压缩备份的默认值

-- --修改实例级别是否使用压缩备份的默认值 USE master; GO EXEC sp_configure backup compression default, 1; RECONFIGURE WITH OVERRIDE;转载于:https://www.cnblogs.com/TeyGao/p/3519952.html

Java学习——Java运算符

位运算符 A 0011 1100 B 0000 1101 ----------------- A&b 0000 1100 A | B 0011 1101 A ^ B 0011 0001A << 2 1111 0000A >>> 2 0000 1111 ~A 1100 0011 例子 package import_test;public class Employee {public static void main(String args[])…

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

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

控制台输出

getchar() system("pause") getch()//<conio.h>转载于:https://www.cnblogs.com/lzihua/archive/2012/03/29/2422988.html

Linux基础之文件权限详解

Linux中对于权限的制定虽然没有Windows的那么精细&#xff0c;但是如果你了解并掌握Linux中文件的权限知识&#xff0c;也可以像Windows那样对权限做到精确配置。Linux中的文件权限是什么&#xff1f;如何查看Linux中的文件权限[rootlocalhost test]# ll -d /test/drwxr-xr-x. …

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

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

android apk如何入门

android自己摸索了6,7个月不知道算不算入门&#xff01;对了只是应用层apk! 说说我的情况&#xff01;有C语言基础&#xff0c;没有接触过JAVA语言。 1.先找视频教程看&#xff0c;mars老师的&#xff01;不要理会java语言&#xff01;4季一气看完&#xff01; 看了这个视频教程…

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 这个就是…

项亮 陈义 王益《推荐系统实践》

最近很多读者关注《推荐系统实践》一书&#xff0c;询问本书目前的写作进展和出版时间。自今日起&#xff0c;本书正式进入开放出版流程&#xff0c;作者会全程在本社区中互动&#xff0c;与大家分享写做过程中的点滴。 技术背景 推荐系统从1994年开始&#xff0c;经过Amazon&a…

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

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

不可不知的Oracle常用技巧

不可不知的Oracle常用技巧 表复制 1.方法一&#xff1a;复制表结构和数据 create table temp_clientloginuser as select distinct userid from tbuserloginlog; 2.方法二&#xff1a;仅复制数据 -- 如果表结构一样 insert into mytable select * from yourtable; -- 如果表结构…

图像处理核函数:之高斯核的生成方法 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;今天就带大家解决…

UVALive2678子序列

UVALive2678 http://122.207.68.93:9090/csuacmtrain/problem/viewProblem.action?id453 【题目描述】&#xff1a;n个正整数组成的序列。给定整数S&#xff0c;求长度最短的连续序列&#xff0c;使他们的和大于等于S。 【算法分析】&#xff1a; 【二分】&#xff1a; 全是…