jqueryのAjaxメソッド

バックグラウンド

ajaxメソッドをカプセル化するには、jqueryのajaxAPIを参照してください

技術的な問題

• jsonpパッケージ
• サポートを約束する
• formDataのサポート
• コンビニエンスメソッドのカプセル化
• モジュラーサポート

jsonpパッケージ

jsonpの原理は、スクリプトタグに基づいており、リクエストインターフェイスをsrcに割り当て、コールバック関数（?callback=jsonp12121）をサーバーに渡し、サーバーはtypeof jsonp12121 === 'function' && jsonp12121(respData)応答の形式でブラウザーに応答します。

完全なjsonpパッケージ

function JSONP(options) {
    //
    var callbackName = options.jsonpCallback || 'jsonp' + (new Date().getTime());

    var script = window.document.createElement('script');

    var abort = function () {
        // 设置 window.xxx = noop
        if (callbackName in window) {
            window[callbackName] = noop;
        }
    };

    var xhr = {abort: abort};
    var abortTimeout;

    var head = window.document.getElementsByTagName('head')[0] || window.document.documentElement;

    // ie8+
    script.onerror = function (error) {
        _error(error);
    };

    function _error(error) {
        window.clearTimeout(abortTimeout);
        xhr.abort();
        ajaxError(error.type, xhr, error.type, options);
        _removeScript();
    }

    window[callbackName] = function (data) {
        window.clearTimeout(abortTimeout);
        ajaxSuccess(data, xhr, options);
        _removeScript();
    };

    //
    serializeData(options);

    script.src = options.url.replace(/=\?/, '=' + callbackName);
    //
    script.src = appendQuery(script.src, '_=' + (new Date()).getTime());
    //
    script.async = true;

    // script charset
    if (options.scriptCharset) {
        script.charset = options.scriptCharset;
    }

    //
    head.insertBefore(script, head.firstChild);

    //
    if (options.timeout > 0) {
        abortTimeout = window.setTimeout(function () {
            xhr.abort();
            ajaxError('timeout', xhr, 'timeout', options);
            _removeScript();
        }, options.timeout);
    }

    // remove script
    function _removeScript() {
        if (script.clearAttributes) {
            script.clearAttributes();
        } else {
            script.onload = script.onreadystatechange = script.onerror = null;
        }

        if (script.parentNode) {
            script.parentNode.removeChild(script);
        }
        //
        script = null;

        delete window[callbackName];
    }

    return options.promise;
}

サポートを約束する

返されたオブジェクトをPromiseオブジェクトに設定することで、Promiseサポートを実現できます。

ie8はサポートされていません。

let ajax = function(options){
    var settings = extend({}, options || {});
    <!--promise 支持--> 
    try {
        var q = {};
        var promise = new Promise(function (resolve, reject) {
            q.resolve = resolve;
            q.reject = reject;
        });

        promise.resolve = q.resolve;
        promise.reject = q.reject;

        settings.promise = promise;
    } catch (e) {
        //
        settings.promise = {
            resolve: noop,
            reject: noop
        };
    }
    
    
    <!---->
    return settings.promise;
}

formdataのサポート

に設定processDataする必要があるだけで、に設定さfalseれcontentTypeていますfalse

let formData = new FormData();
ajax({
    url: '/upload',
    type: 'POST',
    cache: false,
    data: formData,
    processData: false,
    contentType: false
})

コンビニエンスメソッドのカプセル化

• ajax.get（）

• ajax.post（）

• ajax.getJSON（）

• ajax.ajaxSetup（）

モジュラーサポート

 // RequireJS && SeaJS
if (typeof define === 'function') {
    define(function () {
        return ajax;
    });
    // NodeJS
} else if (typeof exports !== 'undefined') {
    module.exports = ajax;
} else {
    // browser
    window.ajax = ajax;
}

サポートされているパラメーター

URL

（リクエストの送信に使用されるURLを含む文字列。）

受け入れる

（デフォルト：データ型によって異なります。）
コンテンツ型は要求ヘッダーを送信し、サーバーにどのような種類の応答が返されるかを通知します。accepts設定を変更する必要がある場合は、ajaxSetup（）メソッドで1回変更することをお勧めします。

非同期

（デフォルト：true）デフォルトでは、すべてのリクエストは非同期リクエストです。同期要求を送信する必要がある場合は、このオプションをfalseに設定します。
同期リクエストはブラウザをロックし、他のユーザー操作はリクエストの完了を待ってから実行できることに注意してください。）。

beforeSend（XHR）

