devbox
我家自动化
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Java学习笔记————Ajax&JSON结构&跨域问题&VUE入门_java请求路径为.json支持跨域吗

作者：我家自动化 | 2024-06-09 21:32:22

赞

踩

java请求路径为.json支持跨域吗

AJax

jQuery中的Ajax

$.ajax说明

/**
* $.ajax相关说明
* 1.{key:value}
* 2.type: ajax请求的方式 get/post/put/delete
* 3.简化$.get(..) $.post(...)  $.getJSON(...)
* 4.url: 远程服务器地址
* JSONP: JS端解决跨域问题的一种机制. 现在几乎淘汰了
* cache: false 默认值为true	表示优先加载缓存
* async: false 默认异步!!!!	在出现回调地狱的情况时，建议修改成同步
*/
$.ajax({
    type: "get",
    url: "http://localhost:8090/getUser",
    //data: {key:value,key2:value2}
    dataType: "json",
    async: false,	//异步改为同步
    cache: false,  
    success: function(result){  //200
        console.log(result)
    },
    error : function(){
        alert("服务器正忙,请稍后!")
    }
})

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24

回调地狱

解释：由于ajax多层级嵌套，导致返回值的回调函数解析困难，把这种调用称之为回调地狱问题。

解决方案：

​ 1.闭包解决 闭包非闭

​ 2.通过promise对象进行封装 vue对象中解释的

JSON结构说明

什么是JSON？

JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

对象格式

语法：{“key”:“value”,“key”:“value”}

对象是无序的
在这里插入图片描述

数组格式

案例：[“value”,“value”,“value”]

语法：[1,2,3,“张三”,“李四”] 值的有序集

在这里插入图片描述

嵌套格式

核心知识点：value可以嵌套

在这里插入图片描述

["java编程","美团外卖",
 	["吃","玩",
     	{"id":100,
	 	 "names": 
      	 	[
                {"name": "梅超风"},
				{"name": "梅超风老公"},
				["张无忌","赵敏"]
			]
		}
    ]
]

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

跨域问题

浏览器同源策略

概念：要求 请求协议://域名:端口号 相同

说明：浏览器解析页面时，当页面中有Ajax请求时，则要求页面的URL地址，与Ajax请求的地址必须满足同源策略的规范。

同源策略：

​ 1.请求协议 http:// https://

​ 2.请求域名

​ 3.请求端口

​ 上述的三项必须全部相同，满足同源策略，浏览器可以解析数据，否则不能正常解析。

核心知识点：

​ 1.浏览器URL地址：http://127.0.0.1:8848/cgb2103_jt_web/demoWeb/userList.html

​ 2.Ajax请求地址：http://localhost:8080/User/selectAll

同源策略案例

案例练习1：

​ URL:http://www.jd.com/xxx/xxx

​ Ajax:https://www.jd.com/xxx/xxx 协议不同

案例练习2：

​ URL:http://www.jd.com/xxx/xxx

​ Ajax:http://www.jd.com/xxx/xxx/xxxx 满足同源策略

案例练习3：IP与域名对应

​ URL:https://www.jd.com:80/xxx/xxx

​ Ajax:https://www.jd.com/xxx/xxx 满足要求 端口号默认为80所以满足

案例练习4：IP与域名对应

​ URL:https://www.jd.com:80/xxx/xxx

​ Ajax:https://10.0.0.6/xxx/xxx 不满足，域名和IP的ASK码不一致

案例练习4：IP与域名对应

​ URL:https://www.jd.com/xxx/xxx

​ Ajax:https://www.jt.com/xxx/xxx 不满足，域名不一致

什么是跨域

跨域概念

说明：如果URL地址与AJax请求路径违反了同源策略，则称为跨域请求

核心知识点：

​ 1.浏览器URL地址：http://127.0.0.1:8848/cgb2103_jt_web/demoWeb/userList.html

​ 2.Ajax请求地址：http://localhost:8080/User/selectAll

​ 浏览器URL地址与Ajax请求地址不一致

跨域解决策略

旧的方式：JSONP(了解)

新的方式：CORS方式

跨源资源共享（CORS）介绍

跨源资源共享 (CORS) （或通俗地译为跨域资源共享）是一种基于HTTP 头的机制，该机制通过允许服务器标示除了它自己以外的其它origin（域，协议和端口），这样浏览器可以访问加载这些资源。跨源资源共享还通过一种机制来检查服务器是否会允许要发送的真实请求，该机制通过浏览器发起一个到服务器托管的跨源资源的"预检"请求。在预检中，浏览器发送的头中标示有HTTP方法和真实请求中会用到的头。

跨源HTTP请求的一个例子：运行在 http://domain-a.com 的JavaScript代码使用XMLHttpRequest来发起一个到 https://domain-b.com/data.json 的请求。

出于安全性，浏览器限制脚本内发起的跨源HTTP请求。 例如，XMLHttpRequest和Fetch API遵循同源策略。 这意味着使用这些API的Web应用程序只能从加载应用程序的同一个域请求HTTP资源，除非响应报文包含了正确CORS响应头。

核心：服务器在响应头中标识可以访问用户的地址 CORS服务端跨域

在这里插入图片描述

请求响应头信息

在这里插入图片描述

VUE入门

什么是VUE?

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

渐进式: 构建项目可以由简单到复杂

