关于前端:原生js-封装ajax请求超详细

5次阅读

共计 7769 个字符，预计需要花费 20 分钟才能阅读完成。

文章目录
XMLHttpRequest 对象
onreadystatechange 事件
setRequestHeader
解决响应
向服务器发送申请
思路阐明
申请形式
残缺代码

曾经把握 AJAX 根底的能够从思路阐明开始看

XMLHttpRequest 对象

所有古代浏览器均反对 XMLHttpRequest 对象（IE5 和 IE6 应用 ActiveXObject）。

为了应答所有的古代浏览器：

  let xmlhttp;
  if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();} else {// code for IE6, IE5
       xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }

onreadystatechange 事件

每当 readyState 扭转时，就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。

属性 形容
onreadystatechange 存储函数（或函数名），每当 readyState 属性扭转时，就会调用该函数。
readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。0: 申请未初始化 1: 服务器连贯已建设 2: 申请已接管 3: 申请解决中 4: 申请已实现，且响应已就绪
status 200: “OK”404: 未找到页面

当 readyState 等于 4 且状态为 200 时，示意响应已就绪：

xmlhttp.onreadystatechange = function () {if (xmlhttp.readyState == 4) {if (xmlhttp.status == 200) {
          var result = xmlhttp.responseText
          try{resolve(JSON.parse(result))
          }catch (e) {reject({errorMsg:'数据格式谬误'})
          }
      } else {// console.log('error:xmlhttp.status =', xmlhttp.status)
          reject(xmlhttp)
      }
  }
}

setRequestHeader

XMLHttpRequest.setRequestHeader() 是设置 HTTP 申请头部的办法。此办法必须在 open() 办法和 send() 之间调用。如果屡次对同一个申请头赋值，只会生成一个合并了多个值的申请头。

如果没有设置 Accept 属性，则此发送出 send() 的值为此属性的默认值 /。
语法:

xmlhttp.setRequestHeader(header, value);

解决响应

XMLHttpRequest() 对象的几种类型的响应属性

属性 形容
responseText 取得字符串模式的响应数据。
responseXML 取得 XML 模式的响应数据。

解析和操作蕴含 HTML 文档的 responseText 属性

解析这些 HTML 标记次要有三种形式：

  1. 应用 XMLHttpRequest.responseXML 属性
  2. 将内容通过 fragment.body.innerHTML 注入到一个 文档片段 中，并遍历 DOM 中的片段
  3. 如果事后晓得 HTML 文档的内容，能够应用 RegExp

不举荐第三种形式，因为如果 HTML 代码产生轻微变动，该办法将可能失败，个别间接用XMLHttpRequest.responseXML 属性

向服务器发送申请

如需将申请发送到服务器，咱们应用 XMLHttpRequest 对象的 open() 和 send() 办法

open()：规定申请的类型、URL 以及是否异步解决申请。

open(method,url,async)

参数阐明：

  • method：申请的类型；
  • GET 或 POST url：文件在服务器上的地位
  • async：true（异步）或 false（同步）

send()：将申请发送到服务器。

send(string)

参数阐明：

  • string：仅用于 POST 申请

我的代码：

 xmlhttp.open(arg.method || 'GET', arg.url, true);
 arg.headers = arg.headers || {};
  for (let key in arg.headers){xmlhttp.setRequestHeader(key, arg.headers[key]);
  }
  xmlhttp.send(arg.data);

思路阐明

http 申请有多种形式 GET、POST、PUT…，先解决公共局部，封装一个 createXMLHttp（）办法

  1. 创立 XMLHttpRequest 对象
  2. 解决 onreadystatechange 事件, 规定当服务器响应已做好被解决的筹备时所执行的工作
  3. open() 规定申请的类型、URL 以及是否异步解决申请
  4. setRequestHeader() 设置申请头
  5. send() 将申请发送到服务器

createXMLHttp（）办法接管一个对象 arg 作为参数，返回一个 Promise 对象。

