2024年前端最全JS基础15，前端开发核心知识笔记共2100页

总结

阿里十分注重你对源码的理解，对你所学，所用东西的理解，对项目的理解。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

| loadstart | 在接受第一个字节时触发 |

| error | 在请求出错时触发 |

| abort | 在调用abort()终止连接时触发 |

| load | 在成功接受完响应时触发 |

| loadend | 在通信完成时触发 |

注：

• load事件，在响应完成时立即触发，不用检查readyState属性

• progress事件，该属性在浏览器接受数据期间反复触发，该事件由三个属性：lengthComputable是一个布尔值，表示进度信息是否可用；position是接收到的字节数，totalSize是响应的content-length头部定义的总字节数

应用:显示响应百分比

---

let xhr=new XMLHttpRequest()

xhr.οnlοad=function(e){

if((xhr.status>=200 &&xhr.status<300)||xhr.status==304){

alert(xhr.responseText)

}else{

alert(‘Request was unsuccessful:’+xhr.status)

}

}

xhr.οnprοgress=fucntion(e){

let divStatus=document.getElmentById(‘status’)

if(e.lengthComputable){

divStatus.innerHTML=‘Received’+e.position+‘of’+e.totalSize+‘bytes’

}

}

xhr.open(‘get’,网址，true)

xhr.send(null)

ajax异步网络通讯技术

===============================================================================

定义：允许浏览器与服务器通信而无需刷新当前页面技术，不需要刷新整个页面，只刷新局部页面的一种异步通讯技术

1. ajax核心对象XMLHttpRequest

注：这是window对象，每次调用new一个

2. open(method,url,[true])建立与客户端与服务端的连接

注：ture表示异步，可选择写于不写

注：请求时内容类型要设置

xhr.setRequestHeader('content-type','application/x-www-form-urlencoded')

3. send()发送请求

注：post参数放send()方法作为参数发送

get参数拼接到open()地址栏后

onreadstatechange=function(){

处理数据响应

1.就绪码属性响应当前进度（readyState）==4 表示响应完成

2. 状态码（status）==200表示ok 状态描述（statusText）

3. 响应responseText

}

接口文档

=======================================================================

一个应用程序都会有一个对应的接口文档

前端怎么知道，我请的业务接口url地址是什么?请求方法是什么，需不需传参，服务端收到我请求后响应数据是什么?

登录接口

url:

method:

参数: username=admin&password=123

响应数据:

{

resultCode:1,

resultInfo:{

nick:‘jack’,

…

}

}

应用：登录页面正确后跳转到主页面

===================================================================================

登陆页面代码

主页面代码

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

on.href=‘index.html’

}else{

alert(‘用户名密码出错哦’)

}

}else{

alert(‘网络错误’)

}

}

}

})

主页面代码

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-tpGtymXu-1714982804057)]