JS基础总结（6）—— HTTP请求

最新推荐文章于 2023-12-08 08:59:00 发布

辅助不是混

最新推荐文章于 2023-12-08 08:59:00 发布

阅读量653

点赞数

分类专栏： JS基础总结文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44844528/article/details/105393487

版权

本文总结了JavaScript中的Ajax技术，包括XMLHttpRequest的使用和content-type的设定。探讨了HTTP跨域问题，详细阐述了Preflighted Request及多种解决方案，如JSONP、CORS、Web Socket等。此外，还介绍了HTTP协议的基础知识，如TCP的三次握手和四次挥手，以及HTTPS的安全机制。

摘要由CSDN通过智能技术生成

1. Ajax

Ajax: Asynchronous JavaScript + XML
能够向服务器请求额外数据而无须卸载页面

1.1 XMLHttpRequest

原生进行http请求方法如下：

const request = new XMLHttpRequest()
// 以下是两种状态监听方案
// 1. 使用onreadystatechange监听XMLHttpRequest对象的状态
request.onreadystatechange = function () {
   
    // readyState: 0: 未调用open(), 1: 调用open()未调用send()
    // 2. 调用send()未收到响应, 3. 收到部分响应数据 4. 收到全部数据
    if (request.readyState === 4) {
   
        console.log('请求完成了')
    } else if (request.readyState === 3) {
   
        console.log('收到数据了')
    }
}
// 2. 使用ProgressEvent对象监听XMLHttpRequest状态
// ProgressEvent对象: 测量如 HTTP 请求等底层流程进度的事件
request.onload = function (event) {
    // 相当于readyState为4
    console.log('收到数据了:' + event.currentTarget.responseText)
}
request.onprogress = function (event) {
    // 相当于readyState为3
    if (event.lengthComputable && event.totalSize) {
   
        console.log('当前加载进度为' + 
        (event.position / event.totalSize).toFixed(2) + '%')
    }
}
request.onerror = function (err) {
   
    console.log(err)
}
request.timeout =

最低0.47元/天解锁文章