手写一个简易ajax

Ajax一般是通过XMLHttpRequest对象来是实现的 let request =new XMLHttpRequest() //声明一个XMLHttpRequest对象 常用的方法和属性 XMLHttpRequest对象的setRequestHeader方法 语法：request.setRequestHeader(key,value) //设置请求头 XMLHttpRequest对象的open方法 语法：request.open(method, url, async, user, password); //初始化请求；一般使用前三个参数，后三个为可选参数 method参数 要使用的HTTP方法，比如「GET」、「POST」、「PUT」、「DELETE」、等。对于非HTTP(S) URL被忽略。 url参数 表示向其发送请求的URL。 async 可选参数 表示需不需要异步执行操作，不传入则该参数默认为true，已完成事务的通知可供事件监听器使用。如果值为false，send()方法直到收到答复前不会返回。 XMLHttpRequest对象的send方法 语法：request.send(data) //发送请求，data参数为可选参数。如果是异步请求，则此方法会在请求发送后立即返回；如果是同步请求，则此方法直到响应到达后才会返回。 data参数 表示发送请求时的请求体 在通过send方法发送请求后，request对象在收到响应数据时会自动填充到其对应的属性中，xhr 具有以下常用属性： responText：响应返回的数据内容 responseXML： 如果响应内容是"text/xml""application/xml"，这个属性将保存响应数据的 XML DOM文档 status： 相应的HTTP状态码（200，302，404，503等） statusText： HTTP状态说明内容（如status的值为200，则statusText的值为"ok"） readyState： 无论请求是否成功，都回响应的一个属性，表示当前的状态 总共有5个状态值，分别为0~4，每个值代表了不同的含义 0：初始化，XMLHttpRequest对象还没有完成初始化 1：载入，XMLHttpRequest对象开始发送请求 2：载入完成，XMLHttpRequest对象的请求发送完成 3：解析，XMLHttpRequest对象开始读取服务器的响应 4：完成，XMLHttpRequest对象读取服务器响应结束 timeout： 设置请求超时时间 需要结合ontimeout事件使用 发送一个请求，readyState会一直改变状态值，当值改变时会触发onreadystatechange事件，所以可以在此处做请求成功/失败后的数据操作，得出以下代码 request.onreadystatechange=()=>{ if(request.readyState === 4){ //响应已结束时 if (request.status === 200 && request.status < 300 || request.status === 304) { //2xx的状态码均表示成功，304状态码表示请求与上次一致 let tempRT = request.responseText //将响应的数据内容赋值给tempRT变量 console.log(tempRT) //打印数据内容 }else if(request.status > 400){ //大于400的状态码均表示为请求失败 console.log("request fail") //打印请求失败 } } } 最后封装这个手写的ajax window.myAjax = { ajax: (options) => { //接受一个对象参数 let method = options.method let url = options.url let header = options.header let body = options.body let request = new XMLHttpRequest() request.open(method, url) for (key in header) { let temp = key request.setRequestHeader(key, temp) } request.onreadystatechange = () => { if (request.readyState === 4) { if (request.status === 200) { let temp = request.responseText console.log(temp) } } } request.send(body) } } options = {} //设置传参 myAjax.ajax(options) //引入该文件，调用全局变量myAjax的ajax方法 功能较为简易，以实现基础功能为需求

本文章由javascript技术分享原创和收集