ajax工作原理网页从输入url到呈现过程_html-js-css

Ajax工作原理

1.http网络传输协议 :规定前后端交互的数据传输格式

协议 : 规定前后端交互的数据传输格式

2.http协议组成两个部分

2.1前端必须发送请求报文格式

2.2后端必须响应响应报文格式

3.请求报文格式组成

(1) 请求行 : 请求方法和请求地址

(2)请求头 : 浏览器告诉服务器 ,我应该发给你的数据是什么

(3)请求体 : 请求参数 payload

4 ajax原理 ,设置请求报文

*发送ajax的过程就是设置请求报文

(1)响应行响应状态码 +服务器IP地址

(2)响应头服务器告诉浏览器我给你的数据是什么格式

(3)响应体服务器响应数据 response

常见的几种状态码

****经典面试题请求说出你所知道的常见的几种状态码

2xx (绿色)

200请求成功

204:post传输

3xx(黄色) 重定向(服务器修改浏览器地址)

302 :重定向,服务器主动修改浏览器地址

304 :客户端执行了GET,但是文件未变化

4xx(红色) 前端问题

400:参数错误

404:路径错误

401 :未验证身份

403 :服务器拒绝访问(没有权限) 会员

413 : 文件过大

5xx(红色) :服务器问题

500 :服务器出问题

503 :服务器维护或者超载

请求报文

响应报文

网页从输入url到呈现过程

网页从输入url到呈现过程

1.DNS解析 :把域名解析成 IP地址

2.TCP三次握手 : 保证http传输的安全可靠

第一次浏览器 ->服务器 (你能听到我说话吗,验证浏览器发送)

第二次服务器 -> 浏览器 (我听到了,你能听到我说话吗,验证服务器接收,服务器发送)

第三次浏览器 -> 服务器(我也听到你说话了,验证浏览器接收)

3.HTTP连接

(1) 客户端发送请求

(2) 服务器处理请求

(3)服务器响应请求

4.渲染引擎渲染 :

(1)解析html :将得到dom树

(2)解析css :将得到样式树

(3)将dom树 + 样式树合并成渲染树

(4)绘制渲染树

(5)呈现页面

TCP三次握手

.TCP三次握手 : 保证http传输的安全可靠

第一次浏览器 ->服务器 (你能听到我说话吗,验证浏览器发送)

第二次服务器 -> 浏览器 (我听到了,你能听到我说话吗,验证服务器接收,服务器发送)

第三次浏览器 -> 服务器(我也听到你说话了,验证浏览器接收)

渲染引擎渲染

(1)解析html :将得到dom树

(2)解析css :将得到样式树

(3)将dom树 + 样式树合并成渲染树

(4)绘制渲染树

(5)呈现页面

案例 -文件上传

1.1 file表单, 默认自带点击事件，作用是选择文件

1.2 上传文件‘必须’要使用原生内置的FormData对象

(1)文件需要设置单独的请求头 : multipart/form-data

(2)文件以二进制方式传输（文本是utf8编码，但是文件不是）

1.3 file表单有一个特殊的事件onchange事件：用户选择了文件就会执行

/*文件上传思路总结

1. 给file表单注册onchange事件

* 当用户选择图片之后执行

2. 获取用户选择的文件

*let file= this.files[0]

3. 使用FormData处理文件

let浮动=new FormData()

fd.append('参数名',文件对象)

* 只有FormData才可以上传文件

4. 发送ajax请求

* 文件上传请求方法一定是post, 且请求参数必须为 FormData对象

(1)formdata会自动帮你的请求头设置成文件请求头 :

(2)formdata 会自动帮你的文件转成二进制

*/

自定义头像上传按钮

（1）设置file表单为hidden

（2）给自定义按钮注册点击事件：触发file表单点击

第二种：

（1）label标签的for属性，设置成file表单的id 此时点击label就相当于点击file表单

label的作用是让某个制定的标签被选中

/*自定义文件上传按钮思路

第一种 :自定义按钮

(1)隐藏file表单

(2)给自定义按钮添加一个点击事件

(3)点击按钮的时候，触发 file表单的点击

第二种 :自定义图标

(1)把你的自定义图标放入label标签中

(2)label标签for属性,值是表单的id ,只要点击了label就相当于点击了表单

*/

下拉展示更多案例

下拉加载更多功能

(1)声明全局变量 : index记录当前页数 arr所有的列表

(2)页面注册滚动事件

计算页面最大滚动距离 = 页面内容高度 -页面可视化高度

(3)封装加载列表的ajax,接收一个页码作为参数 const getHeroList=index=>{}

(4)当滚动到最底部的时候,index++

(5)加载列表(调用函数) getHeroList(index)

*服务器返回数据之后,需要加到arr中再渲染 :arr.push(...res.data.list)

let index=1
let arr=[]
// 节流第一步 :声明开关默认值true
let flag=true
// (2)给页面注册滚动条事件
window.onscroll=function(){
  /*节流第二步:判断开头 ,如果开关是true,则触发事件 + 开关改为false */
  if(flag){
    // 判断是否滚动到最底部
    /* 页面最大滚动距离 scrollTop = 页面内容高度 scrollHight - 页面可视区域高度clientHeight*/
    let maxTop = document.documentElement.scrollHeight - document.documentElement.clientHeight
    let scrollTop = document.documentElement.scrollTop
    /* 如果做了节流处理，这里最好不要完全碰到底部才请求下一页
         因为有可能你碰到底部的时候，刚好flag是false，不会执行的
           像京东 ： 如果有节流的话， 一般离底部大概100px的位置就会请求下一页 */
    if(scrollTop>= maxTop -100){
      index++
      console.log(index);
      getHeroList(index)
    }
    // console.log(index);
  }
}
// 节流 只要触发事件事件 .开关改为false
flag =false
/* 节流 开启定时器.节流时间后,把开关改为true*/
setTimeout(function(){
  flag=true
},200)
// 页面一加载,渲染第一页数据
getHeroList(1)

详细参考

函数防抖与节流函数防抖

1.函数防抖 : 单位时间内，频繁触发事件，只会触发最后一次

2.经典应用场景：输入框输入事件 oninput

3.防抖流程：

(1)声明全局变量存储定时器ID

(2)每一次触发事件的时候,先清除上一次定时器

(3)开启本次防抖定时器

函数节流

1.函数防抖 : 单位时间内，频繁触发事件，只会触发一次

2.经典应用场景：解决事件高频触发滚动条事件,鼠标移动

3.节流思路：

(1) 恒明一个全局开关 let flag=true

(2) 触发事件的时候,判断开关

如果是true :触发事件,吧开关改为false

如果是false :不触发事件

(3)开启节流定时器,在节流事件之后把开关改为true

三种高度 offsetHeight scrollHeight clientHeight

offsetHight 盒子自身的高度

scrollHight 盒子内容的高度

clientHight 盒子视口的高度

scrollTop 页面卷出去的距离

   


    
        程序员大前端
        程序员大前端
        程序员大前端
        程序员大前端
        程序员大前端
        程序员大前端
        程序员大前端
        程序员大前端
        程序员大前端
        程序员大前端
        程序员大前端
        程序员大前端
        程序员大前端
        程序员大前端
        程序员大前端
        程序员大前端

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/941751.html

ajax工作原理网页从输入url到呈现过程

发表评论

评论列表（0条）

ajax工作原理 网页从输入url到呈现过程

发表评论

评论列表（0条）

ajax工作原理网页从输入url到呈现过程