VUE优点

1).体积小 压缩后的文件只有33k

  • 1

2).运行效率更高 采用虚拟机DOM,一种可以预先通过javaScript对数据进行计算.把最终的DOM操作计算出来并且优化的技术. 由于这个DOM操作属于预处理操作,并没有真实的操作DOM ,所以叫做虚拟DOM
3).双向数据绑定 让开发者不再去操作DOM,将更多的经历投入到业务中
4).生态丰富 场面上有大量的开源项目基于vue 进行开发 成熟稳定.

VUE案例

入门案例

导入JS文件

在这里插入图片描述

编辑入门案例
<!-- 1.语法规则：vue中必须定义根目录标签 -->
		<div id="app">
			
			<!-- 利用插值表达式，获取数据 -->
			{{hello}}
		</div>
	
		<!-- 2.引入vue.js -->
		<script src="../js/vue.js"></script>
	
		<!-- 3.编辑VUE JS -->
		<script>
			/**
			 * ES6新规范
			 * 	1.定义变量 var	弊端：没有作用域的概念
			 * 		如果变量名称重复则可能会引发问题
			 * 	2.定义变量 let	有作用域的概念
			 *  3.常量	const	全局唯一，不可改变
			 */
			const app = new Vue({
				// 标识VUE对象的作用范围
				el: "#app",
				//定义数据对象
				data: { 
					hello: "HelloVue"
				}
			})
		</script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
Vue指令集

v-cloak 指令

介绍：这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-cloak练习</title>
		<!-- html样式 -->
		<style type="text/css">
			/* 为属性定义样式 */
			[v-cloak]{
				/* 定义样式不显示 */
				display: none;
			}
		</style>
	</head>
	<body>
		<!-- 
			v-cloak说明
				当程序编译结束时，v-cloak失去效果，
				编译没有结束时，v-cloak的隐藏效果有效
		 -->
		<div id="app" v-cloak>
			<h1>v-cloak属性</h1>
			<!-- 利用插值表达式，获取数据 -->
			<h3>{{hello}}</h3> 
		</div>
		
		<!-- 2.引入vue.js -->
		<script src="../js/vue.js"></script>
	
		<!-- 3.编辑VUE JS -->
		<script>
			/**
			 * ES6新规范
			 * 	1.定义变量 var	弊端：没有作用域的概念
			 * 		如果变量名称重复则可能会引发问题
			 * 	2.定义变量 let	有作用域的概念
			 *  3.常量	const	全局唯一，不可改变
			 */
			const app = new Vue({
				// 标识VUE对象的作用范围
				el: "#app",
				//定义数据对象
				data: { 
					hello: "HelloVue"
				}
			})
		</script>
	</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49

v-text v-html v-pre v-once v-model

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-text练习</title>
		<!-- html样式 -->
		<style type="text/css">
			/* 为属性定义样式 */
			[v-cloak]{
				/* 定义样式不显示 */
				display: none;
			}
		</style>
	</head>
	<body>
		<!-- 
			v-cloak说明
				当程序编译结束时，v-cloak失去效果，
				编译没有结束时，v-cloak的隐藏效果有效
		 -->
		<div id="app">
			<!-- 1.插值表达式 -->
			<h3>{{hello}}</h3>
			<!--
				v-text 数据展现 
				v-text是Vue的指令 
				当数据没有解析时，页面没有任何数据，是v-cloak的升级版本 
			-->
			<h3 v-text="hello"></h3>
			
			<!-- 
				v-html 
					将数据按照HTML形式进行解析
					有时我们页面的部分数据可能来源于其他的服务器
					远程服务器返回的是html代码片段，如果需要将代码片段渲染为页面形式，则使用该命令
			-->
			<div v-html="html"></div>
			
			<!-- v-pre
					说明：跳过这个元素和它的子元素的编译过程。
						 可以用来显示原始 Mustache 标签。
						 跳过大量没有指令的节点会加快编译。
					需求：需要展现原始的Mustache标签，不需要程序编译
			 -->
			 <div v-pre>{{需要展现原始的数据}}</div>
			 
			 <!-- v-once 数据只渲染一次 -->
			 <div v-text="one" v-once></div>
			 
			 <hr>
			 <!-- 
				v-model 双向数据绑定 
						data中的数据发送变化时，页面数据同步更新
						当页面input框中的内容发生变化时，则同步更新data数据
			 -->
			 <div style="border: aliceblue;">
				 <h3>双向数据绑定</h3>
				 用户名：<input type="text" name="name" v-model="name"/>
			 </div>
			 
		</div>
		
		<!-- 2.引入vue.js -->
		<script src="../js/vue.js"></script>
	
		<!-- 3.编辑VUE JS -->
		<script>
			/**
			 * ES6新规范
			 * 	1.定义变量 var	弊端：没有作用域的概念
			 * 		如果变量名称重复则可能会引发问题
			 * 	2.定义变量 let	有作用域的概念
			 *  3.常量	const	全局唯一，不可改变
			 */
			const app = new Vue({
				// 标识VUE对象的作用范围
				el: "#app",
				//定义数据对象
				data: { 
					hello: "HelloVue",
					html: "<h1>好好学习！天天向上</h1>",
					one: "java学习",
					name: "admin"
				}
			})
		</script>
	</body>
</html>


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/695853
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号