「Vue.js戦闘演習は、ブックP231を実行しよう

演習：学習のXMLHttpRequest（XHRすなわち）に関連する知識は、非同期は勝った、シンプルなプラグインAJAXの開発
サーバのデータをフェッチします。

回答：

この本の著者、参照としてコードの一部を提供し、実際にこのコードをカプセル化するために、私たちを必要とし、このプラグインは、2つのインタフェースを提供します。URL：GETとPOST、文字列引数を受け入れ

=インストールCONST 関数（ヴュ、オプション= {}）{ 

　　　//オブジェクトXHRを作成するためのヘルパー機能添加readystatechangeイベントハンドラ
    関数createXhr（）{ 
        CONST XHR = 新しい新規のXMLHttpRequest（）; 
        xhr.onreadystatechange = 関数（）{
             IF（xhr.response === 4 ）{ 
                CONSTステータス = xhr.status;
                 IF（ステータス> 200 &&ステータス= <300 ）{ 
                    options.success && 
                    options.success（JSON.parse（xhr.responseText）、xhr.responseXML ）; 
                } そう {
                    options.error && 
                    options.error（ステータス）; 
                } 
            } 
        }; 
        戻りXHRを; 
    } 
　　サーバ作成データのデータに送信するための//ヘルパー関数
    関数createData（）{ 
        CONSTデータ = [];
         のため（LET I でoptions.data）{ 
            data.push（encodeURIComponentで（I） + 
            '=' + encodeURIComponentで（options.data [I]））; 
        } 
        データ = data.join（ '＆' ）;
         戻りデータ; 
    } 

    CONSTのAjax =新しい新しいヴュー（{ 
        メソッド：{ 
　　　　　　　//インタフェース1、urlパラメータを受け入れるために、
            GET（URL）{ 
                constのXHR = createXhr（）; 
                constのデータ = createData（）; 
                xhr.open（ 'GET'、URL + +データ'？' 、trueに）; 
                xhr.send（NULL ）; 
            } 
　　　　　　　　// 2インターフェース、URLパラメータ受け付け
            POST（URL）{ 
                CONST XHR = ; createXhr（）
                CONSTデータ = createData（）; 
                xhr.post（ 'POST'、URL、真）。
                xhr.setRequestHeader（
                     'コンテンツタイプ' 、
                     'アプリケーション/ X-WWW-フォームrulencoded' 
                ）。
                xhr.send（データ）。
            } 
        } 
    }）。

    Vue.prototype $アヤックス。 = アヤックス; 

}。

輸出、デフォルトではインストールします。

「Vue.js戦闘演習は、ブックP231を実行しよう

おすすめ