（カスタムHTTPヘッダーの追加など、リクエストを送信する前にXMLHttpRequestオブジェクトの関数を変更できます。XMLHttpRequestオブジェクトが唯一のパラメーターです。
これはAjaxイベントです。falseを返すと、ajaxリクエストをキャンセルできます。）

function (XMLHttpRequest) {
    this; // 调用本次AJAX请求时传递的options参数
}

complete（XHR、TS）

リクエスト完了後のコールバック機能（リクエストが成功または失敗した後のコールバック）。パラメータ：XMLHttpRequestオブジェクトと成功したリクエストのタイプを説明する文字列。

function (XMLHttpRequest, textStatus) {
    this; // 调用本次AJAX请求时传递的options参数
}

contentType

（デフォルト： "application / x-www-form-urlencoded"）サーバーに情報を送信するときのコンテンツエンコーディングタイプ。デフォルト値はほとんどの状況に適しています。
content-typeをajax（）に明示的に渡す場合は、サーバーに送信する必要があります（送信するデータがない場合でも）

環境

（このオブジェクトは、Ajax関連のコールバックのコンテキストを設定するために使用されます。言い換えると、コールバック関数がオブジェクト内でこのポイントを指すようにします（このパラメーターを設定しない場合
、これは、このAJAXリクエストを呼び出すときに渡されるオプションパラメーターを指します） ）
たとえば、成功コールバック関数のコンテキストがこのDOM要素に設定されるように、コンテキストパラメーターとしてDOM要素を指定します。次のように:)

$.ajax({ url: "test.html", context: document.body, success: function(){
    $(this).addClass("done");
}});

crossDomain

（デフォルト：同じドメイン要求はfalseです）
クロスドメイン要求はtrueですクロスドメイン要求（JSONP形式など）を同じドメインに強制する場合は、crossDomainをtrueに設定します。これにより、たとえば、サーバー側で別のドメインにリダイレクトされます

データ

（サーバーに送信されたデータ。リクエスト文字列形式に自動的に変換されます。GETリクエストはURLに追加されます。この自動変換を禁止するには、processDataオプションの説明を確認してください。
キー/値形式である必要があります。が配列の場合、jQueryは自動的に異なる値を同じ名前に対応させます。たとえば、{foo：["bar1"、 "bar2"]}は "＆foo = bar1＆foo = bar2"に変換されます。）

データ・タイプ

サーバーが返すと予想されるデータのタイプ。指定しない場合、HTTPパッケージのMIME情報に基づいて自動的にインテリジェントに判断されます。たとえば、XMLMIMEタイプはXMLとして認識されます。1.4では、JSONはJavaScriptオブジェクトを生成し、スクリプトはスクリプトを実行します。
次に、サーバーから返されたデータがこの値に従って解析され、コールバック関数に渡されます。使用可能な値：

「Xml」：jQueryで処理できるXMLドキュメントを返します。

"Html"：プレーンテキストのHTML情報を返します。含まれているスクリプトタグは、domが挿入されたときに実行されます。

「Json」：JSONデータを返します。

「Jsonp」：JSONP形式。「myurl？callback =？」などのJSONPの形式で関数を呼び出すと、jQueryは自動的に？を正しい関数名に置き換えてコールバック関数を実行します。

「テキスト」：プレーンテキストの文字列を返します

"*"： いかなるタイプ

error（XMLHttpRequest、textStatus、errorThrown）

（デフォルト：自動判断（xmlまたはhtml））この関数は、要求が失敗したときに呼び出されます。XMLHttpRequestオブジェクト、エラーメッセージ、および（オプションの）キャプチャされた例外オブジェクトの3つのパラメータがあります。エラーが発生した場合、エラーメッセージ（2番目のパラメータ）
は、nullに加えて、「timeout」、「error」、「notmodified」、および「parsererror」である可能性があります。

function (XMLHttpRequest, textStatus, errorThrown) {
    // 通常 textStatus 和 errorThrown 之中
    // 只有一个会包含信息
    this; // 调用本次AJAX请求时传递的options参数
}

ヘッダー

追加の「{key：value}」ペアがリクエストにマッピングされ、一緒に送信されます。beforeSend関数は、この設定が設定される前に呼び出されるため、メッセージヘッダーの値設定は、beforeSend関数のスコープ内のすべての設定をオーバーライドできます。

jsonp

jsonpリクエストのコールバック関数の名前を書き直します。この値は、「callback =？」GETまたはPOSTリクエストのURLパラメータの「callback」部分を置き換えるために使用されます。たとえば
、{jsonp： 'onJsonPLoad'}により、「onJsonPLoad =？」がサーバーに渡されます。 。

