Ajax的异步请求探究

用户9347382

发布于 2022-01-10 16:35:01

86100

代码可运行

文章被收录于专栏：程序员阿杰程序员阿杰

运行总次数：0

代码可运行

ajax xmlhttprequest

在开发中经常使用ajax去请求接口，而ajax不是一项新的技术，基于原生的XmlHttpRequest对象和html css js共同完成在了解ajax之前先搞清楚什么是http, 想要了解更多可访问mozllia（霸王龙）的 https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/send# Http

Http

http协议是超文本传输协议，该协议详细规定了浏览器和万维网服务器之间互相通信的规则，约定

请求格式

重点是格式与参数

格式

行:{
	1.请求类型:Get, Post, Put, Delete
	2.url路径
	3.http请求版本: HTTP/1.1	
}
头:{
	1.Host: www.baidu.com
    2.Cookie: name=123
    3.content-type:application/json
    4.user-Agent:chorme 83
}
空行:请求头和请求体的划分行
体:{
	1.username=11&password=10
}

响应报文

行:{
	1.协议内容
	2.请求状态码
	3.状态字符串
}
头:{
	1.content-type:application/json
	2.content-length:20
	3.content-encoding: utf8
}
空行: 响应头和响应体的划分线
体:	响应报文

AJAX

异步请求使用原生的XmlHttpRequest

<script>
    var http = new XMLHttpRequest()
    //设置请求头
    http.open("Get", "http://localhost:89/api/admin/user/list?current=1&size=10")
    http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    http.setRequestHeader("Authorization", "Bearer "+"eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJhZG1pbiIsInJvbGUiOiJbXCIxMDBcIl0iLCJpc3MiOiJlY2hpc2FuIiwiZXhwIjoxNjQxMzgzMDk1LCJpYXQiOjE2NDEzODEyOTV9.QSha0Ff3NP-uOSOmulbcQ_-srVNlDgw7V8SaQ-rwgu-GuyH4B2d09GvztBbDILiFqeM0OHwmokwb7XTEWjnQeA")
    http.onload  = function () {
        //接受响应报文
        console.log(this.responseText)
    }
    //打开请求连接
    http.send()
</script>

使用axios + vue

search(){
      axios({
        url: this.url,
        method: "GET",
        headers:{
          Authorization: "Bearer "+localStorage.getItem("token"),
        },
        params:{
          current: this.pageIndex,
          size: this.pageSize
        }
      }).then(response => {
        console.log(response)
      })
    }

本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名,转载请标明出处最后编辑时间为: 2022/01/05 11:59

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-01-05，如有侵权请联系 cloudcommunity@tencent.com 删除

ajax