ajax の基本的な構文は何ですか? Ajax 構文の詳細

この記事では、誰もがより明確に学習できるように、主に ajax の基本的な文法構造について例を挙げて説明します。今すぐこの記事を見てみましょう

コード テンプレート:

$.ajax({
             type: "POST",
             url: "/login",
             contentType: 'application/x-www-form-urlencoded;charset=utf-8',
             data: {username:$("#username").val(), password:$("#password").val()},
             dataType: "json",
             success: function(data){
                         console.log(data);
                      }，
             error:function(e){
                         console.log(e);
             }
         })

パラメータ

• オプション

• タイプ: オブジェクト

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

• async

• タイプ: Boolean

  デフォルト値: 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)

• Type: Function

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

  パラメータ: 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");
        }});

(さらに詳しく知りたい場合は、PHP 中国語 Web サイトAJAX 開発マニュアル 列にアクセスして学習してください)

• 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 情報を返します。含まれているスクリプト タグは、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リクエストのコールバック関数名を指定します。この値は、j​​Query によって自動的に生成されるランダムな関数名の代わりに使用されます。これは主に、jQuery が一意の関数名を生成できるようにして、リクエストの管理やコールバック関数とエラー処理の提供を容易にするために使用されます。ブラウザで GET リクエストをキャッシュする場合は、このコールバック関数名を指定することもできます。

• password

• タイプ: String

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

• processData

• タイプ: 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

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

• タイプ

• タイプ: 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() を呼び出すと、リクエストが完了する前に中断される可能性があります。

この記事はここで終わります (さらに詳しく知りたい場合は、PHP 中国語 Web サイトAJAX ユーザー マニュアル の列にアクセスして学習してください)。ご質問がある場合は、以下にメッセージを残してください。

以上がajax の基本的な構文は何ですか? Ajax 構文の詳細の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。