arg.method: 申请的类型
arg.url: 申请的 url
arg.headers: 申请的申请头，以对象模式存储
arg.data: 仅用于 POST 申请
    function createXMLHttp(arg) {return new Promise((resolve,reject) => {arg = arg || {}
            let xmlhttp;
            if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp = new XMLHttpRequest();} else {// code for IE6, IE5
                //xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange = function () {if (xmlhttp.readyState == 4) {if (xmlhttp.status == 200) {
                        var result = xmlhttp.responseText
                        try{resolve(JSON.parse(result))
                        }catch (e) {reject({errorMsg:'数据格式谬误'})
                        }
                    } else {console.log('error:xmlhttp.status =', xmlhttp.status)
                        reject(xmlhttp)
                    }
                }
            }
            if(Vue.prototype.$ajax.interceptors && Vue.prototype.$ajax.interceptors.request){Vue.prototype.$ajax.interceptors.request(arg)
            }
            xmlhttp.open(arg.method || 'GET', arg.url, true);
            arg.headers = arg.headers || {};
            for (let key in arg.headers){xmlhttp.setRequestHeader(key, arg.headers[key]);
            }
         
            xmlhttp.send(arg.data);
        })
    }

封装 post 办法

拼接 url、解决一下 data 的格局，调用 createXMLHttp 创立申请
post 的 data 都是对象模式，解决起来比较简单，body = JSON.stringify(body)就行了

 Vue.prototype.$ajax.post = function post(url,body) {
        url = Vue.prototype.$ajax.baseURL + url;
        body = JSON.stringify(body)
        let token = window.sessionStorage.getItem('token')
        token = (token != 'undefined') ? JSON.parse(token) : ''
        return createXMLHttp({
            method:'POST',
            url,
            headers:{
                'Content-type':'application/json;charset=utf-8',
                'token': token
            },
            data:body
        })
    }

封装 get 办法

原生 AJAX 的 GET 申请：

xmlhttp.open("GET","/try/ajax/demo_get.php?t=" + Math.random(),true);
xmlhttp.send();
xmlhttp.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",true);
xmlhttp.send();

我的指标是除了下面字符拼接的形式，还能将对象作为参数发送申请

 this.$ajax.get('/v1/user', {
        pageSize:this.pageSize,
        pageNum:this.pageNum
    })
 this.$ajax.get('/v1/menuInfo?id='+1).then(res =>{})
 this.$ajax.get('/v1/menuInfo?id=1&lname=Ford').then(res =>{})

参数为对象时，要将 key:value 转为字符串 key=value，多个参数两头用 & 符连贯
须要先判断 url 的最初一位字符是否为 ’?’，不是的话，最后面还要补上 ’?’

 let paramsArray = []
 for(let key in params){paramsArray.push(key + '=' + params[key])
 }
 if(paramsArray.length){url = url.indexOf('?') > -1 ? url : (url + '?')
     if (url.indexOf('?') != url.length - 1){url += '&'}

     url += paramsArray.join('&')
 }

get 办法封装：

Vue.prototype.$ajax.get =  function get(url,params) {
        url = Vue.prototype.$ajax.baseURL + url;

        let paramsArray = []
        for(let key in params){paramsArray.push(key + '=' + params[key])
        }
        if(paramsArray.length){url = url.indexOf('?') > -1 ? url : (url + '?')
            if (url.indexOf('?') != url.length - 1){url += '&'}

            url += paramsArray.join('&')
        }
        let token = window.sessionStorage.getItem('token')
        token = (token != 'undefined') ? JSON.parse(token) : ''
        return createXMLHttp({
            method:'GET',
            url,
            headers:{
                'accept':'application/json',
                'Content-type':'application/json;charset=utf-8',
                'token': token
            }
        })
    }

为了方便使用，做成插件 vue 插件

