URL,ajax

URL,ajax

一个完整的网址的组成

https://credit.baidu.com:80/bkrcredit/cardList/index.html?fbank=3017&nf=fbank#index

1. 协议 https:或http:传输协议就是能够把客户端和服务端通讯的信息进行传递的工具
   • http超文本传输协议，除了传递文本，还可以传递媒体资源文件以及XML格式的数据
   • https更加安全的http，一般设计支付的网站都采用https协议(s:ssl加密传输)
   • ftb 问价传输协议，一般用于把本地资源上传到服务器，就是把你的前端资源代码上传到服务器的时候用到的一种传输协议
2. 域名 credit.baidu.com
3. 端口号 80
   • 端口号0~65535，用端口号来区分同一台服务器上的不同项目，一个端口下可以部署一个项目
   • http默认的端口号是80
   • https默认的端口号是443
   • ftb默认端口号是21
   • 如果项目采用的是默认端口号，那我们在写地址的时候可以不加端口号，浏览器在发送请求的时候会帮我们加上
4. 请求资源路径bkrcredit/cardList
   • 找到请求资源的路径
5. 文件名index.html
   • 找到具体文件
6. 问号传参,或关键字fbank=3017&nf=fbank
   • 传递给后台的参数
7. HASH值#index
   • 锚点定位
   • 给予hash实现路由切换，不同的hash值试下展示不同的组件或者模块

URL,URI,URN

URL

URN

URI

location和history

history

location 是当前页面url的信息，是个对象

HTTP状态码

• 200 OK成功
• 210 CREATE一般应用于告诉服务器创建一个新文件，最后服务器创建成功后返回状态码
• 204 NO CONTENT对于某些请求(例如PUT或者DELETE)服务器不想处理，可以返回空内容，但是这次请求也是成功的，返回状态吗是204
• 301 永久重定向，一般用于域名的迁移，例如京东网站转移
• 304 设置HTTP的协商缓存
• 400传递给服务器的参数错误
• 401 没有权限访问
• 404 请求地址错误
• 500 服务器的未知错误
• 503 服务器超负荷

DNS解析

DNS优化

DNS缓存

  <link rel="dns-prefetch" href="//static.360buyimg.com" />

输入URL以后浏览器做的事

1. 浏览器解析域名，查看本地是否有缓存
2. DNS解析，找到ip地址，发送请求
3. 三次握手
4. 客户端向服务器发起http请求，分为三部分 请求方法URL协议、版本 请求头 请求正文
5. 服务器端处理，客户端拿到静态页面
6. 四次挥手
7. 客户端解析资源
8. 客户端布局渲染

ajax

   let xhr = new XMLHttpRequest; // 创建一个ajax
   console.log(xhr.readyState,12); // 0 刚刚创建了一个ajax
   xhr.open('get','./data.json',true); // 打开一个请求
   console.log(xhr.readyState,14); // 1 已经打开了一个请求(配置好了请求)
   // params1:请求的方式
   // params2:请求的资源链接
   // params3：是否同异步，不传默认是true就是异步，传递false就是同步

   // 监听当前请求的状态
   xhr.onreadystatechange = function(){
     console.log(xhr.readyState);
     // 如果当前的状态码是2，那就说明已经把响应头接受完毕了
     // 如果当前的状态码是3，那说明客户端已经开始接受响应体(如果在状态码是3的时候就获取响应体，那有可能获取的不完全)
     // 如果当前的状态码是4，说明客户端已经把响应体接受完毕
     // console.log(xhr.getAllResponseHeaders());
     console.log(xhr.response);
   }
   
   xhr.send(); // 发送一个请求

ajax身上的方法和属性

属性

1. xhr.responseURL 如果为URL就是URL不是就是空
2. xhr.responseText 如果不是json格式字符串就是空
3. xhr.responseXML 如果不是XML就是空
4. xhr.response 全部格式都拿得到
5. xhr.status 当前请求的HTTP的状态
6. xhr.statusText 当前请求的http的状态的描述
7. xhr.onreadystatechange 监听readyState
8. xhr.timeout 请求超时的时间
9. xhr.ontimeout=function(){} 请求超时了执行这个函数
10. xhr.readyState 当前请求的步骤
11. xhr.withCredentials=true 在跨域请求中是否允许携带资源凭证

方法

1. xhr.open()配置
2. xhr.send()发送
3. xhr.abort()终止
4. xhr.getAllResponseHeaders() 获取全部请求头信息
5. xhr.getResponseHeader("key")获取单个的请求头信息
6. xhr.setRequestHeader("key",value) value会自动转换成字符串，必须要在send之前设置

HTTP请求方式

GET系列

1. Delect一般告诉服务器删除某些信息
2. HEAD只获取响应头的内容，响应主体内容不要
3. OPTIONS试探性的请求，给服务器发送个请求，看看服务器能不能接收到，如果接受到能不能正常的返回

POST系列

1. PUT和DELTE是相对应的，告诉服务器要存储某些东西

GET和POST的区别

1. GET是在URL后问号传参,POST是在send()内传参,而且只有在send中的数据才叫做请求体
2. get传递给服务器的参数要比post少，因为浏览器对url的长度有限制(IE一般是2kb左右，谷歌的限制一般是6到7kb左右)所以一般get用来获取，因为获取不需要传递参数
3. post是在()内传参，他没有限制，所以一般用来获取
4. get传参相对来说不安全(因为在url中，可以看到)，post(在请求体中)相对安全一点,GET相对于POST来说不安全，因为GET请求是基于问号传参，有一种技术就是URL劫持，这样别人就可以拿到你的参数或者篡改你的参数，POST是基于请求体传参的，他相对来说还安全一些
5. get请求会产生缓存，如果没一次请求的地址一模一样，这样他就会走缓存
   • 如果你不想走缓存，只要保证每一次请求的地址有不一样的地方就可以(一般都是参数)

            let flag = Date.now() // 获取时间戳 // 不让这次请求走缓存的办法(flag永远不会重复)
            'http://www.baidu.com:8080/index.html?name=9&age=2&flag=' + flag;

            利用随机数
            let num = Math.random(); // 获取0-1之间的随机小数
            console.log(num);
            'http://www.baidu.com:8080/index.html?name=9&age=2&flag=' + num;

性能优化的几种方式

1. 减少HTTP的请求次数和传输报文的大小
2. CSS SPRITE (雪碧图 图片精灵)
3. iconFont(字体图标)或者使用SVG的矢量图
4. 懒加载
   • 取消音视频的预加载
   • 客户端与服务端的数据传输尽可能拿JSON格式完成，XML格式要比JSON格式质量大
5. 做CDN(地域分布式服务器) 、加服务器
6. 图片做base64转码(把图片转化成base64编码，可以减少图片的请求次数，提高页面的渲染速度，但是不利于开发和维护，用webpack可以实现图片的批量base64转化，这个过程也是webpack去做)