XMLHttpRequest 2（まず、 BenjaminGruenbaumとFelixKlingからの回答を読んでください）
jQueryを使用せず、最新のブラウザーとモバイルブラウザーでも機能する短いXMLHttpRequest 2が必要な場合は、次のように使用することをお勧めします。
function ajax(a, b, c){ // URL, callback, just a placeholder
c = new XMLHttpRequest;
c.open('GET', a);
c.onload = b;
c.send()
}
ご覧のように：
- リストされている他のすべての関数よりも短いです。
- コールバックは直接設定されます（したがって、余分な不要なクロージャはありません）。
- 新しいオンロードを使用します（したがって、readystate &&ステータスを確認する必要はありません）
- XMLHttpRequest 1を煩わしくする、私が覚えていない他のいくつかの状況があります。
このAjax呼び出しの応答を取得する方法は2つあります（3つはXMLHttpRequest変数名を使用します）。
もっとも単純な：
this.response
または、何らかの理由bind()でクラスへのコールバックを行った場合：
e.target.response
例：
function callback(e){
console.log(this.response);
}
ajax('URL', callback);
または（上記の方が良い匿名関数は常に問題です）：
ajax('URL', function(e){console.log(this.response)});
簡単なことはありません。
これで、onreadystatechangeまたはXMLHttpRequest変数名を使用する方が良いと言う人もいるかもしれません。それは間違っている。
XMLHttpRequestの高度な機能を確認してください。
すべての*最新のブラウザをサポートしていました。そして、XMLHttpRequest 2が作成されて以来、このアプローチを使用していることを確認できます。使用したブラウザで問題が発生したことはありません。
onreadystatechangeは、状態2のヘッダーを取得する場合にのみ役立ちます。
XMLHttpRequestonload / oreadystatechangeクロージャ内でコールバックを実行する必要があるため、変数名を使用することは別の大きなエラーです。そうしないと、変数名が失われます。
これで、 POSTとFormDataを使用してより複雑なものが必要な場合は、この関数を簡単に拡張できます。
function x(a, b, e, d, c){ // URL, callback, method, formdata or {key:val},placeholder
c = new XMLHttpRequest;
c.open(e||'get', a);
c.onload = b;
c.send(d||null)
}
繰り返しますが...これは非常に短い関数ですが、GETとPOSTを実行します。
使用例：
x(url, callback); // By default it's GET so no need to set
x(url, callback, 'post', {'key': 'val'}); // No need to set POST data
または、完全なフォーム要素（document.getElementsByTagName('form')[0]）を渡します。
var fd = new FormData(form);
x(url, callback, 'post', fd);
または、いくつかのカスタム値を設定します。
var fd = new FormData();
fd.append('key', 'val')
x(url, callback, 'post', fd);
ご覧のとおり、同期を実装していません...それは悪いことです。
そうは言っても...簡単な方法でやってみませんか？
コメントで述べたように、エラー&&同期の使用は、答えのポイントを完全に壊します。Ajaxを適切な方法で使用するための良い短い方法はどれですか？
エラーハンドラ
function x(a, b, e, d, c){ // URL, callback, method, formdata or {key:val}, placeholder
c = new XMLHttpRequest;
c.open(e||'get', a);
c.onload = b;
c.onerror = error;
c.send(d||null)
}
function error(e){
console.log('--Error--', this.type);
console.log('this: ', this);
console.log('Event: ', e)
}
function displayAjax(e){
console.log(e, this);
}
x('WRONGURL', displayAjax);
上記のスクリプトには、静的に定義されたエラーハンドラがあるため、機能が損なわれることはありません。エラーハンドラは他の関数にも使用できます。
しかし、実際にエラーを発生させるには、間違ったURLを書き込むしか方法がありません。その場合、すべてのブラウザーがエラーをスローします。
カスタムヘッダーを設定したり、responseTypeをblob配列バッファーに設定したりする場合は、エラーハンドラーが役立つ可能性があります...
メソッドとして「POSTAPAPAP」を渡してもエラーは発生しません。
'fdggdgilfdghfldj'をformdataとして渡しても、エラーはスローされません。
最初のケースでは、エラーはdisplayAjax()アンダーthis.statusTextの中にありMethod not Allowedます。
2番目のケースでは、それは単に機能します。正しい投稿データを渡したかどうかをサーバー側で確認する必要があります。
クロスドメインは許可されていませんが、自動的にエラーをスローします。
エラー応答には、エラーコードはありません。
エラーthis.typeに設定されているもののみがあります。
エラーを完全に制御できないのに、なぜエラーハンドラを追加するのですか？ほとんどのエラーは、コールバック関数のこの内部で返されますdisplayAjax()。
したがって、URLを適切にコピーして貼り付けることができれば、エラーチェックの必要はありません。;）
PS：最初のテストとしてx（'x'、displayAjax）...を書きましたが、完全に応答がありました... ??? そこで、HTMLが配置されているフォルダーを確認したところ、「x.xml」というファイルがありました。したがって、ファイルの拡張子を忘れた場合でも、XMLHttpRequest2はそれを見つけます。私は大爆笑だ
同期ファイルを読み取る
そうしないでください。
ブラウザをしばらくブロックしたい場合は、.txt同期して大きなファイルをロードしてください。
function omg(a, c){ // URL
c = new XMLHttpRequest;
c.open('GET', a, true);
c.send();
return c; // Or c.response
}
今、あなたはすることができます
var res = omg('thisIsGonnaBlockThePage.txt');
非同期の方法でこれを行う他の方法はありません。（ええ、setTimeoutループで...しかし真剣に？）
もう1つのポイントは、APIや独自のリストのファイルなど、リクエストごとに常に異なる関数を使用する場合です。
常に同じXML/JSONをロードするページがある場合、または1つの関数のみが必要な場合のみ。その場合は、Ajax関数を少し変更し、bを特殊関数に置き換えます。
上記の機能は基本的なものです。
機能を拡張したい場合...
はい、できます。
私は多くのAPIを使用しており、すべてのHTMLページに統合する最初の関数の1つは、この回答の最初のAjax関数であり、GETのみです...
しかし、XMLHttpRequest2では多くのことができます。
ダウンロードマネージャー（履歴書、ファイルリーダー、ファイルシステムで両側の範囲を使用）、キャンバスを使用したさまざまな画像リサイザーコンバーター、base64imagesなどをWebSQLデータベースに入力しました...
しかし、これらの場合、その目的のためだけに関数を作成する必要があります...時にはblob、配列バッファーが必要であり、ヘッダーを設定し、mimetypeをオーバーライドすることができ、さらに多くのことがあります...
しかし、ここでの問題は、Ajax応答を返す方法です...（簡単な方法を追加しました。）
