ホームページ >ウェブフロントエンド >jsチュートリアル >jQuery ajaxについて - ajax()の使い方

jQuery ajaxについて - ajax()の使い方

jackloveオリジナル: 2018-05-04 14:14:301569ブラウズ

ajaxを学習すると、ajax()の使い方が問題になります。次に、ajax()の具体的な使い方を詳しく紹介します。

例

AJAX 経由でテキストをロードする:

jQuery コード:

$(document).ready(function(){
  $("#b01").click(function(){
  htmlobj=$.ajax({url:"/jquery/test1.txt",async:false});
  $("#myDiv").html(htmlobj.responseText);
  });
});

HTML コード:

<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button id="b01" type="button">Change Content</button>

定義と使用法

ajax() メソッドは、HTTP リクエストを介してリモートデータをロードします。

このメソッドは、jQuery の基礎となる AJAX 実装です。シンプルで使いやすい高レベルの実装については、$.get、$.post などを参照してください。 $.ajax() は、作成した XMLHttpRequest オブジェクトを返します。ほとんどの場合、柔軟性を高めるためにあまり使用されないオプションを操作する必要がない限り、この関数を直接操作する必要はありません。

最も単純なケースでは、$.ajax() をパラメーターなしで直接使用できます。

注: すべてのオプションは、$.ajaxSetup() 関数を通じてグローバルに設定できます。

構文

jQuery.ajax([settings])

パラメータ

説明

設定

オプション。 Ajax リクエストの構成に使用されるキーと値のペアのコレクション。

任意のオプションのデフォルト値は、$.ajaxSetup() を介して設定できます。

パラメータ

オプション

タイプ: オブジェクト

オプション。 AJAXリクエストの設定。すべてのオプションはオプションです。

async

タイプ: ブール

デフォルト値: true。デフォルトでは、すべてのリクエストは非同期です。同期リクエストを送信する必要がある場合は、このオプションを false に設定します。

同期リクエストはブラウザをロックするため、他のユーザー操作はリクエストが完了するまで待ってから実行する必要があることに注意してください。

beforeSend(XHR)

Type: Function

カスタム HTTP ヘッダーの追加など、リクエストを送信する前に XMLHttpRequest オブジェクトを変更できる関数。

XMLHttpRequest オブジェクトが唯一のパラメータです。

これは Ajax イベントです。 false が返された場合、この ajax リクエストはキャンセルできます。

cache

タイプ: Boolean

デフォルト値: true、dataType が script および jsonp の場合、デフォルトは false です。このページをキャッシュしない場合は false に設定します。

jQuery 1.2の新機能。

complete(XHR, TS)

タイプ: 関数

リクエスト完了後コールバック関数 (リクエストが成功または失敗した後に呼び出されます)。

パラメータ: XMLHttpRequest オブジェクトとリクエストタイプを説明する文字列。

これは Ajax イベントです。

contentType

タイプ: String

デフォルト値: "application/x-www-form-urlencoded"。サーバーに情報を送信するときのコンテンツのエンコードタイプ。

デフォルト値はほとんどの状況に適しています。 content-type を $.ajax() に明示的に渡すと、(送信するデータがない場合でも) 確実にサーバーに送信されます。

context

Type: Object

このオブジェクトは、Ajax 関連のコールバック関数のコンテキストを設定するために使用されます。つまり、コールバック関数の this がこのオブジェクトを指すようにします (このパラメーターが設定されていない場合、この AJAX リクエストを呼び出すときに渡されるオプションパラメーターを指します)。たとえば、コンテキストパラメーターとして DOM 要素を指定すると、成功コールバック関数のコンテキストがこの DOM 要素に設定されます。

次のように:

$.ajax({ url: "test.html", context: document.body, success: function(){
        $(this).addClass("done");
      }});

data

Type: String

サーバーに送信されたデータ。リクエスト文字列形式に自動的に変換されます。 GET リクエストの URL に追加されます。この自動変換を無効にするには、processData オプションの説明を参照してください。キー/値形式である必要があります。配列の場合、jQuery は異なる値に同じ名前を自動的に割り当てます。たとえば、{foo:["bar1", "bar2"]} は '&foo=bar1&foo=bar2' に変換されます。

