ネイティブ Javascript_javascript スキルでカプセル化された AJAX 関数の共有

私の最近の仕事には多くの ajax 操作が含まれており、現在使用されている ajax 関数はバックグラウンドでカプセル化されていますが、jquery の ajax に基づいています。 jquery のない関数は役に立ちません。また、jquery の ajax メソッドは非常に完成されており、すでに jquery を持っている場合は、その ajax を無駄に使用することはないと思います。 jquery なしで使用できます。

それで、私も 1 日かけて作成しました。パラメータと呼び出しメソッドは jquery の ajax に似ています。xhr=XMLHttpRequest.

と呼ぶことにします。

コードをコピー コードは次のとおりです:

/*
* 名前: xhr,AJAX ラッパー関数
* 説明: jquery の ajax 呼び出しメソッド
を模倣した、ajax 呼び出しカプセル化クラス * 著者：十年ランプ
*/
var xhr = function () {
var
ajax = function () {
return ('XMLHttpRequest' in window) function () {
return new XMLHttpRequest();
} : 関数 () {
return new ActiveXObject("Microsoft.XMLHTTP");
}
}()、
formatData= 関数 (fd) {
var res = '';
for(fd の var f) {
res = f '=' fd[f] '&';
}
return res.slice(0,-1);
}、
AJAX = function(ops) {
                                                     ルート = これ、
req = ajax();
root.url = ops.url;

root.type = ops.type || 'responseText';
root.method = ops.method || 'GET';
root.async = ops.async || true; root.data = ops.data {};
root.complete = ops.complete 関数 () {};
root.success = ops.success || function(){};
root.error = ops.error 関数 {alert(root.url '->status:' s 'error!')};
root.abort = req.abort;
root.setData = 関数 (データ) {
for(データ内の変数) {
root.data[d] = data[d];
}
}
root.send = function () {
var datastring = formatData(root.data),
sendstring,get = false,
async = root.async,
complete = root.complete,
メソッド = root.method,
type=root.type;
If(メソッド === 'GET') {
root.url ='?' データ文字列;
get = true;
}
req.open(method,root.url,async);
if(!get) {
req.setRequestHeader("Content-type","application/x-www-form-urlencoded");
sendstring = datastring;
                                                                       

//送信前に onreadystatechange メソッドをリセットします。そうしないと、新しい同期リクエストが発生し、成功したコールバックが 2 回実行されます (Chrome なども同期リクエスト中に onreadystatechange を実行します)
req.onreadystatechange = async ? {
// console.log('async true');
If (req.readyState ==4){
complete();
If(req.status == 200) {
root.success(req[type]);
} else {
Root.error(req.status);
                                                                                                                                                                              ​  }
} : null;
req.send(sendstring);
if(!async) {
//console.log('async false');
complete();
root.success(req[type]);
}
}
root.url && root.send(); };
return function(ops) {return new AJAX(ops);}
}();

パラメータの説明:

1.url: リクエストのアドレス。入力しないとリクエストは開始されません。ただし、入力せずに強制的に送信しても、問題が発生しても私を責めることはありません。 🎜> 2.メソッド: 「GET」または「POST」、すべて大文字、デフォルトは GET

3.data: 送信するデータが添付され、形式はオブジェクト

4.async: 非同期かどうか、デフォルトは true
5.type: 返されるデータ型はresponseTextまたはresponseXMLのみです。デフォルトはresponseText
です。 6.complete: リクエストが完了したときに実行される関数
7.success: リクエストが成功したときに実行される関数
8.error: リクエストが失敗したときに実行される関数

注: type パラメーターは、jquery の dataType ほど豊富ではありません。ネイティブ AJAX では、responseText または responseXML しかありません。json データが返された場合は、success 関数でそれを自分で処理してテキストを json に変換する必要があります。

機能の説明:

インスタンス化された xhr オブジェクトには 2 つの関数があり、1 つは send です。呼び出しメソッドは xhr.send() で、パラメーターはありません。その関数は、初期化中に URL がない場合はリクエスト プロセスを開始しません。 send メソッドが実行されるため、後で URL を追加して手動で送信を開始できます。送信時に URL がない場合、リクエストは失敗し、このエラーは自分で見つけなければなりません。 >

もう 1 つのメソッドは setData です。呼び出しメソッドは xhr.setData(data_obj) で、そのパラメータは xhr の data 属性の値を部分的に置き換えることです。すでに xhr.data 内のページです: 1. xhr.setData({page:2}) を使用すると、データ内に既に存在する他の属性値に影響を与えることなく、その値を更新できます。

メソッドの呼び出し:

コードをコピー

コードは次のとおりです:

var a1 = xhr({
                                                                                                                                                                                                                         データ:{ 'ユーザー名':'lix', 'パスワード':'123456',
'性別':'男性',
'interset':'play'
}、
非同期:false,
メソッド: 'GET'、
成功: 関数 (データ) {
var obj = JSON.parse(data);
//....
}
});


注: 新しく書き込む必要はありません

機能の紹介:
この期間のプロジェクト経験を経て、ajax クラスには非常に一般的な機能が必要であることがわかりました。たとえば、プロジェクトでページ分割 ajax を作成した場合、ページを作成するたびにリクエストを送信する必要がありました。は変わりましたが、現在のページ番号とページごとの項目数を除いて、他のデータは変更されません。このようなリクエストを複数回行う場合は、変更されていないパラメーターを繰り返し定義する必要があり、これは間違いなくリソースの無駄です。

この xhr 関数はすでにこの関数を考慮しています。ページングの例を考えると、ページがロードされるときに xhr オブジェクトを初期化し、ページめくりリクエストが開始されるときにそれを変数 a1 として保存できます。変更されていますが、pageNumber は変更されています。この時点で、xhr の setData メソッドを呼び出して pageNumber を変更できます。

コードをコピーします コードは次のとおりです: a1.setData({pageNumber:2});

注: setData のパラメータもオブジェクトです。

もちろん、データ全体を置き換えることもできます:

a1.data = {…};

データだけでなく、インスタンス化された xhr オブジェクト a1 にさらに変更を加えることができます。たとえば、URL の変更、success 関数の変更、GET から POST、同期から非同期へ... 変更後、再度 a1.send() を呼び出します。メソッドを実行すると、設定に従ってリクエストが再度開始されます。

もちろん、それがまったく関係のない別の ajax リクエストである場合は、この既製の a1 を使用する必要はありません。別の xhr をインスタンス化して、それを a2 などと呼ぶことができます。

xhr という名前に満足できない場合は、自分で変更する必要があります。

圧縮および暗号化されたバージョンも提供されています。非圧縮バージョンはコメントを除いて約 2kb、圧縮バージョンは 1.00kb です。

コードをコピー コードは次のとおりです: var xhr=function(){var e=function(){window で "XMLHttpRequest" を返す?function(){新しい XMLHttpRequest を返す}:function(){新しい ActiveXObject("Microsoft.XMLHTTP") を返す}}(),t =function(e){var t="";for(var n in e){t =n "=" e[n] "&"}return t.slice(0,-1)},n=function( n){var r=this,i=e();r.url=n.url;r.type=n.type||"responseText";r.method=n.method||"GET";r。 async=n.async||true;r.data=n.data||{};r.complete=n.complete||function(){};r.success=n.success||function(){} ;r.error=n.error||function(e){alert(r.url "->status:" e "error!")};r.abort=i.abort;r.setData=function(e ){for(var t in e){r.data[t]=e[t]}};r.send=function(){var e=t(r.data),n,s=false,o= r.async,u=r.complete,a=r.method,f=r.type;if(a==="GET"){r.url="?" e;s=true}i.open( a,r.url,o);if(!s){i.setRequestHeader("Content-type","application/x-www-form-urlencoded");n=e}i.onreadystatechange=o?function( ){if(i.readyState==4){u();if(i.status==200){r.success(i[f])}else{r.error(i.status)}}}: null;i.send(n);if(!o){u();r.success(i[f])}};r.url&&r.send()};return function(e){return new n( e)}}()

XHR にはいくつか不完全な点があるはずです。今後使用する際に発見された場合は、すぐに修正しますので、ご満足いただけない場合は、遠慮なく改善案を提供してください。