この記事では、誰もがより明確に学習できるように、主に 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リクエストのコールバック関数名を指定します。この値は、jQuery によって自動的に生成されるランダムな関数名の代わりに使用されます。これは主に、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) を使用する必要があります。
はリクエストを送信する前に呼び出され、XMLHttpRequest をパラメータとして渡します。
は、リクエストエラーが発生したときに呼び出されます。 XMLHttpRequest オブジェクト、エラーの種類を説明する文字列、および例外オブジェクト (存在する場合) を渡すと、リクエストが成功した後に
が呼び出されます。返されたデータと「dataType」パラメーターの値を渡します。そして、成功コールバック関数に渡された新しいデータ (おそらく処理された) を返さなければなりません。
リクエスト後に呼び出されました。返されたデータと成功コードを含む文字列を渡します。
この関数は、成功または失敗に関係なく、リクエストが完了すると呼び出されます。 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 オブジェクトの代わりに
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
