手写一个简易的ajax,进行封装

在准备js面试题时,遇到了许多知识盲区,或是已经遗忘的知识,所以来写一下博客,记录自己的成长,同时查漏补缺

Ajax是Asynchronous JavaScript and XML(异步JavaScript和XML)的简写,它可以异步地向服务器发送请求,在等待响应的过程中,不会阻塞当前页面,浏览器可以做自己想做的事情,直到成功获取响应后,浏览器才开始处理响应数据。通俗点讲,就是浏览器和服务器之间的一种异步通信方式

ajax的使用步骤://1.使用XMLHttpRequest这个构造函数创建一个实例
//你也可以不取xhr这名字,只是我们一般都这么起

const xhr = new XMLHttpRequest()

2.准备发送请求,使用xhr.open()方法
里面传入三个参数,第一个是请求方法,如get请求,post请求,请求方法要全部大写
第二个参数是请求的地址url
第三个参数   是否使用异步,是:true  通常我们都是使用异步,不使用异步那太危险了

xhr.open('GET',url,true)

3.发送请求  使用xhr.send()方法,括号里一般都不加参数
不加的时候我们把null填进去,这样的兼容性好,当然你不加也没关系
只是加了也不麻烦,几个字而已

如果是post请求,可以把参数放这里面
因为post请求的参数可以放请求体里,get请求只能放请求头

xhr.send(null)

4。监听事件,处理响应
当获取到响应后,会触发xhr对象的readystatechange事件,可以在该事件上对响应进行处理
readystatechange事件监听readyState这个状态的变化
readyState从0~4,一共五个状态
0: 未初始化,尚未调用open()
1:启动,已经调用open()但是还没调用send()
2:发送,已经调用send(),但是还没接收响应
3:接收,已经接收了部分响应数据
4:完成,已经接收到全部的响应数据,而且已经可以在浏览器中使用了

xhr.onreadystatechange = () => {
  //如果xhr.readyState不是4,那就直接返回,因为根本没接收完
  if(xhr.readyState !== 4) return
  //能获取到响应,表示网络传输的过程中没有问题
  //但是我们不能保证我的请求,或者是服务器端不会出现问题,所以我们还需要用HTTPCODE状态码来判断
  //我们都知道,状态码200~300之间都是成功的,还有一个例外,304也是成功的
  if((xhr.status >= 200 & xhr.status < 300) || xhr.status === 304) {
    // 获取到响应后,响应的内容就会自动填充在xhr对象的属性上
    console.log(xhr.responseText);
  }
}

  最后一个注意的点,由于兼容性的原因,我们的监听事件一般放在xhr.open()前后

const xhr = new XMLHttpRequest()

const url = 'https://www.imooc.com/api/http/search/suggest?words=js'

xhr.onreadystatechange = () => {
  if(xhr.readyState !== 4) return
  if((xhr.status >= 200 & xhr.status < 300) || xhr.status === 304) {
    console.log(xhr.responseText);
  }
}

xhr.open('GET',url,true)

xhr.send(null)

这就是一个基本的ajax请求,说完基本的用法,我们使用promise来将其给封装一下

const url = 'https://www.imooc.com/api/http/search/suggest?words=js'

function ajax(url) {
  const p = new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest()
    xhr.open('GET', url, true)
    xhr.addEventListener('readystatechange', () => {
      if(xhr.readyState === 4) {
        if((xhr.status >= 200 & xhr.status < 300) || xhr.status === 304) {
          resolve(
            JSON.parse(xhr.responseText)
          )
        }else if(xhr.status === 404) {
          reject(new Error('404 not found'))
        }
      }
    })
    xhr.send(null)
  })
  return p
}

ajax(url).then( res=> console.log(res)).catch( err => console.log(err))

请求成功

手写一个简易的ajax,进行封装_第1张图片

 把url改成一个错误的地址再试一下

手写一个简易的ajax,进行封装_第2张图片

 证明我们写的没毛病

你可能感兴趣的