AJAX

一、http 协议

（一）、URL

URL完整的结构：

<scheme>://<user>:<pwd>@<host>:<port>/<path>;<params>?<query>#<frag>

①scheme：
方案，协议。以哪种方式获取服务器资源。
不区分大小写。常见的协议

②<user>:<pwd>（已作废，少有人用）
登录这个服务器的用户名和密码
③host
主机名称 127.0.0.1 ip地址
www.baidu.com 域名
标上你要访问的服务器，在网络上的门牌号

④port
端口号

任何一个程序，安装在电脑上，都会自动生成一个端口号
端口号理论最大值 0~65535 不要修改 0 ~ 1024 的端口

⑤path
路径，结构目录，资源放在服务器上存放的位置
⑥params
参数，跟踪状态的参数 session / cookie
⑦query
get 方法提交请求时，问号后面的查询字符串
⑧#<frag>
锚点

（二）、HTTP

HyperText Transfer Protoclo 超文本传输协议
规范了数据是如何打包和传递的（专门用于传递html文件）
HTTP协议的历史

（三）、web 请求的原理

DNS解析

（四）、报文/消息 Message

请求消息 Request Messange(请求起始行，请求头，请求主体)
响应消息Response Message (响应起始行，响应头，响应主体)

（五）、请求消息Request Message

请求消息，客户端发送给服务器的数据块
由三部分组成，请求起始行，请求头，请求主体

1、请求起始行

(1).请求的方法

HTTP 协议规定的请求的方法
get 明文传参，上限2kb，向服务器要参数的时候，无请求主体。
post 隐式传参，无上限，向服务器发送参数的时候，有请求主体 。
put 放置文件到服务器，一般会被禁用
delete 把服务器上某个文件删除，一般会被禁用

Restful 规则中的方法
Restful API 是一种规则，利用 http 已有的四个方法定义了4个行为，使用这4个行为发送请求
get 查数据的时候用（查），无请求主体，后台req.query。
post 创建（增），有请求主体，后台req.body。
put 修改数据（改），有请求主体，后台 req,body。
delete 删除（删），无请求主体， 后台req.query。

(2).协议版本号

(3).请求的URL

2、请求头

①Host:www.tmooc.cn
客户端告诉服务器，我要访问ww.tmooc.cn 这个主机。
②Connection:keep-alive
客户端告诉服务器，请开启持久链接。
③User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.90 Safari/537.36
告诉服务器，我这个浏览器的类型和版本号
④Accept-Encoding:gzip
告诉服务器，我这个浏览器可以接收的压缩文件的格式
⑤Accept-Language:zh-CN
告诉服务器，我这个浏览器可以接收的自然语言的类型
⑥Referer:http://www.tmooc.cn
告诉服务器，我的请求来源于哪里

3、请求头

formdata
get /delete 没有请求主体
post/put 有请求主体

（六）、响应消息Response Message

响应消息，服务器发送给客户端的数据块
由三部分组成，响应起始行，响应头，响应主体

1、响应起始行

http/1.1 200 OK

(1) 协议版本号

http/1.1

(2)响应状态码

服务器告诉客户端，服务器的响应状态码是什么
1xx，正在请求，提示信息
2xx，200 响应成功
3xx， 301 永久重定向；
302 临时重定向；
304 请求为改变，命中缓存；
4xx，404 not found 请求资源不存在
403 权限不够
405 请求方法不被允许
5xx 500服务器代码出错

(3) 原因短句

对响应状态码简短的说明

2、响应头

(1) Date:Sat, 07 Dec 2019 06:51:37 GMT
格林威治时间
告诉浏览器，服务器响应的时间
(2)Connection:keep-alive
服务器告诉浏览器，我已经打开了永久链接
(3)Content-Type:text/html
告诉浏览器，响应主体的类型是什么
text/html 响应回来的数据是html文本
text/css 响应回来的数据是css文本
application/javascript js js文本
application/json json文本
application/xml xml文本
image/jpg
image/png
image/gif

3、响应主体

服务器传递给浏览器的数据

（七）、缓存

1、什么是缓存

2、缓存的优点

3、缓存的原理

缓存原理：新鲜度和过期
1.请求–无缓存–谅解服务器–存缓存–客户端渲染
2.请求–有缓存–够新鲜–使用缓存–客户端渲染
3.请求–有缓存–不新鲜–连接服务器确认是否过期–没过期–更新缓存新 鲜度–客户端渲染
4.请求–有缓存–不新鲜–连接服务器确认是否过期–过期–连接服务器–存缓存–客户端渲染

