導入
JavaScript で Ajax を呼び出すさまざまな方法には多くのオプションがあり、サーバーへのデータの送信、ユーザー名の確認、オートコンプリート フォームの作成、投票と評価、チャット ルームの作成など、ユーザー エクスペリエンスを大幅に向上させることができます。.
この記事では、AJAX呼び出しを行うための様々なオプションの最新リストに関する情報を取り上げます。分かりやすくするために、それぞれのオプションには長所と短所があるので、それぞれの内容に焦点を当てましょう。.
1. XHR
XMLHttpRequest は、ウェブページがサーバーにリクエストを送信し、ページ全体を再読み込みすることなくレスポンスを受け取ることを可能にするオブジェクト（他のほとんどのブラウザではネイティブコンポーネント、Microsoft Internet Explorer では ActiveX オブジェクト）です。ユーザーは、ページが再読み込みされていないかのように同じページを閲覧し続け、さらに重要な点として、処理が行われていることに気づかない、つまり少なくともデフォルトでは新しいページが読み込まれることはありません。.
XMLHttpRequest オブジェクトを使用すると、開発者はサーバーからページ全体を再度要求することなく、ブラウザーに既に読み込まれているページをサーバーのデータで変更できます。.
XHRを使用してGETリクエストを行う
const Http = new XMLHttpRequest();
const url='http://yourdomain.com/';
Http.open("GET", url);
Http.send();
Http.onreadystatechange=(e)=>{
console.log(Http.responseText)
}XHR を使用して送信リクエストを行う
var xhr = new XMLHttpRequest();
xhr.open("POST", '/submit', true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
// Request finished. Do processing here.
}
}
xhr.send("name=Ketan&id=1");2. フェッチAPI
Fetch APIは、サーバーからリソースを取得するためのXMLHttpRequestに代わる新しいAPIです。XMLHttpRequestとは異なり、より強力な機能セットと、より分かりやすい名前を備えています。また、Fetchは構文と構造により、柔軟で使いやすいという特徴も備えています。しかし、他のAJAX HTTPライブラリと一線を画すのは、すべての最新ウェブブラウザでサポートされている点です。Fetchはリクエスト・レスポンス方式を採用しており、リクエストを発行し、Responseオブジェクトに解決されるPromiseを返します。.
Fetch APIを使用する利点
- 柔軟で使いやすいです。
- コールバック地獄はPromiseによって回避される
- すべての最新ブラウザでサポートされています
- リクエスト・レスポンス方式を採用
Fetch API を使用する際のデメリット
- デフォルトでは Cookie を送信しません。
- CORS はデフォルトで無効になっています。
Fetch APIでGETリクエストを行う
fetch('https://www.yourdomain.com', {
method: 'get'
})
.then(response => response.json())
.then(jsonData => console.log(jsonData))
.catch(err => {
//error block
}Fetch APIでPOSTリクエストを行う
var url = 'https://www.yourdomain.com/updateProfile';
var data = {username: 'courseya'};
fetch(url, {
method: 'POST', // or 'PUT'
body: JSON.stringify(data), // data can be `string` or {object}!
headers:{
'Content-Type': 'application/json'
}
}).then(res => res.json())
.then(response => console.log('Success:', JSON.stringify(response)))
.catch(error => console.error('Error:', error));3. jQuery
jQueryは、クールで素晴らしいWebアプリケーションを作成できるクライアントサイドプログラミング言語です。無料でありながら高機能で、セットアップと習得も比較的簡単です。豊富なプラグインと拡張機能で、想像できるほぼすべてのことを実現できます。すぐに使い始めることができ、使いこなせるようになると、後々手放せなくなるでしょう。.
jQueryを使用する利点
- jQuery の最大の利点はそのシンプルさです。.
- jQuery ではユーザーがプラグインを追加できるため、非常に柔軟性も高くなります。.
- jQueryは、あなたの問題に対する非常に迅速な解決策でもあります。「より良い」解決策があるかもしれませんが、jQueryとその開発者はチームとして協力し、jQueryを迅速かつ効果的に実装できるようにすることで、コスト削減を実現します。.
- オープンソース ソフトウェアは、開発者が官僚的な手続きなしに可能な限り最高のサービスを提供できる急速な成長と自由を意味します。.
jQueryを使用する際のデメリット
- また、頻繁に更新されるため、コミュニティのメンバーが解決策を提供する可能性も低くなります。.
- 現在、jQuery にはさまざまなバージョンが存在し、バージョンによっては他のバージョンよりも互換性が低いものもあります。.
- jQueryはCSSに比べて遅い場合があります。クライアントサイドのインタラクションには適していないため、そのシンプルさが逆にデメリットになることもあります。.
jQueryでGETリクエストを行う
$.ajax({
url: '/users',
type: "GET",
dataType: "json",
success: function (data) {
console.log(data);
},
error: function (error) {
console.log(`Error ${error}`);
}
});JQueryでPOSTリクエストを送信する
$.ajax({
url: '/users',
type: "POST",
data: {
name: "Ipseeta",
id: 1
},
dataType: "json",
success: function (data) {
console.log(data);
},
error: function (error) {
console.log(`Error ${error}`);
}
});4. アクシオス
Axiosは、ブラウザとNode.js環境の両方で動作する、数あるPromiseベースのHTTPクライアントの1つです。基本的に、XMLHttpRequestとNode.jsのHTTPインターフェースを扱うための単一のAPIを提供します。さらに、新しいES6構文用のポリフィルを使用してリクエストを接続します。.
Axiosを使用するメリット
- すぐに使えるサポートをお約束
- XSRF に対する保護のためのクライアント側サポート
- リクエストや応答を実行する前に記録できます。.
- JSONデータの自動変換
- Promise APIをサポート
- リクエストを調整またはキャンセルできます
- 応答時間を調整できる
- Nodejsとブラウザの両方で動作します
AxiosでGETリクエストを行う
axios.get('/get-user', {
params: {
ID: 1
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})
.then(function () {
// always executed
});AxiosでPOSTリクエストを行う
axios.post('/user', {
name: 'Sanjeev',
id: 1
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});5. リクエスト
Requestライブラリは、HTTP呼び出しを行う最もシンプルな方法の一つです。構造と構文は、Node.jsでのリクエスト処理と非常に似ています。現在、このプロジェクトはGitHubで18,000個のスターを獲得しており、最も人気のあるHTTPライブラリの一つであるため、特筆に値します。.
構文
var request = require('request');
request('http://www.yourdomain.com', function (error, response, body) {
console.log('error:', error);
console.log('statusCode:', response && response.statusCode);
console.log('body:', body);
});6. スーパーエージェント
SuperAgentは、読みやすさと柔軟性を重視した軽量かつ高度なAJAXライブラリです。他のライブラリとは異なり、SuperAgentは学習曲線が緩やかです。SuperAgentは、GET、POST、PUT、DELETE、HEADなどのメソッドを受け入れるリクエストオブジェクトを備えています。.
SuperAgentのメリット
- プラグインベースの環境とエコシステムがあり、拡張機能を構築および開発して追加機能や追加機能を実現できます。.
- 簡単に調整可能
- HTTP リクエスト用の優れたインターフェース。.
- リクエストを送信するための複数の連鎖関数。.
- アップロードとダウンロードの進行状況をサポートする必要があります。.
- 断片化されたトランスポート暗号化をサポートしています。.
- 古いスタイルの通話がサポートされています。
- 多くの一般的な機能には多数のプラグインが利用可能です。
GETリクエストを行う
request
.get('/user')
.query({ id: 1 })
.then(res => {
});投稿リクエストをする
request.post('/user')
.set('Content-Type', 'application/json')
.send('{"name":"Ipseeta","id":1}')
.then(callback)
.catch(errorCallback)結果
選択は、プロジェクトの規模、想定されるユーザー層、そして採用方法によって異なります。正しい選択も間違った選択もありません。間違った要件に対して間違ったライブラリを選択した場合、この疑問に答えられるかもしれません。適切なツールを選びましょう。.