dataFilter

Type: Function

Ajaxから返された元のデータを前処理するための関数。 data と type の 2 つのパラメータを指定します。data は Ajax によって返される元のデータで、type は jQuery.ajax を呼び出すときに提供される dataType パラメータです。関数によって返された値は、jQuery によってさらに処理されます。

dataType

Type: String

サーバーによって返されることが期待されるデータタイプ。指定しない場合、jQuery は HTTP パッケージの MIME 情報に基づいて自動的にインテリジェントな判断を行います。たとえば、XML の MIME タイプは XML として認識されます。 1.4 では、JSON が JavaScript オブジェクトを生成し、script がスクリプトを実行します。サーバーから返されたデータは、この値に基づいて解析され、コールバック関数に渡されます。使用可能な値:

"xml": jQuery で処理できる XML ドキュメントを返します。

"html": プレーンテキストの HTML 情報を返します。含まれている script タグは、DOM に挿入されると実行されます。

"script": プレーンテキストの JavaScript コードを返します。結果は自動的にキャッシュされません。「キャッシュ」パラメータが設定されていない限り。注: リモート要求 (同じドメインの下ではない) を行う場合、すべての POST 要求は GET 要求に変換されます。 (読み込みにDOMスクリプトタグを使用するため)

"json": JSONデータを返します。

「jsonp」: JSONP形式。「myurl?callback=?」などの JSONP 形式を使用して関数を呼び出す場合、jQuery はコールバック関数を実行するために ? を正しい関数名に自動的に置き換えます。

"text": プレーンテキスト文字列を返します

error

型: 関数

デフォルト値: 自動判定(xmlまたはhtml)この関数は、リクエストが失敗したときに呼び出されます。

には、XMLHttpRequest オブジェクト、エラーメッセージ、および (オプション) キャプチャされた例外オブジェクトの 3 つのパラメータがあります。

エラーが発生した場合、null を取得するだけでなく、エラーメッセージ (2 番目のパラメーター) が「timeout」、「error」、「notmodified」、「parsererror」になる場合もあります。

これは Ajax イベントです。

global

Type: Boolean

グローバル AJAX イベントをトリガーするかどうか。デフォルト値: true。 false に設定すると、さまざまな Ajax イベントの制御に使用できる ajaxStart や ajaxStop などのグローバル AJAX イベントはトリガーされません。

ifModified

Type: Boolean

サーバーのデータが変更された場合にのみ新しいデータを取得します。デフォルト値: false。 HTTP パケットの Last-Modified ヘッダー情報を使用して決定します。 jQuery 1.4 では、サーバー指定の「etag」もチェックして、データが変更されていないことを確認します。

jsonp

Type: String

jsonp リクエスト内のコールバック関数の名前をオーバーライドします。この値は、{jsonp:'onJsonPLoad'} などの GET または POST リクエストの URL パラメーターの「コールバック」部分を置き換えるために使用され、「onJsonPLoad=?」がサーバーに渡されます。

jsonpCallback

Type: String

jsonpリクエストのコールバック関数名を指定します。この値は、jQuery によって自動的に生成されるランダムな関数名の代わりに使用されます。これは主に、jQuery が一意の関数名を生成できるようにするために使用され、リクエストの管理やコールバック関数とエラー処理の提供を容易にします。ブラウザで GET リクエストをキャッシュする場合は、このコールバック関数名を指定することもできます。

password

Type: String

HTTP アクセス認証リクエストに応答するために使用されるパスワード

processData

Type: Boolean

デフォルト値: true。デフォルトでは、data オプションを通じて渡されたデータは、それがオブジェクトである場合 (技術的に言えば、文字列でない限り)、デフォルトのコンテンツタイプ「application/x」に一致するように処理され、クエリ文字列に変換されます。 -www-form-urlencoded" "。 DOM ツリー情報または変換したくないその他の情報を送信する場合は、false に設定します。

scriptCharset

Type: String

要求されたときの dataType が「jsonp」または「script」で、タイプが「GET」の場合にのみ、強制的に文字セットを変更するために使用されます。通常、ローカルとリモートのコンテンツのエンコーディングが異なる場合にのみ使用されます。

