H5-12.27Http协议及Ajax基本

一、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;

}

属性
1. readyState 请求状态
```
0 尚未初始化
1正在发送请求
2请求完成
3请求成功，正在接受数据
4数据接收成功
```
1. status 请求响应值
  
  200 表示请求成功
  202 请求被接受但处理未完成
  400 错误的请求
  404 资源未找到
  500 内部服务器错误，如asp代码错误等
2. responseText 服务器返回的文本
3. 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");

照常一首歌
http://music.163.com/#/song?id=29480187

H5-12.27Http协议及Ajax基本

推荐阅读更多精彩内容