用XMLHttpRequest封装一个简易版ajax

1. XHMLHttpRequest基础用法

• XMLHttpRequest这不用多讲了吧，就是发送http请求的
• 我们直接上手写一个示例吧

//get
const url='your API address'
const xhr=new XMLHttpRequest()
xhr.open('get',url);
xhr.send()
xhr.onreadystatechange=function (){
    
    
    if(xhr.readState===4 && xhr.status===200){
    
    
        return xhr.responseTetxt
    }
}
//post
const url='your API address'
const xhr=new XMLHttpRequest()
xhr.open('get',url);
const date={
    
    }
xhr.send({
    
    data)
xhr.onreadystatechange=function (){
    
    
    if(xhr.readState===4 && xhr.status===200){
    
    
        return xhr.responseTetxt
    }
}

2. XMLHttpRequest的封装

• 先讲思路

1. 接收参数，根据参数判断是get还是post
2. 然后根据请求方式处理和挂载参数
3. 根据不同的请求实现不同的主体

function myAjax(options){
    
    
    let{
    
    url,method,data,type}=options
    method=method.toUpperCase()
    const chr=new XMLHttpRequest()
    return new Promise((resolve,reject)=>{
    
    
        if(method==='GET'){
    
    
            //拼接参数
            let queryStr=''
            for(let key in data){
    
    
                queryStr+=key+'='+data[key]+'&'
            }
            url=url+'?'+queryStr.slice(0)
            xhr.open(method,url,true)
            xhr.send();
            xhr.onreadystatechange=function (){
    
    
                if(xhr.state===4 && xhr.status===200){
    
    
                    resolve(xhr.responseTetxt)
                }else{
    
    
                    reject(xhr.status)
                }
            }
        }else if(method==='post'){
    
    
            xhr.open(method,url,true)
            xhr.setRequestHeader('content-type','application/x-www-form-urlencoded')
            xhr.send(data)
            xhr.onreadystatechange=function (){
    
    
                if(xhr.state===4 && xhr.status===200){
    
    
                    resolve(xhr.responseTetxt)
                }else{
    
    
                    reject(xhr.status)
                }
            }
        }
    })
}
myAjax({
    
    
    url:'http://localhost:8080',
    method:'get',
    data:{
    
    
        name:'tom'
    }
}).then(res=>{
    
    
    console.log(res)
}).catch(err=>{
    
    
    console.log(err)
})