4、缓存的操作（需要前端和后端都写代码）

① 缓存相关的消息头

Cache-Contrlo:max-age=0（单位是s）
从服务器将文档传到客户端之时起
此文档处于新鲜的秒数，是一个相对时间

②修改请求消息头

（八）、HTTP性能优化

HTTP的连接过程
发送请求–>建立连接–>服务器处理请求–>访问资源–>构建响应–>发送响应–>记录日志

1、http连接的性能优化
①减少连接创建的次数（开启持久链接）
②减少请求的次数（代码设计更合理）
③提高服务器运行的速度
④尽可能的减少响应数据的长度

（九）、安全的HTTP协议，HTTPS

HTTPS，是安全版本的http协议
S:SSL为数据通信提供安全支持

二、ajax

function show(){
	//1.创建异步对象
	var xhr = new XMLHttpRequest();

	/*4.绑定监听，接收响应数据
		(1).xhr.readyState 属性
		用于表示xhr对象的请求状态，一共5个状态
			0：请求尚未初始化
			1：已经打开服务器连接，正在发送请求
			2：接收响应头
			3：接收响应主体
			4：响应数据接收完毕
		(2)xhr.status:响应状态码
	*/
	xhr.onreadystatechange() = function (){
		if(xhr.readyState == 4 && xhr.status == 200){
			var result = xhr.responseText;
			
		}
	}
	
	/*2.打开连接，创建请求
		xhr.open(method,url,isAsync);
		method:请求的方法;
		url:请求的地址URL;
		isAsync:是否要使用异步，Boolean值,true/false
	*/
	xhr.open("get","http://127.0.0.1:8080/login",true);
	//3.发送请求
	xhr.send(formadata);
	/*注意：get方法，没有formdata请求主体，所以在使用get方法时，	
	xhr.send()括号中参数可以不填写，或者填null
	*/
	
}

4、代参数的get请求

<div>
	用户名:	<input type="text" id="uname"/><br>
	密  码：<input type="password" id="upwd"/><br>
	<input type="submit" onclick="login()"/>
</div>
</body>
<script>
	function login() {
		var $uname = getElementById("uname").value;
		var $upwd = getElementById("upwd").value;

		//1、获取异步对象xhr
		var xhr = new XMLHttpRequest();

		//4、绑定监听事件，获取响应
		xhr.onreadystatechange = function (){
			if (xhr.readyState == 4 && xhr.status == 200){
				var result = xhr.responseText;
				console.log(xhr.responseText);
			}
		};

		//2、打开连接，创建氢气
		xhr.open("get","/user/login?uname=" + $uname+"&upwd=" + $upwd,true);

		//3、发送请求
		xhr.send(null);
	}
</script>

针对兼容IE8以下的版本
IE8以下获取异步对象：

var xhr = new ActiveXObject("Microsoft.XMLHttp") 

三、XML

eXtensible markup language
可扩展的 标记 语言
所有的标签，属性都是自己定义
xml 就是做数据传递的，不用于数据展示

1、语法
①首行做版本声明

<?xml version="1.0" encoding="utf-8"?>

②xml标记，都是自己命名，只有双标记，没有单标记
③xml标记，严格区分大小写，开始标记和结束标记必须一致
④每个xml 文档，有且只有一对根标记

eg:

<?xml version="1.0" encoding="utf-8"?>
<studentList>
	<student>
		<uid>1001</uid>
		<uname>hanmeimei</uname>
		<age>20<age>
	</student>
	<student>
		<uid>1002</uid>
		<uname>lilei</uname>
		<age>22</age>
	</student>
</studentList>

2、xml 解析

<!doctype html>
<html>
	<head>
		<title></title>
		<meta charset="utf-8">
		<script>
			function getXML(){
				//1、创建xhr对象
				var xhr = new XMLHttpResquest();
				//4、绑定监听，获取响应
				xhr.onreadystatechange = function(){
					if(xhr.readyState == 4 && xhr.status == 200){
						var result = xhr.responseXML;
						console.log(result);
						//解析xml这个对象
						//①找到根元素
						var studentList = result.getElementsByTagName("studentlist");
						//②用根元素找到第二层元素
						var student = studentList[0].getElementsByTagName("student");
						//③找到第三层元素
						var uname = student[1].getElementByTagName("uname");
						//获取元素内内容
						var unameData = uname[0].innerHTML;
					}
				}
				//2、打开连接，创建请求
				xhr.open("get","stus.xml",true);
				//3、发送请求
				xhr.send();
			}
		</script>
	</head>
	<body>
	</body>
</html>