5、Ajax/JSON结构说明/跨域问题/VUE入门

最新推荐文章于 2024-04-01 08:44:24 发布

柒熙曦

最新推荐文章于 2024-04-01 08:44:24 发布

阅读量101

点赞数

分类专栏： lll

原文链接：https://harrylyj.blog.csdn.net/article/details/117435512

版权

lll 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.jQuery中的Ajax

1.1 $.ajax说明

	/**
	 * $.ajax相关说明
	 * 1.{key:value}
	 * 2.type: ajax请求的方式 get/post/put/delete
	 * 3.简化$.get(..) $.post(...)  $.getJSON(...)
	 * 4.url: 远程服务器地址
	 * JSONP: JS端解决跨域问题的一种机制. 现在几乎淘汰了
	 * cache: true 默认值为true
	 * async: true 默认异步!!!!
	 */
	$.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 回调地狱(扩展)

解释: 由于ajax多层级嵌套,导致返回值的回调函数解析困难.把这种调用称之为回调地狱问题.
解决方案:
1.闭包解决闭包非闭
2. 通过promise对象进行封装 vue对象中解释的.

2.JSON结构

2.0 什么是JSON

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

2.1 对象格式

语法: {“id”:100,“name”:“tomcat”}
对象是无序的
在这里插入图片描述

2.2 数组格式

语法: [1,2,3,“张三”,“李四”] 值的有序集
在这里插入图片描述

2.3 嵌套格式

核心知识点: value可以嵌套
在这里插入图片描述

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

3.跨域问题说明

3.1 浏览器同源策略

概念: 要求请求协议://域名:端口号都相同.
说明: 浏览器解析页面时,当页面中有ajax请求时,则要求页面的URL地址,与Ajax请求的地址必须满足同源策略的规范.
同源策略:

请求协议 http:// https://
请求域名
请求的端口
上述的三项必须相同. 满足同源策略.浏览器可以解析数据,否则不能正常解析.

3.2 同源策略案例

案例练习1:
URL: http://www.jd.com/xxx/xxx
Ajax: https://www.jd.com/xxx/xxx/xxx 协议不同

案例练习2:
URL: http://www.jd.com:80/xxx/xxx 满足要求
Ajax: http://www.jd.com:80/xxx/xxx/xxx

案例练习3: IP与域名对应
URL: http://www.jd.com:80/xxx/xxx 不满足要求域名不同
Ajax: http://10.0.0.6:80/xxx/xxx/xxx

案例练习4:
URL: http://www.jd.com/xxx/xxx 不满足要求域名不同
Ajax: http://www.jt.com/xxx/xxx/xxx

3.1 跨域

3.1.1 跨域概念

说明: 如果URL地址与Ajax请求路径违反了同源策略,则称为跨域请求.
核心:

浏览器URL地址: http://127.0.0.1:8848/cgb2103/demoWeb/userList.html
Ajax请求地址: http://localhost:8090/getUser
该操作不满足同源策略

3.1.2 跨域解决策略

旧的方式: JSONP(了解)
新的方式: CORS 方式

3.1.3 CORS介绍

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

4. VUE

具体内容查看VUE-课堂DEMO 文档

4.1 入门案例

4.1.1 导入JS文件

在这里插入图片描述

4.1.2 编辑入门案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue入门案例</title>
	</head>
	<body>
		<!-- 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>
	</body>
</html>

柒熙曦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
5、Ajax/JSON结构说明/跨域问题/VUE入门

1.jQuery中的Ajax1.1 $.ajax说明/** * $.ajax相关说明 * 1.{key:value} * 2.type: ajax请求的方式 get/post/put/delete * 3.简化$.get(..) $.post(...) $.getJSON(...) * 4.url: 远程服务器地址 * JSONP: JS端解决跨域问题的一种机制. 现在几乎淘汰了 * cache: true 默认值为true
复制链接

扫一扫