原文链接：https://blog.csdn.net/Activity_Time/article/details/96440806

1. 概述

Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。

为什么我们从不同的域（网站）访问数据需要一个特殊的技术( JSONP )呢？这是因为同源策略。

同源策略，它是由 Netscape 提出的一个著名的安全策略，现在所有支持 JavaScript 的浏览器都会使用这个策略。

ajax本身是不可以跨域的，

通过产生一个script标签来实现跨域。因为script标签的src属性是没有跨域的限制的。

其实设置了dataType: 'jsonp'后，$.ajax方法就和ajax XmlHttpRequest没什么关系了，取而代之的则是JSONP协议。JSONP是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问。

2. 客户端实现原理
<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>JSONP 实例</title>

</head>

<body>

<div id="divCustomers"></div>

<script type="text/javascript">

// 回调函数

function callbackFunction(result)

{

    document.getElementById('divCustomers').innerHTML = result;

}

</script>

<!-- 访问菜鸟教程的jsonp示例 -->

<script type="text/javascript" src="https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction"></script>

</body>

</html>
3. JQuery实现
$.getJSON("https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?",function(json){

alert(json);

//要求远程请求页面的数据格式为： ?(json_data)

//例如：

//?("test") alert(json[0]._name);

//JQuery会随机生成一个函数名 例如：jQuery110206760198562063544_1563445396212

});

也可以使用ajax函数

		$.ajax('https://www.runoob.com/try/ajax/jsonp.php', {

                method: 'post',

                contentType: 'application/javascript;charset=utf-8',

                dataType: 'jsonp',		// jsonp方式

                jsonp: 'jsoncallback',	// 回调函数名-参数名

                success: function (result) {

                    //  回调函数

                    console.log(result);

                }

            });

            $("#jkl").html(parseInt($("#jkl").html()) + 1);

        }

生成url : https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=jQuery11020184377763744622_1563446095229&_=1563446095230

4. 服务端原理
protected void service(HttpServletRequest request, HttpServletResponse resp) throws ServletException, IOException {

		String msg = "测试信息";

		// jsonp跨域协议

		resp.addHeader("content-type", "application/javascript");

		String func = request.getParameter("jsoncallback");

		PrintWriter pw = resp.getWriter();

		pw.print(func + "('" + msg + "');");

		pw.flush();

	}
参考文章：

菜鸟教程：https://www.runoob.com/jquery/jquery-tutorial.html

jsonp原理详解：https://blog.csdn.net/hansexploration/article/details/80314948

jquery中ajax处理跨域的三大方式：https://www.jb51.net/article/77470.htm

jsonp协议 java服务端、JQuery客户端 简单实现原理的更多相关文章

  1. java socket实现服务端，客户端简单网络通信。Chat

    之前写的实现简单网络通信的代码,有一些严重bug.后面详细写. 根据上次的代码,主要增加了用户注册,登录页面,以及实现了实时显示当前在登录状态的人数.并解决一些上次未发现的bug.(主要功能代码参见之 ...

  2. rsync 服务端和客户端 简单配置

    环境:Centos 6.9 两台服务器,A(192.168.223.129) 和 B(192.168.223.130).A 作为服务端,B作为客户端从A服务器同步目录.把A的/usr/src 目录下的 ...

  3. RPC学习--C#使用Thrift简介，C#客户端和Java服务端相互交互

    本文主要介绍两部分内容: C#中使用Thrift简介 用Java创建一个服务端,用C#创建一个客户端通过thrift与其交互. 用纯C#实现Client和Server C#服务端,Java客户端 其中 ...

  4. C#使用Thrift简介，C#客户端和Java服务端相互交互

    C#使用Thrift简介,C#客户端和Java服务端相互交互 本文主要介绍两部分内容: C#中使用Thrift简介 用Java创建一个服务端,用C#创建一个客户端通过thrift与其交互. 用纯C#实 ...

  5. 用Java实现HTTP Multipart的服务端和客户端

    今天简单介绍一下如何用Java支持HTTP Multipart的request和response. 整个项目的代码可以在https://github.com/mcai4gl2/multi下载. 在这个 ...

  6. 采用MQTT协议实现android消息推送（2）MQTT服务端与客户端软件对比、android客户端示列表

    1.服务端软件对比 https://github.com/mqtt/mqtt.github.io/wiki/servers 名称(点名进官网) 特性 简介 收费 支持的客户端语言 IBM MQ 完整的 ...

  7. Java 断点下载(下载续传)服务端及客户端（Android）代码

    原文: Java 断点下载(下载续传)服务端及客户端(Android)代码 - Stars-One的杂货小窝 最近在研究断点下载(下载续传)的功能,此功能需要服务端和客户端进行对接编写,本篇也是记录一 ...

  8. “快的打车”创始人陈伟星的新项目招人啦，高薪急招Java服务端/Android/Ios 客户端研发工程师/ mysql DBA/ app市场推广专家，欢迎大家加入我们的团队！ - V2EX

    "快的打车"创始人陈伟星的新项目招人啦,高薪急招Java服务端/Android/Ios 客户端研发工程师/ mysql DBA/ app市场推广专家,欢迎大家加入我们的团队! - ...

  9. 一些java考过的测试题和自己制作模拟服务端和客户端

    媒体 1,java环境变量: PATH: .;%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;  CLASSPATH: .;%JAVA_HOME%\jre\lib\rt.jar ...

随机推荐

  1. python3项目打包成exe可执行程序

    使用pyinstaller将python文件打包成exe程序,打包步骤如下: 一.安装pyinstaller (1)win+R输入cmd,打开命令窗口 (2)安装pyinstaller,安装指令:pi ...

  2. 【C#学习笔记】 IDisposable 接口

    在.net 编程环境中,系统的资源分为托管资源和非托管资源. 对于托管的资源的回收工作,是不需要人工干预回收的,而且你也无法干预他们的回收,所能够做的只是了解.net CLR如何做这些操作.也就是说对 ...

  3. DOM操作 、js获取id的内容 和修改原来的内容（innerHTML）

    js获取id的内容(getElementById) 和修改原来的内容(innerHTML) 1.通过ID获取元素 学过HTML/CSS样式,都知道,网页由标签将信息组织起来,而标签的id属性值是唯一的 ...

  4. web前端知识体系大全【转载】

    自己总结的web前端知识体系大全[欢迎补充]   1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在 ...

  5. 10个Eclipse珍藏插件推荐

    1.Open Explorer 打开资源管理器插件,这是一个从Eclipse里面可以直接定位打开windows资源管理器文件的插件,这个版本的插件在最新的Eclipse版本中都能使用. 下载地址:ht ...

  6. 杯子（glass）

    题目描述 一天,CC买了N个容量可以认为是无限大的瓶子,开始时每个瓶子里有1升水.接着~~CC发现瓶子实在太多了,于是他决定保留不超过K个瓶子.每次他选择两个当前含水量相同的瓶子,把一个瓶子的水全部倒 ...

  7. Docker 清理容器 log 日志

    原文 Docker 清理容器 log 日志 docker logs <容器ID> 是常用命令,来查看容器运行日志,但时间长了之后,就会发现越来越慢,log 太多了,这时就需要清理一下. 先 ...

  8. NOIP后一波总结

    我的山寨较为可靠分数为305(洛谷是真的水~显然不能用啊,果断换了一组合适的数据) 据大神们估计,得奖的分数在280, 我肯定是没有啥希望了.(我旁边的lxy同学从初二开始,每次以超分数线至少60分的 ...

  9. java当中的Timer定时器的4种使用方式

    import java.util.Calendar; import java.util.Date; import java.util.Timer; import java.util.TimerTask ...

  10. react-native学习（一）————使用react-native-tab-navigator创建底部导航

    使用react-native-tab-navigator创建底部Tab导航 1.使用npm安装react-native-tab-navigator npm install react-native-t ...