乐趣区

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

作者：

jiezi

在

文章目录
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;

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理。

更多文章