//./plugin/MyAjax.js
var MyAjax = {};
MyAjax.install = function (Vue) {
    Vue.prototype.$ajax = {baseURL:'xxxxxxxxxxxxxxxxxxxx'    // 服务器域名: 端口}  
}
module.exports  = MyAjax;

//main.js
import myAjax from './plugin/MyAjax'
Vue.use(myAjax)

申请形式

申请形式和 axios 差不多

//POST 申请
 this.$ajax.post('/v1/login', {
                    userName:this.account,
                    passWord:this.password
                }).then(res =>{// console.log(res)
                
                })
  this.$ajax.post('/v1/group',this.groupInfo).then(res =>{if (!res.error){// this.$router.back()
                 }
             })
//GET 申请
  this.$ajax.get('/v1/xx?userName='this.userName).then(res =>{// console.log(res)             
                })
                   
    this.$ajax.get('/v1/user', {
        pageSize:this.pageSize,
        pageNum:this.pageNum
    }).then(res =>{console.log(res)
    })
    
   this.$ajax.get('/v1/menuInfo?id='+1).then(res =>{})
   this.$ajax.get('/v1/menuInfo?id=1&lname=Ford').then(res =>{})

残缺代码

var MyAjax = {};
MyAjax.install = function (Vue) {
    Vue.prototype.$ajax = {baseURL:'xxxxxxxxxxxxxxxxxxxx'}

    function createXMLHttp(arg) {return new Promise((resolve,reject) => {arg = arg || {}
            let xmlhttp;
            if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp = new XMLHttpRequest();} else {// code for IE6, IE5
                //xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange = function () {if (xmlhttp.readyState == 4) {if (xmlhttp.status == 200) {
                        var result = xmlhttp.responseText
                        try{resolve(JSON.parse(result))
                        }catch (e) {reject({errorMsg:'数据格式谬误'})
                        }

                        // console.log(Vue.prototype.$ajax.result)
                    } else {console.log('error:xmlhttp.status =', xmlhttp.status)
                        reject(xmlhttp)
                    }
                }
            }
            if(Vue.prototype.$ajax.interceptors && Vue.prototype.$ajax.interceptors.request){Vue.prototype.$ajax.interceptors.request(arg)
            }
            xmlhttp.open(arg.method || 'GET', arg.url, true);
            arg.headers = arg.headers || {};
            for (let key in arg.headers){xmlhttp.setRequestHeader(key, arg.headers[key]);
            }
            xmlhttp.send(arg.data);
        })
    }

    Vue.prototype.$ajax.get =  function get(url,params) {
        url = Vue.prototype.$ajax.baseURL + url;

        let paramsArray = []
        for(let key in params){paramsArray.push(key + '=' + params[key])
        }
        if(paramsArray.length){url = url.indexOf('?') > -1 ? url : (url + '?')
            if (url.indexOf('?') != url.length - 1){url += '&'}

            url += paramsArray.join('&')
        }
        let token = window.sessionStorage.getItem('token')
        token = (token != 'undefined') ? JSON.parse(token) : ''
        return createXMLHttp({
            method:'GET',
            url,
            headers:{
                'accept':'application/json',
                'Content-type':'application/json;charset=utf-8',
                'token': token
            }
        })
    }
    Vue.prototype.$ajax.post = function post(url,body) {
        url = Vue.prototype.$ajax.baseURL + url;
        body = JSON.stringify(body)
        let token = window.sessionStorage.getItem('token')
        token = (token != 'undefined') ? JSON.parse(token) : ''
        return createXMLHttp({
            method:'POST',
            url,
            headers:{
                'Content-type':'application/json;charset=utf-8',
                'token': token
            },
            data:body
        })
    }
    Vue.prototype.$ajax.put = function put(url,body) {
        url = Vue.prototype.$ajax.baseURL + url;
        body = JSON.stringify(body)
        let token = window.sessionStorage.getItem('token')
        token = token? JSON.parse(token) : ''
        return createXMLHttp({
            method:'PUT',
            url,
            headers:{
                'Content-type':'application/json;charset=utf-8',
                'token': token
            },
            data:body
        })
    }
    Vue.prototype.$ajax.DELETE = function DELETE(url,body) {
        url = Vue.prototype.$ajax.baseURL + url;
        body = JSON.stringify(body)
        let token = window.sessionStorage.getItem('token')
        token = token? JSON.parse(token) : ''
        return createXMLHttp({
            method:'DELETE',
            url,
            headers:{
                'Content-type':'application/json;charset=utf-8',
                'token': token
            },
            data:body
        })
    }
}
module.exports  = MyAjax;
正文完
前端
发表至： 前端
2021-05-23
 0
关于前端:Intellij-IDEA根据maven依赖名查找它是哪个pomxml引入的
关于前端:JavaScript波澜起伏的一生
第30期-边缘计算听说过吗淘宝用它提升了69的首屏性能-聊聊苹果营销页中几个有趣的交互动画
关于前端:vue报错-Duplicate-keys-detected-0

站内搜索

-「」