success

Type: Function

リクエストが成功した後のコールバック関数。

パラメータ: サーバーから返され、dataType パラメータに従って処理されたデータ。ステータスを説明する文字列。

これは Ajax イベントです。

traditional

型: Boolean

従来の方法でデータをシリアル化する場合は、true に設定します。「ツール」カテゴリの「jQuery.param」メソッドを参照してください。

timeout

Type: Number

リクエストのタイムアウト (ミリ秒) を設定します。この設定はグローバル設定をオーバーライドします。

type

タイプ: String

デフォルト値: "GET")。リクエストメソッド (「POST」または「GET」)、デフォルトは「GET」です。注: PUT や DELETE などの他の HTTP リクエストメソッドも使用できますが、一部のブラウザでのみサポートされます。

url

タイプ: String

デフォルト値: 現在のページのアドレス。リクエストの送信先のアドレス。

username

Type: String

HTTP アクセス認証リクエストに応答するために使用されるユーザー名。

xhr

Type: Function

は、XMLHttpRequest オブジェクトを返す必要があります。デフォルトは、IE の場合は ActiveXObject、それ以外の場合は XMLHttpRequest です。拡張された XMLHttpRequest オブジェクトをオーバーライドまたは提供するために使用されます。このパラメーターは、jQuery 1.3 より前では使用できませんでした。

コールバック関数

$.ajax() で取得したデータを処理したい場合は、コールバック関数 (beforeSend、error、dataFilter、success、complete) を使用する必要があります。

beforeSend

はリクエストを送信する前に呼び出され、XMLHttpRequest をパラメータとして渡します。

error

は、リクエストエラーが発生したときに呼び出されます。 XMLHttpRequest オブジェクト、エラーの種類を説明する文字列、および例外オブジェクト (存在する場合) を渡すと、リクエストが成功した後に

dataFilter

が呼び出されます。返されたデータと「dataType」パラメーターの値を渡します。そして、成功コールバック関数に渡された新しいデータ (おそらく処理された) を返さなければなりません。

成功

リクエスト後に呼び出されました。返されたデータと成功コードを含む文字列を渡します。

complete

この関数は、成功または失敗に関係なく、リクエストが完了すると呼び出されます。 XMLHttpRequest オブジェクトと、成功コードまたはエラーコードを含む文字列を渡します。

データ型

$.ajax() 関数は、サーバーから提供される情報に依存して、返されたデータを処理します。返されたデータが XML であるとサーバーが報告した場合、返された結果は、通常の XML メソッドまたは jQuery セレクターを使用して反復できます。 HTML などの他のタイプが表示された場合、データはテキストとして扱われます。

dataType オプションを使用して、他の異なるデータ処理方法を指定することもできます。単純な XML に加えて、html、json、jsonp、スクリプト、またはテキストも指定できます。

このうち、テキスト型とxml型で返されるデータは処理されません。データは、XMLHttpRequest の responseText 属性または responseHTML 属性を成功コールバック関数に渡すだけです。

注: Web サーバーによって報告された MIME タイプが、選択した dataType と一致することを確認する必要があります。たとえば、XML の場合、サーバーは一貫した結果を得るために text/xml または application/xml を宣言する必要があります。

html タイプとして指定した場合、HTML が文字列として返される前に、埋め込まれた JavaScript が実行されます。同様に、スクリプトの種類を指定した場合は、サーバー側で生成された JavaScript が最初に実行され、その後スクリプトがテキストデータとして返されます。

json型で指定した場合、取得したデータをJavaScriptオブジェクトとして解析し、構築したオブジェクトを結果として返します。これを実現するために、最初に JSON.parse() の使用を試みます。ブラウザがサポートしていない場合は、関数を使用してビルドされます。

