2021-08-18

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

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("服务器正忙,请稍后!")
					}
				})
原文链接：https://blog.csdn.net/qq_16804847/article/details/117435512

1.2 回调地狱(扩展)

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

2.JSON结构

2.0 什么是JSON

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

2.1 对象格式

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服务端跨域