简介Ajax以及使用ajax简单封装axios

Ajax即为async javascript and xml主要是为了实现页面的局部刷新的一个技术平常我们常用的 axios fetch 都属于ajax的东西ajax 有一个核心对象；这个核心对象是内置在浏览器内的 XMLHttpRequest1. 发起ajax的步骤实例化核心对象let 名称 = new XMLHttpRequest()建立链接名称.open(请求方式(get/post/dele

name:水煮鱼

1228人浏览 · 2022-03-30 11:37:51

name:水煮鱼 · 2022-03-30 11:37:51 发布

`Ajax`即为 `async` `javascript` `and` `xml`

主要是为了实现页面的局部刷新的一个技术
平常我们常用的 axios fetch 都属于ajax的东西
ajax 有一个核心对象；这个核心对象是内置在浏览器内的 XMLHttpRequest

1. 发起ajax的步骤

实例化核心对象 let 名称 = new XMLHttpRequest()
建立链接名称.open(请求方式(get/post/delete/head..),请求的链接/接口的地址，同步异步)
发送请求名称.send()
接收返回的值名称.onreadystatechange = function(){
接收值
}

2.使用方法

let ajax = new XMLHttpRequest() 实例化核心对象
建立链接 ajax.open(请求方式，请求链接，同步或者异步（默认异步）)
ajax.open('GET','https:api.it120.cc/small4/banner/list') 建立链接
ajax.send() 发送请求；如果有参数，在此处带参数
接收值就是监听 readyState状态值的变化

     ajax.onreadystatechange = function () {
         if(ajax.readyState==4 && ajax.status==200){
             console.log(JSON.parse(ajax.response));
         }
     }

3.封装axios代码

 function axios(method,url,data) {
            return new Promise((resolve,reject)=>{
                let ajax = new XMLHttpRequest()
                ajax.open(method,url)
                ajax.send(data)
                ajax.onreadystatechange = function () {
                    if(ajax.readyState==4 && ajax.status==200){
                        resolve(JSON.parse(ajax.response))
                    }
                }
            })
        }
        axios('GET','接口地址').then(res=>{
            console.log(res);
        })