一、HTTP协议
1、作用
规范了数据是如何打包的,以及数据时如何传递的
2、Message 消息/提交
Message指的是在HTTP客户端与服务器间传递的数据块
分类:
1、Request Message:客户端向服务器发送的请求消息
2、Request Message:服务器端根据客户端的请求消息,返回给客户端的响应消息
3、请求消息(Request Message)
1. 1、请求起始行
-
请求方法
1.GET 表示客户端向获取服务器上的资源(img/js/…) 特点: 1.无请求主体 2.依靠地址栏传递数据给服务器 2.POST 表示客户端向传递数据给服务器 特点: 有请求主体 3.PUT 表示客户端想把文件放到服务器上(禁用) 特点: 有请求主体 4.DELETE 表示客户端想要删除服务器上指定的文件(禁用) 5.HEAD 表示指向获取指定的响应头 6.CONNECT 测试连接 7.TRACE 追踪请示路径 8.OPTIONS 选项,保留以后使用…... 2.请求URL 3.协议 和 版本号
-
请求头
1.Host:localhost
告诉服务器请求哪一个虚拟主机
2.Connection
告诉服务器做持久连接
3.Uer-Agent
告诉浏览器,客户端浏览器的类型
4.Cache – Control:max-age=0
告诉服务器缓存信息:zh –CN
5.Accept-Language
告诉服务器自己能接收的自然语言
6.Accept-Encoding:gzip
告诉服务器自己可以接收的压缩类型
7.Referer:URL
告诉服务器请求来自于哪个页面 -
请求主体
Form Data: 是真正的请求主体
注意::查询字符串
Query String:不算做请求主体的,是属于URL中的一部分
4、响应消息(Response Message)
1、响应起始行
-
协议版本号
http / 1.1
-
响应状态码
1、 1XX:提示信息
2、 2XX
200:服务器端成功响应所有的信息 ok
3、 3XX:需要客户端进行重定向
301:永久性重定向
302:临时重定向
304:Not Modified
4、 4XX :客户端请求错误
404:Not Found ,请求资源不存在
406:Forbidden , 没有访问权限
405:Method Not Allowed 请求方式不被允许
5、 5XX :服务器运行错误
500:服务器内部错误
501:没有实现 -
原因短句:对状态码的简单解释
200:OK 400:Not Found
2、响应消息头
-
Content-Type:text/html;charset-utf-8
响应的主体类型,告诉浏览器,响应的数据是什么格式以及什么类型的
取值:
1、text/plain
纯文本,告诉浏览器按纯文本的方式去解析
2、text/html
文本与网页,告诉浏览器按照html的格式解析内容
3、text/css
样式,告诉浏览器按CSS的方式解析
4、application/javascript
JS代码片段,按JS的方式运行数据按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:指定消息头对应的内容
<head>
<meta charset="UTF-8">
<meta http-equiv="Cntent-Type" content="text/html">
三、DOM操作
DOM:Document Object Model 文档对象模型
让JS有能力操作页面的元素
<div>Hello World<div>
1、使用JS获取页面上的某个元素
1、为元素增加ID属性
<div id="d1">Hello World<div>
2、在JS中,允许通过元素的ID获取页面元素
var elem= document.getElementById("元素ID");
elem就是指定ID值的元素在JS中的表现形式
2、修改/获取 标记内的内容
属性:innerHTML
赋值:为某元素的innerHTML属性赋值
取值:获取某元素的innerHTML属性
ex:
elem.innerHTML =" 你好中国" ;
console.log(elem.innerHTML) ;
3、获取/设置 表单控件的数据
<input type="text/password" value="">
在DOM中,文本框、密码框……也都是通过value属性来获取或设置控件的值
步骤1:
1、获取页面表单控件元素(通过ID获取);
2、通过元素的value属性 获取/设置 控件的值
练习
1、在页面创建一个文本框,一个div,一个按钮
2、点击按钮时,将文本框中的数据,以一级标题的形式显示在div中
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事件:获取焦点时要执行的操作
3、 <body> 的事件 –onload
在网页加载的时候,要指定的操作,可以封装在onload中。