前言:学习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等内容的复习和综合应用,通过不断地学习,让学到的内容更加丰富。