jsonpCallback

jsonpリクエストのコールバック関数名を指定します。この値は、j​​Queryによって自動的に生成されたランダムな関数名を置き換えるために使用されます。これは主にjQueryが一意の関数名を生成できるようにするために使用される
ため、リクエストの管理が容易になり、コールバック関数とエラー処理を提供するのにも便利です。ブラウザでGETリクエストをキャッシュする場合は、コールバック関数名を指定することもできます。

success（data、textStatus、jqXHR）

リクエストが成功した後のコールバック関数。パラメータ：サーバーによって返され、dataTypeパラメータに従って処理されるデータ。ステータスを説明する文字列。

function (data, textStatus) {
    // data 可能是 xmlDoc, jsonObj, html, text, 等等...
    this; // 调用本次AJAX请求时传递的options参数
}

タイムアウト

リクエストのタイムアウト時間をミリ秒単位で設定します。この設定は、グローバル設定を上書きします。

タイプ

（デフォルト： "GET"）リクエストメソッド（ "POST"または "GET"）、デフォルトは "GET"です。注：PUTやDELETEなどの他のHTTPリクエスト方法も使用できますが、サポートしているのは一部のブラウザのみです。

ユーザー名

HTTPアクセス認証要求への応答に使用されるユーザー名

パスワード

HTTPアクセス認証要求に応答するために使用されるパスワード

processData

（デフォルト：true）デフォルトでは、データオプションを介して渡されるデータは、オブジェクトの場合（技術的には、文字列でない限り）、
デフォルトに一致するように処理され、クエリ文字列に変換されます。コンテンツタイプ「application / x-www-form-urlencoded」。
DOMツリー情報や変換したくないその他の情報を送信する場合は、falseに設定してください。

xhrFields

オブジェクトオブジェクト。withCredentials、Access-Control-Allow-Credentialsをサポートできます。
これらのパラメーターのwithCredentials互換性はIE10 +です。

mimeType

（mimeタイプは、XHRのMIMEタイプをオーバーライドするために使用されます。）

ifModified

（（デフォルト：false）サーバーデータが変更された場合にのみ新しいデータを取得します。HTTPパケットのLast-Modifiedヘッダーを使用して決定します。
サーバーで指定された「etag」もチェックされ、データが変更されていないことを確認します。）

キャッシュ

（（デフォルト：true、dataTypeがscriptおよびjsonpの場合のデフォルトはfalse）falseに設定されている場合、このページはキャッシュされません。）

現在サポートされていないパラメータ

xhr

（デフォルトのxhr（XMLHttpRequest、ie8 +と互換性があります）を使用します

伝統的な

（従来の方法でデータをシリアル化する場合は、trueに設定します。）

statusCode

（数値HTTPコードと関数オブジェクトのセット、および対応するコードは、応答時に呼び出されます。たとえば、応答ステータスが404の場合、次のアラームがトリガーされます:)

ajax({
  statusCode: {404: function() {
    alert('page not found');
  }
});

isLocal

（デフォルト：現在の場所のプロトコルに依存します）
（jQueryがデフォルトで認識しない場合でも、現在の環境を「ローカル」（ファイルシステムなど）として認識できるようにします。
現在、次のプロトコルがローカルとして認識されます：file 、*-拡張子、およびウィジェット。isLocal設定を変更する必要がある場合は、$。ajaxSetup（）メソッドで一度これを行うことをお勧めします。）

グローバル

（デフォルト：true）グローバルAJAXイベントをトリガーするかどうか。falseに設定しても、ajaxStartやajaxStopなどのグローバルAJAXイベントはトリガーされません。さまざまなAjaxイベントを制御するために使用できます。

dataFilter

（Ajaxによって返される元のデータを前処理する関数。dataとtypeの2つのパラメーターを指定します
。dataはAjaxによって返される元のデータであり、typeはAjaxを呼び出すときに提供されるdataTypeパラメーターです。関数によって返される値はさらに処理されます。 jQueryによる。）

コンバーター

（デフォルト：{"* text"：window.String、 "text html"：true、 "text json"：jQuery.parseJSON、 "text xml"：jQuery.parseXML}）
（データ型からデータ型へのコンバーターオブジェクト。各コンバーターの値は、応答の変換された値を返す関数です）

内容

「{string：regularexpression}」とペアになっているオブジェクトは、コンテンツタイプを指定して、応答がどのように解析されるかを決定するために使用されます。

github

https://github.com/bosscheng/simple-ajax