jQuery の AJAX POST リクエスト

今日の記事では、jQuery での AJAX POST リクエストについて説明します。

jQuery での AJAX POST リクエスト

jQuery の AJAX POST リクエストは、非同期 HTTP（AJAX）リクエストを実行します。

構文：

jQuery.ajax(url[, settings])
jQuery.ajax([settings])

1. URL は、リクエストの送信先となる URL を含む文字列です。
2. settings は、AJAX 要求を構成するキー/値のペアオブジェクトです。すべての設定はオプションです。 $.ajaxSetup() を使用して、オプションごとにデフォルト値を設定できます。

$.ajax() 関数は、jQuery を介してディスパッチされたすべての AJAX 要求の基礎になります。 $.Get() や .load() などの多数の高レベルのオプションが利用可能であり、適用が簡単であるため、この特性を一度に呼び出すことはしばしば無意味です。

$.ajax() をより柔軟に使用できますが、それよりはるかに少ない場合は、ありふれたオプションが必要です。

jQuery 1.5 の時点で $.ajax() を介して返される jQuery XMLHttpRequest（jqXHR）オブジェクトは、ブラウザローカルの XMLHttpRequest 要素のスーパーセットです。たとえば、responseText と responseXML の家、および getResponseHeader() テクニックが含まれています。

配信メカニズムは XMLHttpRequest（たとえば、JSONP リクエストのスクリプトタグ）とは別のものですが、jqXHR アイテムは、可能な場合はネイティブ XHR 機能をシミュレートします。

jQuery 1.5.1 の時点で、jqXHR オブジェクトはさらに overrideMimeType() メソッドを実行します（jQuery 1.4.X でも同様に変更されましたが、jQuery 1.5 では一時的に削除されました）。たとえば、overrideMimeType() テクニックを beforeSend() コールバック関数内で使用して、応答の Content-Type ヘッダーを変更できます。

$.Ajax() 呼び出しに対する個別の応答は、成功ハンドラーに渡される前に、特定のタイプの前処理を受けます。使用可能な情報の種類は、text、HTML、XML、JSON、JSONP、および script です。

data オプションは、key1=value1&key2=value2 形式のクエリストリングか、 {key1: 'value1', key2: 'value2'} 形式のオブジェクトを送信することができる。

ブラウザの安全上の制限により、ほとんどの AJAX リクエストは同じ発信元のカバレッジの対象となります。リクエストは、別のドメイン、サブドメイン、ポート、またはプロトコルからファクトを効果的に取得できません。

詳細については、.ajax() のドキュメントをご覧ください。

次の例でそれを理解しましょう。次のコードはそのままでは実行できず、出力されません。

出力を表示するには、既存のコードに追加する必要があります。

<form id="myForm">
    <label for="name">Name</label>
    <input id="name" name="name" type="text" value="Smith" />
    <input type="submit" value="Send" />
</form>

$('#myForm').submit(function(event) {
  event.preventDefault();
  $.ajax({
     method: 'POST',
     url: '/open/hello-world',
     data: {name: 'Smith', location: 'Doe'}
   }).done(function(msg) {
    alert('Data Saved: ' + msg);
  });
})

上記の例でユーザーがフォームを送信すると、指定された URL とパラメーターを使用して AJAX 呼び出しがサーバーに送信されます。サーバーが成功したメッセージで戻ってきたら、コンソールにメッセージを印刷するか、適切なメッセージでユーザーに通知することができます。