JSON データは、JavaScript を通じて簡単に解析できる構造化データの一種です。取得したデータファイルがリモートサーバーに保存されている場合 (ドメイン名が異なる場合、つまりクロスドメインデータ取得)、jsonp タイプを使用する必要があります。このタイプを使用すると、リクエストされた URL に追加されるクエリ文字列パラメータ callback=? が作成されます。有効な JSONP リクエストを完了するには、サーバーは JSON データの前にコールバック関数名を追加する必要があります。コールバック関数のパラメータ名を指定してデフォルトのコールバックを置き換える場合は、$.ajax() の jsonp パラメータを設定できます。注: JSONP は JSON 形式の拡張です。クエリ文字列パラメーターを検出して処理するには、サーバー側のコードが必要です。

script または jsonp タイプが指定されている場合、サーバーからデータを受信すると、実際には XMLHttpRequest オブジェクトの代わりに 3f1c4e4b6b16bbbd69b2ee476dc4f83a タグが使用されます。この場合、$.ajax() は XMLHttpRequest オブジェクトを返さなくなり、beforeSend などの

イベント処理

関数は渡されません。サーバーへのデータの送信

デフォルトでは、Ajax リクエストは GET メソッドを使用します。 POST メソッドを使用する場合は、type パラメーターの値を設定できます。このオプションは、データオプションのコンテンツがサーバーに送信される方法にも影響します。

data オプションには、 key1=value1&key2=value2 などのクエリ文字列、または {key1: 'value1', key2: 'value2'} などのマッピングを含めることができます。後者の形式が使用される場合、データ再送信者はクエリ文字列に変換されます。この処理は、processData オプションを false に設定することによって回避することもできます。これは、XML オブジェクトをサーバーに送信する場合には適切ではない可能性があります。この場合、contentType オプションの値も変更して、デフォルトの application/x-www-form-urlencoded を他の適切な MIME タイプに置き換える必要があります。

高度なオプション

グローバルオプションは、.ajaxSend や ajaxError などの登録されたコールバック関数や同様のメソッドに応答しないようにするために使用されます。これは、送信されるリクエストが非常に頻繁で短い場合など、場合によっては便利ですが、これは ajaxSend で無効にできます。

サーバーで HTTP 認証が必要な場合は、ユーザー名とパスワードのオプションを使用してユーザー名とパスワードを設定できます。

Ajax リクエストは時間制限があるため、エラー警告を使用して、キャプチャされて処理された後のユーザーエクスペリエンスを向上させることができます。リクエストのタイムアウトパラメータは通常、デフォルト値のままであるか、jQuery.ajaxSetup を通じてグローバルに設定されます。タイムアウトオプションが特定のリクエストに対してリセットされることはほとんどありません。

デフォルトでは、リクエストは常に送信されますが、ブラウザはキャッシュからデータを取得する場合があります。キャッシュされた結果の使用を無効にするには、cache パラメーターを false に設定します。最後のリクエスト以降データが変更されていない場合にエラーを報告したい場合は、ifModified を true に設定します。

scriptCharset を使用すると、スクリプトまたは jsonp のようなデータに使用される、3f1c4e4b6b16bbbd69b2ee476dc4f83a タグを含むリクエストに特定の文字セットを設定できます。これは、スクリプトとページの文字セットが異なる場合に特に便利です。

Ajax の最初の文字は非同期の最初の文字であり、すべての操作が並列であり、完了の順序に関係がないことを意味します。 $.ajax() の async パラメータは常に true に設定されます。これは、リクエストの開始後も他のコードを実行できることを示します。このオプションを false に設定することは強くお勧めしません。これは、すべてのリクエストが非同期ではなくなることを意味し、ブラウザがロックアップする原因にもなります。

$.ajax 関数は、作成した XMLHttpRequest オブジェクトを返します。通常、jQuery はこのオブジェクトを内部的に処理して作成するだけですが、ユーザーは xhr オプションを介して自分で作成した xhr オブジェクトを渡すこともできます。返されたオブジェクトは通常破棄されますが、リクエストを監視および操作するための低レベルのインターフェイスを提供します。たとえば、オブジェクトに対して .abort() を呼び出すと、リクエストが完了する前に中断される可能性があります。

この記事では、ajax() の使用法と関連知識について詳しく説明します。ajax の知識をさらに学びたい場合は、php 中国語 Web サイトに注目してください。

jQuery ajaxについて - ajax()の使い方

関連記事