最近、私は多くのAjaxオペレーションを関与させてきましたが、バックグラウンドですべきことをしなければなりません。私が現在使用しているajax関数はバックグラウンド担当者によってカプセル化されていますが、それはjquery ajaxに基づいているため、jqueryなしでは役に立たないでしょう。そして、jQueryのAjaxメソッドは非常に完全であり、直接使用できると思います。 jqueryがある場合、彼のajaxは無駄に使用されません。私に欠けているのは、jQueryなしで使用できるAjaxメソッドです。
そのため、私は1日を書く1日を費やしました。パラメーターと呼び出し方法は、JQueryのAjaxに似ています。 xhr = xmlhttprequestであるため、xhrと呼ばれます。
コードコピーは次のとおりです。
/*
*名前：xhr、ajaxカプセル化関数
*説明：jQueryのajaxコールメソッドを模倣したJavaxコールカプセル化クラス
*著者：10年の光
*/
var xhr = function（）{
var
ajax = function（）{
return（ 'xmlhttprequest' in window）？関数 （） {
new xmlhttprequest（）を返します。
} ： 関数 （） {
new ActiveXObject（ "microsoft.xmlhttp"）;
}
}（）、
formatdata = function（fd）{
var res = '';
for（fd in fd）{
res+= f+'='+fd [f]+'＆';
}
RES.SLICE（0、-1）を返します。
}、
ajax = function（ops）{
var
root =これ、
req = ajax（）;
root.url = ops.url;
root.type = ops.type || 'ResponseText';
root.method = ops.method || '得る';
root.async = ops.async ||真実;
root.data = ops.data || {};
root.complete = ops.complete ||関数 （） {};
root.success = ops.success ||関数（）{};
root.error = ops.error || function（s）{alert（root.url+' - > status：'+s+'error！'）};
root.abort = req.abort;
root.setData = function（data）{
for（var d in data）{
root.data [d] = data [d];
}
}
root.send = function（）{
var datastring = formatdata（root.data）、
sendstring、get = false、
async = root.async、
complete = root.complete、
method = root.method、
type = root.type;
if（method === 'get'）{
root.url+= '？'+datastring;
get = true;
}
req.open（method、root.url、async）;
if（！get）{
req.setRequestheader（ "content-type"、 "application/x-www-form-urlencoded"）;
sendString = dataString;
}
//送信前にonreadystatechangeメソッドをリセットすると、新しい同期リクエストが表示され、2つの成功したコールバックが実行されます（Chromeなども、リクエストを同期するときにOnreadedStateChangeを実行します）
Req.OnreadyStateChange = async？関数 （） {
// console.log（ 'async true'）;
if（req.readystate == 4）{
完了（）;
if（req.status == 200）{
root.success（req [type]）;
} それ以外 {
root.error（req.status）;
}
}
}：null;
req.send（sendstring）;
if（！async）{
//console.log('async false '）;
完了（）;
root.success（req [type]）;
}
}
root.url && root.send（）;
};
return function（ops）{return new ajax（ops）;}
}（）;
パラメーター説明：
1.url：リクエストアドレス。あなたはそれを記入することはできず、リクエストは開始されません。しかし、もしあなたがそれを記入して送信させないなら、私はあなたを間違いで責めることはありません。
2.METHOD：「Get」または「POST」、すべて大文字、デフォルトGET
3.data：送信されるデータはオブジェクトです
4.Async：それが非同期であるかどうか、デフォルトは真です
5.Type：返されたデータ型はResponseTextまたはResponseXMLのみであり、デフォルトのResponsetTextです
6.complete：リクエストが完了したときに実行される関数
7.Success：リクエストが成功したときに実行される関数
8.エラー：リクエストが失敗したときに実行される関数
注：タイプパラメーターは、jQueryのデータ型ほどリッチではなく、ネイティブAjaxのResponsetextまたはResponseXMLのみです。 JSONデータが返された場合、テキストをJSONに変換するには、成功関数で自分で処理する必要があります。
機能の説明：
インスタンス化されたXHRオブジェクトに使用する2つの機能があります。 1つは送信されます。呼び出し方法は、xhr.send（）で、パラメーターがありません。その機能は、リクエストプロセスを開始することです。初期化中にURLがない場合、送信メソッドは実行されないため、後でURLを追加して手動で送信を開始できます - 送信中にURLがない場合、リクエストは失敗し、このエラーを処理しませんでした。自分でエラーを見つけることができます。
別の方法はsetData、コールメソッドはxhr.setdata（data_obj）、そのパラメーターはオブジェクトです。 SetDataメソッドの関数は、Xhr.Dataのデータ属性の値を部分的に置き換えることです。たとえば、Xhr.Dataにはすでにページがあります。 Xhr.setData（{Page：2}）を使用して、データに既に存在する他の属性値に影響を与えることなく、その値を更新できます。
呼び出し方法：
コードコピーは次のとおりです。
var a1 = xhr（{
url： '2.php'、
データ：{
「ユーザー名」： 'lix'、
「パスワード」： '123456'、
「性別」：「男性」、
「インターセット」：「プレイ」
}、
async：false、
方法：「取得」、
成功：function（data）{
var obj = json.parse（data）;
// ...
}
}）;
注：新しい書く必要はありません
注目の紹介：
このプロジェクトの経験の後、AJAXクラスには非常に一般的な機能があるはずです。リクエストを繰り返し開始するのが便利です。たとえば、プロジェクトでAjaxのページを書くとき、ページをターンするたびにリクエストを送信する必要がありますが、送信されたデータは現在のページ番号と各ページの数を除いて変更されません。これらの変更されていないパラメーターを繰り返し定義する必要がある場合、それは間違いなくリソースの無駄です。
したがって、このXHR関数はすでにこの関数を考慮しています。ページネーションの例を見てみましょう。ページがロードされたときにXHRオブジェクトを初期化し、変数A1として保存できます。ページターン要求が開始されると、他のパラメーターは変更されていませんが、Pagenumberは変更されました。この時点で、XHRのSetDataメソッドを呼び出してPagenumberを変更できます。
コードコピーは次のとおりです。
a1.setdata（{pagenumber：2}）;
注：SetDataのパラメーターもオブジェクトです。
もちろん、データを完全に交換することもできます。
a1.data = {…};
データだけでなく、URLの変更、成功関数の変更、投稿の変更、同期を非同期に変更するなど、インスタンス化されたXHRオブジェクトA1にさらに変更を加えることができます... A1.Send（）メソッドを変更した後、設定に応じてリクエストを再度開始します。
もちろん、それがまったく関係のない別のAJAX要求である場合、この既製のA1を強制する必要はありません。 A2などと呼ばれる別のXHRをインスタンス化できます。
XHRという名前に満足していない場合は、自分で変更することしかできません。
さらに、圧縮された暗号化されたバージョンを提供します。非圧縮バージョンでは、約2kbのコメントを削除し、圧縮バージョンは1.00kbです。
コードコピーは次のとおりです。
var xhr = function（）{var e = function（）{return "xmlhttprequest" in window？function（）{return new xmlhttprequest}：function（）{return new ActiveXObject（ "microsoft.xmlhttp"）}}（ 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; n（）{}; 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 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 = tr ue} 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）{new n（e）}}}}}}を返す
XHRには不完全さがある必要があります。将来使用中に見つけた場合は、時間内に修正します。あなたがそれに満足していないか、それが不十分だと思うなら、改善のための提案をしてください。