前后端交互B/S

对于web开发而言，仅仅掌握html+css+JavaScript，实现相关的页面功能已经不是困难的事，然而很多初级前端开发者对于实现前后端数据交互还所知甚少，网页的使用数据是实时获取的，所以有必要掌握数据交互的基本过程。
网络数据处理分为表示层，处理层，数据层。我们使用浏览器打开的网页就是表示层，业务层就是利用后端代码进行数据处理，数据层用来存储相关数据，使用后端代码来操作数据库的增删改查。
#传输协议
http传输协议规范了前端怎么和后端沟通，后端又是怎么把数据传递回来，一个http的请求步骤分为

1. 建立连接
2. 前端发送请求
3. 后端返回响应
4. 断开连接

#B/S概念
B/S就是一种Web发展起来后的浏览器/服务器的网络模式结构，使用浏览器在服务器上完成前后端数据交互。这种架构兼容性强大，且便于维护。
#关于ajax技术
ajax技术是JavaScript语言里的一个方法，是异步的JavaScript发送json对象和后端语言交互的手段。
使用JavaScript语言去请求一个后端的地址，后端输出的内容就不会直接显示在浏览器上，而是返回给JavaScript语言。
这里以与PHP后端交互举例，简单介绍ajax如何传递前端数据的请求步骤。

	//创建一个ajax对象
	var xhr = new XMLHttpRequest()
	//配置带前端参数的请求信息（请求方式，以GET为例）
	xhr.open('GET','./ajax.php?a=100&b=200')
	//发送请求
	xhr.send()
	//接受响应
	xhr.onload = function(){
	//函数在请求完成时触发
	//在这里得到后端返回的数据
	console.log(xhr.responseText)//打印响应体内容
	}

php代码片段

	//接受前端GET方式传递来的参数
	$a = $_GET['a'];
	$b = $_GET['b'];
	echo "前端带来的参数，a的参数是：$a,b的参数是：$b";

ajax请求方式不同，方式也有相应的区别。主要使用GET和POST两种方式，
GET

1. 倾向于向服务器获取数据
2. 直接再地址后面进行拼接(请求体是空的)
3. 大小限制为 2KB 左右(因为 IE 最多传递 2KB)
4. 会被浏览器主动缓存
5. 相对于 POST 不是很安全(明文发送)
6. 数据格式必须是 url 编码的格式, 如果不是会自动转换成 url 编码

POST

1. 倾向于向服务器传递数据
2. 在请求体里面传递过去(地址后面没有)
3. 理论上是没有限制(但是可以被服务器限制)
4. 不会被浏览器主动缓存, 需要手动设置
5. 相对于 GET 比较安全的(暗文发送)
6. 据格式理论上我所谓, 但是要和请求头中的 content-type 一致

只有熟悉了解各种前后端交互的原理和技术，才能成为一名合格的前端开发工程师。