手写ajax

最新推荐文章于 2025-05-08 15:16:50 发布

qq_40784926

最新推荐文章于 2025-05-08 15:16:50 发布

阅读量89

点赞数

文章标签： ajax javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_40784926/article/details/129231276

版权

该代码示例展示了如何使用原生JavaScript的XMLHttpRequest接口来实现GET和POST两种HTTP请求。它创建了一个名为ajax的函数，该函数接受包含URL、请求类型、数据和超时时间的选项对象。函数内部使用Promise处理异步操作，根据请求类型设置请求头并发送数据。当请求状态改变时，处理响应或错误。最后，给出了一个调用示例，发送一个GET请求到百度搜索typescript。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用原生 XMLHttpRequest简单实现两个请求方式 GET 和POST

interface IOptions{
    url:string;
    type?:"GET"|"POST";
    data:any;
    timeout?:number;
}
// {}=>url 拼接得参数
function formatUrl(object:any){
    let dataArr = []
    for(let key in object){
        dataArr.push(`${key}=${encodeURIComponent(object[key])}`)
    }
    return dataArr.join('&')
}
 const  ajax=(
    options:IOptions = {
    type:"GET",
    data:{},
    timeout:3000,
    url:'',
})=>{

return new Promise((resolve,reject)=>{
    if(!options.url) return 
  const queryString =formatUrl(options.data)
  const stateChange = ()=>{
    xhr.onreadystatechange=()=>{
        if(xhr.readyState ===4){
           clearTimeout(timer)
           if((xhr.status>=200 && xhr.status<=300)|| xhr.status === 304){
            resolve(xhr.responseText)
           }else{
            reject(xhr.status)
           }
        }
    }
  }
    let timer;
    let xhr;
     const gload = window ?window:global 

    if((global as any).XMLHttpRequest){
        xhr = new XMLHttpRequest()
    }else{
        xhr = new ActiveXObject('Microsoft.XMLHTTP')
    }
   switch (options.type.toUpperCase()) {
    case 'GET':
        xhr.open('GET',`${options.url}?${queryString}`)
        stateChange()
        break;
    case 'POST':
        xhr.open('POST',options.url)
        xhr.setRequestHeader("ContentType",'application/x-www-form-urlencoded')
        stateChange()
        xhr.send(options.data)
        break;
    default:
        break;
   }
   if(options.timeout){
    timer  = setTimeout(()=>{
        xhr.abort()
        reject('timeout')
    },options.timeout)
   }
   
})
}
ajax({type:'GET',url:'https://www.baidu.com',data:{wd:'typescript'}}).then(res=>{
    console.log('twf',res)
})```