原生jsパッケージajaxリクエスト【超詳細】

記事ディレクトリXMLHttpRequestオブジェクトonreadystatechangeイベントsetRequestHeader処理応答サーバへの要求構想説明要求方式完全コードの送信
AJAXの基本をマスターしているのは、考え方の説明から見てもいいです
XMLHttpRequestオブジェクト
すべての現代ブラウザはXMLHttpRequestオブジェクトをサポートしています(IE 5とIE 6は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タグを解析するには、主に3つの方法があります.

XMLHttpRequest.responseXML属性

を用いる.

は、fragment.body.innerHTMLを介して1つのドキュメントセグメントにコンテンツを注入し、DOMのセグメント

を巡回する.

HTML文書の内容を予め知る場合は、RegExp

を用いることができる.
HTMLコードがわずかに変更された場合、この方法は失敗する可能性があるため、3つ目の方法は推奨されません.一般的に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()メソッドをカプセル化する

XMLHttpRequestオブジェクトを作成する

はonreadystatechangeイベントを処理し、サーバが処理の準備が完了したときに実行するタスク

を規定する.

open()は、要求の種類、URL、及び要求

を非同期に処理するか否かを規定する.

setRequestHeader()設定要求ヘッダ

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;