Jquery-ajax-jquery-ajax
jQuery-jQuery.ajax(options)メソッド
説明
- jQuery.ajax(options)*メソッドは、HTTPリクエストを使用してリモートページをロードします。
$ .ajax()は、作成したXMLHttpRequestを返します。 ほとんどの場合、そのオブジェクトを直接操作する必要はありませんが、手動でリクエストを中止する必要がある場合に利用できます。
構文
このメソッドを使用するための簡単な構文は次のとおりです-
$.ajax( options )
パラメーター
これは、この方法で使用されるすべてのパラメータの説明です-
- options -Ajaxリクエストを設定するキー/値のペアのセット。 すべてのオプションはオプションです。
Sr.No. | Option & Description |
---|---|
1 |
async リクエストを非同期に実行するかどうかを示すブール。 デフォルト値はtrueです。 |
2 |
beforeSend 要求が送信される前に実行されるコールバック関数。 |
3 |
complete 要求が終了するたびに実行されるコールバック関数。 |
4 |
contentType リクエストに設定するMIMEコンテンツタイプを含む文字列。 デフォルト値はapplication/x-www-form-urlencodedです。 |
5 |
data リクエストとともにサーバーに送信されるマップまたは文字列。 |
6 |
dataFilter XMLHttpRequestの生の応答データを処理するために使用される関数。 これは、応答をサニタイズするための事前フィルタリング機能です。 |
7 |
dataType サーバーから返されるデータのタイプを定義する文字列(xml、html、json、またはスクリプト)。 |
8 |
error 要求が失敗した場合に実行されるコールバック関数。 |
9 |
global このリクエストによってグローバルAJAXイベントハンドラーがトリガーされるかどうかを示すブール値。 デフォルト値はtrueです。 |
10 |
ifModified サーバーがリクエストに応答する前にページが変更されているかどうかを確認するかどうかを示すブール値。 |
11 |
jsonp jsonpリクエストのコールバック関数名をオーバーライドします。 |
12 |
password HTTPアクセス認証要求への応答で使用されるパスワード。 |
13 |
processData 送信されたデータをオブジェクト形式からクエリ文字列形式に変換するかどうかを示すブール値。 デフォルト値はtrueです。 |
14 |
success 要求が成功した場合に実行されるコールバック関数。 |
15 |
timeout リクエストが失敗するとタイムアウトするまでのミリ秒数。 |
16 |
timeout 要求のローカルタイムアウト(ミリ秒単位)を設定します。 |
17 |
type 要求に使用するHTTPメソッドを定義する文字列(GETまたはPOST)。 デフォルト値はGETです。 |
18 |
url リクエストの送信先のURLを含む文字列。 |
19 |
username HTTPアクセス認証要求への応答で使用されるユーザー名。 |
20 |
xhr XMLHttpRequestオブジェクトを作成するためのコールバック。 利用可能な場合はデフォルトのActiveXObject(IE)、それ以外の場合はXMLHttpRequest。 |
例
結果ファイルに次のHTMLコンテンツがあると仮定します-
<h1>THIS IS RESULT...</h1>
以下は、このメソッドの使用方法を示す簡単な例です。 ここでは、_success_ハンドラを使用して、返されたHTMLを設定します-
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("#driver").click(function(event){
$.ajax( {
url:'resultl',
success:function(data) {
$('#stage')l(data);
}
});
});
});
</script>
</head>
<body>
<p>Click on the button to load resultl file:</p>
<div id = "stage" style = "background-color:blue;">
STAGE
</div>
<input type = "button" id = "driver" value = "Load Data"/>
</body>
</html>
これにより、次の結果が生成されます–