前后端交互_前后端交互技术

前后端交互

一、JSON结构：

1、json介绍：同源策略只会出现在ajax中

JSON是一种轻量级的数据交换格式，它使得人们很容易的进行阅读和编写。同时也方便了机器进行解析和生成。它是基于JavaScript Programming Language，Standard ECMA-262 3rd Edition - December 1999 的一个子集。JSON采用完全独立于程序语言的文本格式，但是也使用了类C语言的习惯（包括C, C++, C#, Java, JavaScript, Perl, Python等）这些特性使JSON成为理想的数据交换语言。

2、JSON基本格式：

• 对象格式：是一个无序的“键值对”集合，显示的时候看似有顺序，其实就是巧合。

  {"id":1,"name":"黑熊精","age":3000,"sex":"男"}
  1

• 数组格式：是值的有序集合。

  ["张三","李四","不知火舞"]
  1

• 嵌套格式：

  [{"id":1,"name":"黑熊精","age":3000,"sex":"男"},{"id":3,"name":"金角大王","age":3000,"sex":"男"}]
  1

二、实现前后端交互

1、使用jQuery的ajax来完成

2、Ajax：

• 特点:局部刷新，异步请求

• AJax说明：

  • ajax是实现前后端交互最为常用的一种方式
  • 原生的JS中包含了Ajax，但是操作比较复杂，20行左右
  • JQuery是JS的一种高级函数类库
  • JQuery提供了一种高效的ajax的请求的方式

  3、Ajax一步调用原理：

  **同步：**用户发起请求时，要求第一时间服务器做出响应，在此期间用户不可以做其他操作，只能等待服务器返回数据，刷新1次。

  **异步：**用户发起请求时，要求服务器做出响应，在此期间用户可以做其他的操作，如果后端服务器返回数据，则通过回调函数通知客户，局部刷新多次。

  

4、常见的请求类型：

​ GET/POST/DELETE/PUT

​ 查询/提交/删除/修改

5、AJAX实现数据获取

1、使用JQuery的ajax请求

<script>
			//jQuery语法: 让整个页面浏览器加载完成之后,再次执行JS
			$(function(){
				/**
				 * data参数传递：  id=100,name=tom age=18
				 * 	1.对象方式数据传参
				 * 		语法: {key:value,key2:value2}
				 *  2.拼接字符串的方式
				 * 		语法: key1=value1&key2=value2
				 */
				$.ajax({
					type: "get",	//请求类型
					url:  "http://localhost:8090/findAll", //url地址
					data: {id:100,name:"tom",age:18},
					//data: "id=100&name=tom&age=18",		   //参数
					success: function(data){
						console.log(data)
					}
				})
			})
		</script>

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

2、跨域请求实现：由于跨域请求，则需要在Controller类上添加@CrossOrigin的注解

3、关于Ajax返回值数据说明：

​ 后台服务器返回的是JSON串，但是经过Ajax业务调用，则程序会自动的根据返回值类型进行解析，解析之后形成了JS对象

​ API说明：预期服务器返回的数据类型，如果不指定，JQuery将自动根据HTTP包MIME信息来智能判断，比如XML。MIME类型就被识别为XML

​ 虽然服务器的返回值是JSON，但是经过AJax智能的判断，则动态的转化为JS的对象

4、JS原生for循环写法

• ​ 原生写法：

  for(index in data){
      console.log(data[index])
  }
  1
  2
  3

• ​ in关键字

  说明：其中index代表的是遍历的下标，从0开始

  for(user in data){
      console.log(user)
  }
  1
  2
  3

• ​ of关键字

  说明：其中user代表的是遍历的对象，更加常用

  for(user of data){
      console.log(user)
  }
  1
  2
  3

5、JS模板字符串语法：

​ 说明：原生的JS中经常出现字符串拼接的现象

​ 弊端：1、如果换行，则需要重新编辑字符串。2、如果其中需要动态的拼接参数，则结构复杂

​ 3、使用原生的字符串拼接，没有数据结构，导致阅读混乱

​ 解决：优化：ES6-7提供了新的模板语法，反引号，作用是动态拼接字符串

let tr=`
	<tr align='center'>
		<td>${user.id}</td>
		<td>${user.name}</td>
		<td>${user.age}</td>
		<td>${user.sex}</td>
	</tr>			`
1
2
3
4
5
6
7

三、JS变量基本用法：

1、var关键字

var id:表示定义一个变量名称为id,该变量相当于在全局返回内声明了一个变量，该变量声明没有作用域的概念（整个网页都能用）

弊端：由于没有作用域的规定，导致变量使用混乱

2、let关键字

说明：从新版本的JS开始，兼容支持let，该关键字的用法与var一样，但是有作用域的范围，更加的通用

3、const关键字

说明：该关键字用来标识敞亮，该数据不变

4、关于AJAX总结：

1、AJAX是局部刷新，异步访问

2、AJAX异步的核心在于AJAX引擎（代理）

3、AJAX请求调用时，无论是否成功，都通过回调函数的 方式进行，success/error

4、AJAX参数传递写法2种，

• 对象写法
• 字符串拼接

5、for循环方式：常规方式循环，in循环，of循环

6、模板字符串用法：``号取值${key}

7、定义变量用let定义常量用const

四、跨域说明：

1、同源策略

介绍：如果浏览器的网址与ajax请求网址必须满足同源策略，则浏览器才能解析ajax，执行正确的请求

什么 同源策略：

规定求 请求协议：//域名：端口号

​ 如果三者都满足，则符合同源策略，浏览器可以正确解析

​ 如果有一个不满足同源策略，称之为跨域请求，则浏览器不能正常解析Ajax请求

2、关于同源策略的判断：

​ 注意：不要顾虑太多，规则仅仅是字面意思，不要管dns，只要是不一样就绝对是跨域请求

五、CORS介绍：

1、CORS介绍：

​ CORS是一个W3C标准，全称是**“跨域资源共享”**（Cross-origin resource sharing）。

​ 他允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而客服AJAX只能同源使用的限制

CORS需要浏览器和服务器同时支持，目前所有的浏览器支持该功能，IE浏览器不能低于IE10。如果实现跨域资源共享，则需要单独配置服务器端即可，只需要将允许访问的页面的网址，通过响应头的形式进行设定，则可以实现跨域请求。

2、跨域流程图：

注意：restful本身还是get请求