ホームページ > ウェブフロントエンド > jsチュートリアル > jqueryでajaxリクエストを実装する方法を詳しく解説

jqueryでajaxリクエストを実装する方法を詳しく解説

伊谢尔伦
リリース: 2017-06-19 09:38:08
オリジナル
1506 人が閲覧しました

Ajaxリクエスト

jQuery.ajax(オプション)

HTTPリクエスト経由でリモートデータを読み込みます。 jQuery の基礎となる AJAX 実装。シンプルで使いやすい高レベルの実装については、.get、.post などを参照してください。

.ajax() は、作成した XMLHttpRequest オブジェクトを返します。ほとんどの場合、このオブジェクトを直接操作する必要はありませんが、特殊な場合には、リクエストを手動で終了するために使用できます。 .ajax() にはパラメーターが 1 つだけあります: パラメーター キー/値オブジェクト (各設定と コールバック関数 情報を含む)。以下の詳細なパラメータ オプションを参照してください。

注: dataType オプションを指定する場合は、サーバーが正しい MIME 情報を返すことを確認してください (例: xml は「text/xml」を返します)。 MIME タイプが正しくないと、予期しないエラーが発生する可能性があります。

注: dataType が「script」に設定されている場合、リモートリクエスト中 (同じドメインの下ではない)、すべての POST リクエストは GET リクエストに変換されます。 (DOMスクリプトタグを使用してロードするため)

jQuery 1.2では、ドメインを越えてJSONデータをロードすることができます。それを使用する場合、データ型をJSONPに設定する必要があります。 「myurl?callback=?」などの JSONP 形式を使用して関数を呼び出す場合、jQuery はコールバック関数を実行するために ? を正しい関数名に自動的に置き換えます。データ型が「jsonp」に設定されている場合、jQuery は自動的にコールバック関数を呼び出します。

戻り値 XMLHttpRequest

Parameters

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

オプション

(1)、async (ブール値): (デフォルト: true)
デフォルト設定では、すべてのリクエストは非同期リクエストです。同期リクエストを送信する必要がある場合は、このオプションを false に設定します。同期リクエストはブラウザをロックするため、ユーザーはリクエストが完了するまで他の操作を実行する必要があることに注意してください。

(2) beforeSend (関数): カスタム HTTP ヘッダーの追加など、リクエストを送信する前に XMLHttpRequest オブジェクトを変更できる関数。
XMLHttpRequest オブジェクトが唯一のパラメータです。これは Ajax イベントです。 false が返された場合、この ajax リクエストはキャンセルできます。

(3)、キャッシュ (ブール値): (デフォルト: true、dataType が script の場合、デフォルトは false)
jQuery 1.2 の新機能、false に設定すると、ブラウザーのキャッシュから リクエスト情報 が読み込まれません。

(4)、complete (関数): リクエスト完了後のコールバック関数 (リクエストが成功または失敗したときに呼び出されます)。
パラメータ: XMLHttpRequest オブジェクトと成功したリクエストの種類を説明する文字列。 これは Ajax イベントです

(5)、contentType (String): (デフォルト: "application/x-www-form-urlencoded") サーバーに情報を送信するときのコンテンツ エンコード タイプ。デフォルト値はほとんどのアプリケーションに適しています。

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

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

(8)、dataType (String): (デフォルト値: xml または html をインテリジェントに決定)
サーバーによって返されることが予期されるデータ型。指定しない場合、jQuery は HTTP パケットの MIME 情報に基づいて responseXML または responseText を自動的に返し、それをコールバック 関数パラメーター として渡します。 使用可能な値:

"xml": jQuery で処理できる XML ドキュメントを返します。
"html": プレーンテキストの HTML 情報を返します。含まれているスクリプト タグは、DOM に挿入されると実行されます。
"script": プレーンテキストの JavaScript コードを返します。結果は自動的にキャッシュされません。 「キャッシュ」パラメータが設定されていない限り。注: リモート要求 (同じドメインの下ではない) を行う場合、すべての POST 要求は GET 要求に変換されます。 (読み込みにDOMスクリプトタグを使用するため)
"json": JSONデータを返します。
「jsonp」: JSONP形式。 「myurl?callback=?」などの JSONP 形式を使用して関数を呼び出す場合、jQuery はコールバック関数を実行するために ? を正しい関数名に自動的に置き換えます。
"text": プレーンテキスト文字列を返します

(9)、error(関数): (デフォルト:自動判定(xml or html)) リクエストが失敗した場合に呼び出すタイミング。 XMLHttpRequest オブジェクト、エラー メッセージ、および (オプション) キャプチャされたエラー オブジェクトの 3 つのパラメーターがあります。エラーが発生した場合、エラー メッセージ (2 番目のパラメーター) には、null に加えて、「timeout」、「error」、「notmodified」、および「parsererror」が含まれる場合があります。アヤックスのイベント。

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

(11)、ifModified (ブール値): (デフォルト: false) サーバーのデータが変更された場合にのみ新しいデータを取得します。 HTTP パケットの Last-Modified ヘッダー情報を使用して決定します。

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

(13)、password (文字列): HTTP アクセス認証リクエストに応答するために使用されるパスワード

(14)、processData (Boolean): (デフォルト: true) デフォルトでは、送信されたデータはオブジェクト (テクノロジー) に変換されます。 (文字列ではなく) デフォルトのコンテンツ タイプ「application/x-www-form-urlencoded」と一致します。 DOM ツリー情報または変換したくないその他の情報を送信する場合は、false に設定します。

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

(16)、success (関数): リクエストが成功した後のコールバック関数。パラメータ: サーバーから返され、dataType パラメータに従って処理されたデータ。ステータスを説明する文字列。アヤックスのイベント。

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

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

(19)、url (文字列): (デフォルト: 現在のページのアドレス) リクエストを送信するアドレス。

(20)、username (文字列): HTTP アクセス認証リクエストに応答するために使用されるユーザー名

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

jQuery.ajax() メソッドを使用してデータを取得します。コードは次のとおりです:

$.ajax({
 url: "http://www.php.cn", //请求的url地址
 dataType: "json", //返回格式为json
 async: true, //请求是否异步,默认为异步,这也是ajax重要特性
 data: { "id": "value" }, //参数值
 type: "GET", //请求方式
 beforeSend: function() {
  //请求前的处理
 },
 success: function(req) {
  //请求成功时处理
 },
 complete: function() {
  //请求完成的处理
 },
 error: function() {
  //请求出错处理
 }
});
ログイン後にコピー

以上がjqueryでajaxリクエストを実装する方法を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート