JSONP代码

最新推荐文章于 2023-11-03 23:47:38 发布
最新推荐文章于 2023-11-03 23:47:38 发布
阅读量265 收藏
点赞数
分类专栏： Java Web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45082647/article/details/107706585
版权

先看下直接发起ajax请求会怎么样

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>跨域测试</title>
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<button type="button" id="btn">跨域获取数据</button>
		<textarea id="text" style="width: 400px;height: 100px;">
			
		</textarea>
	</body>
	<script type="text/javascript">
		// https://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel=电话号码
		$.ajax({
			url:'https://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel=电话号码',
			type:'GET',
			success:function(data){
				$(text).val(data.province);
			}
		});
	</script>
</html>

在这里插入图片描述

可以看到跨域请求因为浏览器的同源策略被拦截了

jQuery动态创建script标签，发起Ajax请求

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<button type="button" id="btn">跨域获取数据</button>
		<textarea id="text" style="width: 400px;height: 100px;">
			
		</textarea>
	</body>
	<script type="text/javascript">
// 'https://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel=电话号码'

		function showData(data){
			$("#text").val(data.province);
		}
		$('#btn').click(function(){
			alert("进来没！");
			//向头部输入一个脚本，该脚本发起一个跨域请求
			var scriptStr = $("<script src='https:\/\/tcc.taobao.com\/cc\/json\/mobile_tel_segment.htm?tel=电话号码&callback=showData' charset='utf-8'><\/script>");
			$('body').append(scriptStr);
		});
		
	</script>
</html>

在这里插入图片描述
后端代码类似于这样的格式：

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	//设置编码格式
    response.setCharacterEncoding("UTF-8");
    response.setContentType("text/html;charset=UTF-8");
    
    //获取数据
    List<Student> studentList = getStudentList();
    
    //将数据转为JSON对象
    JSONArray jsonArray = JSONArray.fromObject(studentList);
	//将JSON对象转为JSON字符串
    String result = jsonArray.toString();
    
    //前端传过来的回调函数名称
    String callback = request.getParameter("callback");
    //用回调函数名称包裹返回数据，这样，返回数据就作为回调函数的参数传回去了
    result = callback + "(" + result + ")";
    //做出响应
    response.getWriter().write(result);
}

jquery的jsonp方式

  • 服务端代码不变，js代码如下：最简单的方式，只需配置一个dataType:‘jsonp’，就可以发起一个跨域请求。jsonp指定服务器返回的数据类型为jsonp格式，可以看发起的请求路径，自动带了一个callback=xxx，xxx是jquery随机生成的一个回调函数名称。

  • 这里的success就跟上面的showData一样，如果有success函数则默认success()作为回调函数。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<button type="button" id="btn">跨域获取数据</button>
		<textarea id="text" style="width: 400px;height: 100px;">
			
		</textarea>
	</body>
	<script type="text/javascript">
// 'https://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel=电话号码'

		$('#btn').click(function(){			
			$.ajax({			
				url:"https://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel=电话号码",
				type:"GET",
				dataType:"jsonp",
				success:function(data){
					$('#text').val(data.province);
				}
			});
		});
	</script>
</html>

在这里插入图片描述

回调函数你可以写到<script>下(默认属于window对象)，或者指明写到window对象里，看jquery源码，可以看到jsonp调用回调函数时，是调用的window.callback。

看调用结果，发现，请求时带的参数是：callback=showData；调用回调函数的时候，先调用了指定的showData，然后再调用了success。所以，success是返回成功后必定会调用的函数，就看你怎么写了。

jQuery实现JSONP自定义函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<button type="button" id="btn">跨域获取数据</button>
		<textarea id="text" style="width: 400px;height: 100px;">

		</textarea>
	</body>
	<script type="text/javascript">
		function showData(data) {
			console.info("调用showData");

			var result = JSON.stringify(data);
			$("#text").val(result);
		}

		$("#btn").click(function() {
			$.ajax({
				url: "https://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel=电话号码",
				type: "GET",
				dataType: "jsonp", //指定服务器返回的数据类型
				jsonpCallback: "showData", //指定回调函数名称
				success: function(data) {
					console.info("调用success");
				}
			});
		});
	</script>
</html>

在这里插入图片描述

更改callback这个名称

前台代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<button type="button" id="btn">跨域获取数据</button>
		<textarea id="text" style="width: 400px;height: 100px;">

		</textarea>
	</body>
	<script type="text/javascript">
		function showData(data) {
			console.info("调用showData");

			var result = JSON.stringify(data);
			$("#text").val(result);
		}

		$("#btn").click(function() {
			$.ajax({
				url: "https://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel=电话号码",
				type: "GET",
				dataType: "jsonp", //指定服务器返回的数据类型
				jsonp:"theFunction",//指定参数名称
				jsonpCallback: "showData", //指定回调函数名称
				success: function(data) {
					console.info("调用success");
				}
			});
		});
	</script>
</html>

后台代码：

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	//设置编码格式
    response.setCharacterEncoding("UTF-8");
    response.setContentType("text/html;charset=UTF-8");
    
    //获取数据
    List<Student> studentList = getStudentList();
    
    //将数据转为JSON对象
    JSONArray jsonArray = JSONArray.fromObject(studentList);
	//将JSON对象转为JSON字符串
    String result = jsonArray.toString();
    
    //前端传过来的回调函数名称
    String theFunction = request.getParameter("theFunction");
    //用回调函数名称包裹返回数据，这样，返回数据就作为回调函数的参数传回去了
    result = theFunction + "(" + result + ")";
    //做出响应
    response.getWriter().write(result);
}

看一下JSONP是否支持post请求

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<button type="button" id="btn">跨域获取数据</button>
		<textarea id="text" style="width: 400px;height: 100px;">

		</textarea>
	</body>
	<script type="text/javascript">
		function showData(data) {
			console.info("调用showData");

			var result = JSON.stringify(data);
			$("#text").val(result);
		}

		$("#btn").click(function() {
			$.ajax({
				url: "https://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel=电话号码",
				type: "POST",
				dataType: "jsonp", //指定服务器返回的数据类型
				jsonpCallback: "showData", //指定回调函数名称
				success: function(data) {
					console.info("调用success");
				}
			});
		});
	</script>
</html>

电话号码这个接口是支持POST请求的，他的后台可能做了一些处理；如果后台没有做处理，可能出现以下情况：

在这里插入图片描述

明天，你好呀
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js代码-js手写jsonp
07-15
js代码-js手写jsonp
说说JSON和JSONP，也许你会豁然开朗
rznice的专栏
07-17 1846
前言 　　由于Sencha Touch 2这种开发模式的特性，基本决定了它原生的数据交互行为几乎只能通过AJAX来实现。 　　当然了，通过调用强大的PhoneGap插件然后打包，你可以实现100%的Socket通讯和本地数据库功能，又或者通过HTML5的WebSocket也可以实现与服务器的通讯和服务端推功能，但这两种方式都有其局限性，前者需要PhoneGap支持，后者要求用户设备必须支持We
跨域解决办法以及实现JSONP代码
dongwei666的博客
04-25 1199
跨域、JSONP
JSONP 教程
unber的博客
05-25 476
本章节我们将向大家介绍 JSONP 的知识。Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。为什么我们从不同的域（网站）访问数据需要一个特殊的技术( JSONP )呢？这是因为同源策略。同源策略，它是由 Netscape 提出的一个著名的安全策略，现在所有支持 JavaScript 的浏览器都会使用这个策略。
jsonp 详解 —— 终于搞懂 jsonp 了
M_emory_的博客
07-02 7009
JSONP 不是一门编程语言，也不是什么特别的技术，它更像一个漏洞，程序员可以利用这个漏洞，实现跨域（可以简单理解为跨域名）传输数据。在介绍 JSONP 之前，先来介绍一下浏览器的同源策略。通过 jsonp，我们可以避开浏览器的同源策略，从而进行跨域请求。jsonp 是利用 HTML 标签的 src 属性引用资源不受同源策影响的特性来实现的，实现步骤如下：通过动态创建 script 标签，其 scr 指向非同源的 url，并传递一个 callback 参数给服务端。
JSONP原理及实现
橘猫吃不胖的博客
11-27 827
JSONP原理及实现 1 概述 2 优点 3 缺点 4 实现
手动实现JSONP
朱远辉的博客
05-18 226
手动实现JSONP：在上述代码中，前端代码定义了一个名为handleData的回调函数，用于接收服务端返回的数据。使用JSONP技术时，前端代码会生成一个动态的script标签，并在链接中附带需要获取的数据及回调函数名称等参数，然后将该script标签插入到页面中，以触发跨域请求并获取数据。在前端代码中定义一个动态的script标签，设置其src属性为服务端接口的URL地址，并在链接中添加callback参数，值为第一步定义的回调函数名称。在前端代码中定义一个回调函数，用于接收服务端返回的数据。
JavaScript实现JSONP（附完整源码）
最新发布
希望我的博客，能帮上你解决学习中工作中所遇到的问题
11-03 214
JavaScript实现JSONP（附完整源码）
Jquery ajax jsonp跨域调用实例代码
04-13 666
简单的来说，出于安全方面的考虑，页面中的JavaScript无法访问其他服务器上的数据，即“同源策略”。而跨域就是通过某些手段来绕过同源策略限制，实现不同服务器之间通信的效果。URL说明允许通信同一域名下允许同一域名下不同文件夹允许同一域名，不同端口不允许同一域名，不同协议不允许域名和域名对应ip不允许主域相同，子域不同不允许同一域名，不同二级域名（同上）不允许不同域名不允许。
JQuery jsonp 使用示例代码
10-29
JQuery jsonp 使用示例，想学习的朋友可以参考下。
ajax跨域请求jsonp前后台代码
08-31
基于ajax方式的跨域请求jsonp的前后台代码
jquery ajax jsonp跨域调用实例代码
10-26
今天研究了AJAX使用JSONP进行跨域调用的方法，发现使用GET方式和POST方式都可以进行跨域调用,这里简单分享下，方便需要的朋友
jsonp跨域请求资源报错
weixin_44585148的博客
09-13 341
错误： 原因： 请求资源服务器返回的是json对象，非jsonp格式数据。 dataType:'jsonp'设置请求跨域资源，返回 jsonp格式数据。跨域的本质就是服务器返回一个方法调用，jsonp格式应该类似callback ( { json:obj} ); 总之，如果服务器返回的不是一个方法调用，jsonp格式的跨域请求就会报错。 解决： 前端代码受到同源策略限制，但如 .php，.jsp等后端代码...
Ajax同源政策--学习
weixin_43482965的博客
04-02 309
一、Ajax请求限制 Ajax 只能向自己的服务器发送请求。比如现在有一个A网站、有一个B网站，A网站中的 HTML 文件只能向A网站服务器中发送 Ajax 请求，B网站中的 HTML 文件只能向 B 网站中发送 Ajax 请求，但是 A 网站是不能向 B 网站发送 Ajax请求的，同理，B 网站也不能向 A 网站发送 Ajax请求。 二、什么是同源 如果两个页面拥有相同的协议、域名和端口，那么这...
Jsonp代码实现
SunShinessx的博客
02-24 616
关键点： 1.利用script标签的src请求数据，且浏览器不进行同源限制 2.与服务器约定好callback，服务器返回的是一段js；在window里面定义全局callback函数，执行回调函数。 3.缺点：只能进行get请求 源码： &lt;script type="text/javascript"&gt; function createScript(url, charse...
jsonp 的原理及应用
CODER的博客
11-06 9444
1. 什么是jsonp jsonp全称json with padding，填充式的json,jsonp是为跨域而生的 2. 那么有哪些标签可以跨域呢 <img src=""> //图片 <link href=""> //css <script src=""> //程序 我们可以使用script来帮助我们跨域 2.1 写一个服务端 server.js //服务端 //引入支持接受请求，返回响应的模块http const http=require("http"); //创建
前端跨域jsonp的细节，挡住面试官的连环提问
AlexGeek
04-16 2525
1.前言 在前端面试中，想必每一个人都会被问到跨域相关的问题，背过八股文的小伙伴肯定对跨域的解决对答如流，常见的跨域解决方案在网上有很多整理，但是如果问到实现的细节，你是否能够手写实现或者深入解读呢？其实很多情况下，面试官不仅仅会考察第一层的概念，还会追问第二层、第三层内容，所以对于实现原理的掌握是必要的，今天笔者就整理一下跨域的基本方式，重点介绍jsonp的实现~ 2.跨域方案 常见的跨域解决方案有8种左右，在面试中能答出4-5种就可以了~ 2.1 如果只是想要实现主域名下的不同子域名的跨域操作，我们
jsonp介绍
YY的博客
11-16 2913
jsonp介绍
Java中JSON字符串与Java对象之间的转换
weixin_45082647的博客
07-31 3793
文章目录1、Java与前台的交互2、解析JSON的第三方工具3、JSON数据和Java对象的相互转换Java对象转换JSON字符串JSON字符串转为Java对象 1、Java与前台的交互 作为后台，Java不仅需要接收前台传递过来的数据，还需要将数据库中的数据查出来打包好发给前台，无论是接收还是发送的数据，都是以JSON字符串的形式存在的； JSON数据详解 我们在发送JSON字符串的时候，可以选择手动拼串，但是这样显然很繁琐，同样，接收前台返回来的JSON字符串，解析该字符串也会显得很繁琐； 我们可以使
用asp写一段后端jsonp代码
03-04
好的，以下是一个使用ASP编写的后端JSONP代码示例： ``` Dim callback callback = Request.QueryString("callback") ' 构造要返回的 JSON 数据 Dim json_data json_data = "{""name"": ""John Smith"", ""age"": ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值