版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/a954553391/article/details/88033770
前言：学习AJAX不仅仅是学习AJAX，这里面更用到了HTTP、缓存、DOM，下面和大家分享一些和AJAX相关的内容。
（一）HTTP 协议
1.作用
规范了数据是如何打包的 以及 数据时如何传递的
2.Message 消息 / 报文
Message 指的是在HTTP客户端与服务器间传递的数据块
分类：
（1）Request Message : 客户端向服务器发送的【请求】消息
（2）Response Message : 服务器端根据客户端的请求消息，返回给客户端的响应消息
3.请求消息(Request Message)
（1）请求起始行
《1》请求方法
①GET
表示客户端向获取服务器上的资源(img/js/..)
特点：
1、无请求主体
2、依靠地址栏传递数据给服务器
②POST
表示客户端想传递数据给服务器
特点：
1、有请求主体
③PUT
表示客户端想把文件放到服务器上(禁用)
特点：
1、有请求主体
4、DELETE
表示客户端想删除服务器上指定的文件(禁用)
5、HEAD
表示只想获取指定的响应头
6、CONNECT
测试连接
7、TRACE
追踪请示路径
8、OPTIONS
选项，保留以后使用... ...
《2》请求URL
《3》协议 和 版本号
HTTP / 1.1
（2）请求头
1、Host:localhost
告诉服务器请求哪一个虚拟主机
2、Connection:keep-alive
告诉服务器做持久连接
3、User-Agent
告诉服务器，客户端浏览器的类型
4、Cache-Control:max-age=0
告诉服务器缓存信息，max-age，即不缓存
5、Accept-Language : zh-CN
告诉服务器自己能接收的自然语言
6、Accept-Encoding:gzip
告诉服务器自己可以接收的压缩类型
7、Referer: url
告诉服务器请求来自于哪个页面
（3）请求主体
Form Data : 是真正的请求主体
注意：查询字符串
Query String : 不算作请求主体的，是属于 URL 中的一个部分
4、响应消息(Response Message)
1、响应起始行
1、协议版本号
HTTP / 1.1
2、响应状态码
1、1XX
提示信息
2、2XX
200 ：服务器端成功响应所有的信息 OK
3、3XX
需要客户端进行重定向
301 ：永久性重定向
302 ：临时重定向
304 ：Not Modified
4、4XX
客户端请求错误
404 ：Not Found，请求资源不存在
403 ：Forbidden，没有访问权限
405 ：Method Not Allowed，请求方法不被允许
5、5XX
服务器运行错误
500 ：服务器内部错误
501 ：没有实现
3、原因短句
对状态码的简单解释
200 : OK
404 : Not Found
2、响应消息头
1、Content-Type
响应的主体类型，告诉浏览器，响应的数据时什么格式以及什么类型的
取值：
1、text/plain
纯文本，告诉浏览器按纯文本的方式解析
2、text/html
文本与网页，告诉浏览器按html的格式解析内容
3、text/css
样式，告诉浏览器按 css 的方式解析
4、application/javascript
JS代码片段，按JS的方式运行数据
5、application/xml
按 xml 的方式解析
6、application/json
按 json 的方式解析
3、响应主体
由服务器端响应回来的数据
（二）缓存
1、缓存的工作原理
客户端可以自动保存已访问过得文档的副本，这些副本就是所谓的缓存
当客户端再向同一URL发送请求时，那么就直接从缓存中将文件取出来，而不用再重新发送请求
2、优点
1、减少了冗余的数据传输，节省流量
2、缓解服务器带宽瓶颈的问题，服务器可以节省更多的带宽
3、降低了对服务器的资源消耗和运行要求
4、降低了由于远距离而造成的加载延迟
3、与缓存相关的消息头
1、Cache-Control
作用：从服务器将文档传来之时起，认为最新的秒数
取值：秒数 60 / 3600 / ... ...
如果取值为 0 / no-cache，表示每次都要重新刷新网页
2、Expires
明确指定缓存的过期时间,取值是格林尼治标准时间(GMT)
Expires:Fri,25 Aug 2017,08:00:00 GMT
Expires:0 表示不需要缓存
4、如何在网页中设置消息头
在 meta 标记中完成消息头的设定：
1、http-equiv ：指定消息头的名称
2、content ：指定消息头对应的内容
示例：
设置网页的消息头Cache-Control,其值为 no-cache
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html">
</head>
（三）DOM操作
DOM:Document Object Model 文档对象模型
让JS又能力操作页面的元素
1、使用JS获取页面上的某个元素
1、为元素增加ID属性
<div id="d1">Hello Wolrd</div>
2、在JS中，允许通过元素的ID获取页面元素
var elem = document.getElementById("元素ID");
elem 就是指定ID值的元素在JS中的表现形式
2、修改/获取 标记内的内容
属性：innerHTML
赋值：为 某元素的 innerHTML 属性赋值
取值：获取某元素的innerHTML 属性
示例:
var elem=document.getElementById("d1");
elem.innerHTML = "你好中国!";
console.log(elem.innerHTML);
3、获取/设置 表单控件的数据
<input type="text/password" value="">
在DOM中，文本框，密码框，... ...也都是通过value属性来获取或设置控件的值
4、简化 document.getElementById()
document.getElementById 的作用：
根据 "指定的ID值" 获取对应的 "HTML元素"
/**
* 根据指定的ID值，获取对应的HTML元素
* 参数 id ：要获取的元素的ID值
* 返回值 ：获取的对应的HTML元素
*/
function $(id){
return document.getElementById(id);
}
5、HTML 元素的事件
事件：在某些特殊的情况下，可以被激发的一个操作
常用事件：onclick,... ...
1、文本框 和 密码框 的事件 - onblur
onblur事件 ：鼠标失去焦点时的事件
2、文本框 和 密码框 的事件 - onfocus
onfocus事件 ：获取焦点时要执行的操作
总结：AJAX对于用户真的是非常友好，同时学习AJAX又不仅仅是学习AJAX，还是对JSON，
HTML等内容的复习和综合应用，通过不断地学习，让学到的内容更加丰富。