AJAX メソッドのネイティブ JS カプセル化

Ajax は誰もが毎日使用しています。jquery ライブラリによる Ajax のカプセル化も非常に完全で使いやすいです。その内部原理を見て、独自の Ajax ライブラリを手動でカプセル化してみましょう。

1. 原則

ネイティブ Ajax の送信には 4 つの手順が必要です:

1) Ajax オブジェクトの作成: XMLHttpRequest

2) 設定リクエスト パラメータ: open(リクエスト パラメータ [get/post]、URL アドレス、非同期かどうか [true/false] )

#3) コールバック関数の設定: onreadystateChange は返されたデータの処理に使用されます

4) リクエストを送信します: send()

//TODO step1: 创建ajax对象
var xhr = new XMLHttpRequest();
//TODO step2: 设置请求参数
xhr.open('get','01.php',true);
//TODO step3: 设置回调
xhr.onreadystatechange = function () {
    //接收返回数据
    console.log(xhr.responseText);//responseText 用于接收后台响应的文本
}
//TODO step4: 发送请求
xhr.send();

2. カプセル化

カプセル化の中心的な考え方は、動的に変更する必要がある部分を処理することです。上記のコードでは、リクエスト メソッド (get、post)、リクエスト アドレス URL、リクエスト パラメータ データ、コールバック成功、コールバック失敗エラーなど、これらのパラメータは動的に変更されます。 Ajax オブジェクト XMLHttprequest の作成、イベント監視 onreadystatechange などが修正されているため、最初のステップはカプセル化パラメータを決定することです:

#v URL リクエスト アドレス

v データ リクエスト データ

v type request type

v success success callback

v error Failure callback

v beforeSend は送信前に呼び出され、送信を防ぐために false を返します

v ajax リクエストが成功した場合の完全なコールバックは、いつ実行されても実行されます

function ajax(option){
    //用户配置option 默认配置init
    var init = {
        type:'get',
        async:true,
        url:'',
        success: function () { },
        error: function () { },
        data:{},
        beforeSend: function () {
            console.log('发送前...');
            return false;
        }
    };
    //TODO step1: 合并参数
    for(k in option){
        init[k] = option[k];
    }
    //TODO step2: 参数转换
    var params = '';
    for(k in init.data){
        params += '&'+k+'='+init.data[k];
    }
    var xhr = new XMLHttpRequest();
    // type url
    //TODO step3: 区分get和post,进行传参
    var url = init.url+'?__='+new Date().getTime();
    //TODO step4: 发送前
    var flag = init.beforeSend();
    if(!flag){
        return;
    }
    if(init.type.toLowerCase() == 'get'){
        url += params;
        xhr.open(init.type,url,init.async);
        xhr.send();
    }else{
        xhr.open(init.type,url,init.async);
      xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
        xhr.send(params.substr(1));
    }
    xhr.onreadystatechange = function () {
        if(xhr.readyState == 4){
            if(xhr.status == 200){
                init.success(xhr.responseText);
            }else{
                //error
                init.error();
            }
        }
    }
}

ここで注意すべき点は、get と post のパラメータの受け渡し方法が異なることです。get リクエストは直接接続する必要があります。 URL アドレスの後に、投稿リクエストは send メソッドでパラメータを渡す必要があり、これは次のようにする必要があります。リクエスト ヘッダーは setRequestHeader('content-type','application/x-www-form-urlencoded') であるため、カプセル化するときに区別する必要があります。

パラメータが多すぎるため、ユーザーは毎回多くのパラメータを渡す必要はありません。そうしないと、使用するのが非常に面倒になります。したがって、ユーザーがパラメーターを渡さない場合はデフォルト値が使用され、ユーザーがパラメーターを渡さない場合はユーザーのパラメーターが使用される、デフォルトのパラメーターの形式を採用します。

3. 使用例

ajax({
    url: 'test.json',
    data:{test:123,age:456},
    //type:'post',
    success: function (res) {
        console.log(res);
    }
});

以上がAJAX メソッドのネイティブ JS カプセル化の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。