一、URL
-
URL与URI
URL - 统一资源定位符
URI - 统一资源标识符URL与URI的区别
所有的URL都是URI，但URI不一定是URL
完整的URL
1) 完整的url具有哪些元素
网络协议://IP地址：端口号/路径;参数?查询数据#锚点
网络协议 -
IP地址 - 每个电脑都有0.0.0.0每个
端口号 - 电脑开放给外部电脑访问接口
路径 - 相对路径和绝对路径
参数 - 某些方案会使用参数来指定输入参数
查询地址 -
key=value&key=value
锚点 -
2) 一般使用时：
http://www.baidu.com/news
http://137.0.0.1:8080?key=value
http://localhost:80#mylink
二、Http协议
-
网络协议
客户端与服务端之间的协议
-
主流协议
http、socket、ftp、pop3
-
http协议
1）多用与b/s架构
2）问题
短连接：每次客户端与服务端交互时，先建立连接，交互完毕后，关闭连接 无状态：服务端只能记得住当次请求状态3）http:1.0 - 目前主流版本
http:1.1 - 较新版本(向下兼容)
http:2.0 - 最新版本
三、http请求协议
-
客户端发送一个请求，应该有如下三个部分：
请求行: 请求方法、请求url 状态码、（http协议版本）
请求头部: 说明服务器要使用的附加信息
请求主体: 提交给服务器的请求数据
-
HTTP客户端请求内容详解
1）请求行 - 请求的信息
请求类型 - get、post/put 请求地址 如果是get请求，参数应该拼到url的后面url?key=value，但请求体为空 如果是post请求，url后面不拼参数，参数放在请求体中 状态码 - 服务器端的状态2）请求头 - 反映给服务端的信息
格式为 key:value，key:value,... accept - 表示浏览器可接受的MIME类型 accept-Encoding - 浏览器能够进行解码的数据编码方式 accept-language - 表示服务端接受的语言 zh-cn:简体中文 zh-tw:繁体中文 zh - 中文 us -英文 connection - 表示当前链接状态 keep-alive - 保持连接 host - 请求的服务器网址； referer - 表示当前的请求来源 实现防盗链接 user-agent 获取到用户浏览器信息 cache-control -缓存控制 max-age 设置最大活动周期,设置缓存保存的最大时间的单位为秒，为0代表不缓存 cookie - 将cookie自动携带到请求头 content-type：互联网媒体类型；使用post请求必须设置这个属性 也叫做MIME类型，在Http协议消息头中，使用Content-Type来表示具体请求中的媒体类型信息。 <form>元素提交时默认的类型 一般文件上传时默认为application/x-www.form-urlencoded Content-Length：请求内容的长度 对于POST请求来说Content-Length必须出现3）请求体 - 存放请求参数
如果为post请求，有值，如果为get请求为空
四、http响应协议
-
服务端给客户端响应信息，应该有如下三部分
响应行：协议版本 状态码 原因短语
响应头部：
响应主题： 返回给客户端的响应数据，可能是字符数据，也可能是字节数据
-
HTTP服务端响应内容详解
1）响应行
状态码 协议版本2）响应头
Allow:服务器支持哪些请求方法 GET、POST Content-Encoding 文档的编码(Encode) Cache-Control: 告诉客户端，服务端的缓存配置 Connection - 表示当前的连接状态 keep-alive 表示保持连接 content-length 响应数据的长度（大小） content-type - 响应数据的mime类型 一般情况下：text/html Date - 当前响应的日期时间 keep-alive 设置保持连接的超时和最大存活时间 timeout=5 max=99 server - 服务器端的信息3）响应体
服务器返回给客户端的数据主体
五、扩展内容
1. 请求类型
get/post/head/put/delete/options/trace
2. 标准API - 标准的请求方式
get - 获取数据
post - 修改数据
put - 新增数据
delete - 删除数据
3. 状态码
1XX - 服务器的信息
2XX - 表示请求成功
200：请求成功
201：成功创建连接
202：接受请求
3XX - 表示重定向
302：表示重定向
304：表示服务端资源没有变化，访问缓存
问题 - 这次请求没有真正低访问服务器端
305：使用代理
4XX - 客户端错误
400：错误的请求
404：网页找不到
403：拒绝访问
405：请求类型不允许
5XX - 服务端错误
500：服务端错误
502：路径错误
504：请求超时
505：http版本不支持
4. MIME类型 - 文件类型
MIME类型是如何定义的
//定义MIME类型
<mime-mapping>
//文件的扩展名
<extension>jpg</extension>
//对应的MIME类型
<mime-type>image/jpeg</mime-type>
</mime-mapping>
常见的MIME类型
html - text/html
htm - text/html
css - text/css
js - text/javascript
json - application/json
jpg - image/jpeg
text - text/plain
5. 请求参数
1）get请求类型
将请求数据 - url?key=value(浏览器地址)
安全性低
请求地址的长度是有限制的
请求数据中包含中文的话，需要转码
2）post请求类型
浏览器地址栏url，不包含请求类型
安全性相对比较高
对请求数据的长度没有要求
请求数据中包含中文的话，可以不转码，对中文的处理相对比较好
6. 控制HTTP头部方法
可以配置每个HTML文件的HTTP-EQUIV标签控制缓存
<meta http-equiv="Cache-Control" content="no-cache">
发送请求
尽力减少请求次数——合理设置Expires时间、资源合并
是否有缓存
有缓存出现是否过期，如果过期不用
如果不过期，跟服务器进行验证
在PHP页面中控制响应头
header("Content-Type: image/jpeg");
六、缓存工作原理
客户端可以自动保存已经访问过的文档的副本，这些副本就成为“文档缓存”
当客户端再次发送针对同一个URL的请求时，如果本地有“已缓存的副本”，就可以直接从本地存储设备而不是远程服务器提取该文档了。
-
数据缓存有下列优点
减少了冗余的数据传输，节省客户端流量费用
缓解服务器带宽瓶颈的问题，服务器可以节省出更多的带宽
降低了对服务器的资源消耗和运行要求
降低了由于远距离而造成的加载延时
七、http基本优化
网站性能优化最主要的就是要减少HTTP请求及每次响应中内容的长度。可以从连接过程中的下列方面加以考虑：
1、域名解析
尽可能减少域名解析次数——减少跨站外部资源的引用
2、创建连接
努力减少连接创建次数——使用Keep-Alive避免重复连接
3、发送请求
尽力减少请求次数——合理设置Expires时间、资源合并
4、等待响应
提高服务器端运行速度——提高数据运算及查询速度
5、接收响应
尽可能减小响应数据长度——启用压缩
八、安全的HTTP协议
HTTP协议本质上属于“明文传输”，可能被窃听和篡改，政府、银行等机密应用需要需要“安全版本的HTTP”：http协议默认端口80
HTTPS协议将消息发送给TCP层之前，先交给了一个安全层(由SSL或TLS协议实现)，安全层负责对消息进行加密和解密操作。https协议默认端口443
一、同步交互与异步交互
客户端想服务器端发送请求，直到服务器端进行响应，这个过程中，用户是不能做任何其他事情的(等)
客户端想服务端发送请求，直到服务端进行响应，这个过程中，用户是可以做其他事情的(不用等)
二、AJAX
asynchronous javascript and xml,直译中文-javascript和xml的异步
AJAX是一种用来改善用户体验的技术，其实质是，使用XMLHttpRequest对象异步地向服务器发请求
服务器返回部分数据，而不是一个完整的页面，以页面无刷新的效果更改页面中的局部内容
-
Ajax的核心对象
XMLHttpRequerst对象
-
获取XMLHttpRequest对象
function getXhr(){
var xhr = null; if(window.XMLHttpRequest){ //除IE外的其他浏览器 xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject("Microsoft.XMLHttp"); } return xhr;}
-
属性
- readyState 请求状态
0 尚未初始化 1正在发送请求 2请求完成 3请求成功，正在接受数据 4数据接收成功-
status 请求响应值
200 表示请求成功
202 请求被接受但处理未完成
400 错误的请求
404 资源未找到
500 内部服务器错误，如asp代码错误等 responseText 服务器返回的文本
responseXML 服 器返回的xml，可以当做DOM处理
-
方法
open(method,url) - 与服务端建立连接
send() - 向服务器端发送请求
abort() - 取消请求
getAllResponseHeaders()
得到响应的所有http头getResponseHeader()
获取指定的http头setRequestHeader()
指定请求的Http头 -
事件
onreadystatechange事件
作用 - 监听服务端的通信状态改变当Ajax对象的readyState的值发生了改变，比如，从0变成了1，就会产生readystatechange事件
三、实现ajax的异步交互步骤
创建XMLHttpRequest核心对象
固定写法-独立编写与服务区建立连接
使用XMLHttpRequest对象的open(method,url)向服务器发送请求
使用XMLRequest对象的send()方法
请求参数的格式 - key=value-
接受服务器响应的数据
使用XMLHttpRequest对象的readystatechange事件监听服务器端的通信状态
使用XMLHttpRequest对象的readyState属性，判断服务器端当前状态(0-4)
使用XMLHttpRequest对象的statue属性，判断服务器端的状态码(200)
使用XMLHttp对象的responseText属性，接受服务器端的响应数据
注意：get与post方式
get请求方式
send()方法不起作用，但是不能被省略
xhr.send(null) 请求参数，添加到url?key=value
post请求方式
必须要在send()方法调用之前，使用setRequestHeader()方法设置请求头，参数为key-value
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
