AJAX の簡単な紹介:
AJAX は、Asynchronous JavaScript And XML (Asynchronous JavaScript And XML) を指し、インタラクティブな Web アプリケーションを作成するための Web 開発テクノロジを指します。 AJAX を使用すると、JavaScript の XMLHttpRequest オブジェクトを使用して、JavaScript がサーバーと直接通信できるようになります。このオブジェクトにより、JavaScript はページをリロードせずに Web サーバーとデータを交換できるようになります。
jQuery は JavaScript フレームワークであり、理解しやすい JavaScript の軽量カプセル化です。
Ajax は、XML JavaScript と組み合わせた非同期リクエスト テクノロジであり、動的更新を実現できます。
ajax準備:
1.jqueryダウンロード:
公式サイトの最新ダウンロードアドレス: http://blog.jquery.com/2011/09/01/jquery- 1- 6-3-リリース/
ダウンロード時に jQuery 1.6.3 Minified または jQuery 1.6.3 Uncompressed を選択し、右クリックして「Thunder を使用してダウンロード」を選択します
2. 主な知識の紹介
2.1. Ajax 非同期送信手順:
1. dom を使用してテキスト ボックスの属性の値を取得します
document.getElementById("id name").value
2. XMLHttpRequest オブジェクトを作成します
ブラウザ上には XMLHttpRequest、ActiveXObject の 2 種類のオブジェクトがあります
3. コールバック関数の登録 コールバック関数を登録するときは、関数名のみが必要です。括弧は追加しないでください
コールバック関数を登録するときに、返されたデータ
1 番目の方法: クライアントから出力されたプレーン テキスト データをサーバーから取得します。
2 番目の方法: responseXML を使用して XML データ オブジェクトの DOM オブジェクトを受け取ります。
4.接続情報
5. データを送信し、サーバーとの対話を開始します
Post メソッド/get メソッド
2.2.ajax メイン メソッド:
(1).getElementById("id 属性値") ):
指定された id 属性値に従ってオブジェクトを取得します
(2 ).getElementsByTagName(tagname):
HTML ドキュメント全体で任意の HTML 要素を検索し、指定された要素を持つ要素のコレクションを返します名前
(3). セレクター:
セレクターには、基本セレクター、階層選択セレクター、属性セレクターなどが含まれます。このプログラムには、次のような基本的なセレクター #id のみがあります。
$("#myDiv"): ID「myDiv」を持つ要素を検索します。
2.3.XMLHttpRequest オブジェクト:
XMLHttpRequest は、次のような関数を提供します。ページのリロード ページがロードされると、Web ページが更新され、ページがロードされた後にクライアントがサーバーにデータを要求し、ページがロードされた後にサーバーがデータを受信し、バックグラウンドでクライアントにデータを送信します。
2.3.1. メソッド:
(1)overrideMimeType("text/html"):
サーバーに送信されるヘッダーをオーバーライドし、text/xml を MIME タイプとして強制します
(2) ) open(method, url, async, username,password):
URL や HTTP メソッドなどの HTTP リクエスト パラメーターを初期化しますが、リクエストは送信しません。
method パラメータはリクエストに使用される HTTP メソッド (GET、POST、HEAD など)、
url パラメータはリクエストの本文です。
async パラメータはリクエストが同期か非同期かを示します。誤ったリクエストは同期です。 、本当のリクエストは次のとおりです。 非同期の
ユーザー名とパスワードのパラメーターはオプションであり、URL で必要な承認の認証資格を提供します。指定すると、URL 自体で指定された修飾がオーバーライドされます。
(3)send(body):
open() メソッドに渡されるパラメータと、メソッド
send(body) に渡されるオプションのリクエスト本文を使用して、HTTP リクエストを送信します。open を呼び出す場合() ) 指定された HTTP メソッドは POST または PUT で、body パラメーターはリクエストの本文を文字列または Document オブジェクトとして指定します。リクエストボディが必要ない場合、このパラメータは null になります。
以前に呼び出された open() の async パラメータが false の場合、このメソッドはブロックされ、readyState が 4 になり、サーバーの応答が完全に受信されるまで戻りません。
async パラメータが true の場合、またはこのパラメータが省略された場合、send() はすぐに戻り、後述するように、サーバーの応答はバックグラウンド スレッドで処理されます。
(4)setRequestHeader(name, value):
開いているが送信されていないリクエストに HTTP リクエストを設定または追加します。
name パラメータは、設定するヘッダーの名前です。このパラメータには空白、コロン、改行を含めないでください。
value パラメータはヘッダーの値です。このパラメータには改行を含めることはできません
2.3.2. 属性:
(1)onreadystatechange:
readyState 属性が変更されるたびに呼び出されるイベント ハンドラー関数。また、readyState が 3 の場合、複数回呼び出される場合もあります。
(2)readyState:
XMLHttpRequest が最初に作成されたとき、この属性の値は 0 から始まり、完全な HTTP 応答が受信されるまで 4 まで増加します。
5 つの状態には、それぞれ非公式の名前が関連付けられています。次の表に、状態、名前、および意味を示します。
readyState の値は、リクエストの処理中以外はデクリメントされません。または、プロセス中に open() メソッドが呼び出されます。このプロパティの値が増加するたびに、onreadystatechange イベント ハンドラーがトリガーされます。
(3)status:
サーバーから返された HTTP ステータス コード (成功の場合は 200、「見つかりません」エラーの場合は 404 など)。 readyState が 3 未満のときにこのプロパティを読み取ると、例外が発生します。
(4)responseText:
これまでにサーバーから受信した応答本文 (ヘッダーを除く)、またはまだデータを受信していない場合は空の文字列。
readyState が 3 未満の場合、このプロパティは空の文字列です。このプロパティは、readyState が 3 の場合、それまでに受信した応答部分を返します。 readyState が 4 の場合、このプロパティは完全な応答本文を保持します。
応答に応答本文の文字エンコーディングを指定するヘッダーが含まれている場合は、そのエンコーディングを使用します。それ以外の場合は、Unicode UTF-8 が想定されます。
(5)responseXML: リクエストに対する応答。XML に解析され、Document オブジェクトとして返されます。
コード例:
注: この例はフロントエンドで構成されています。バックエンドはサーブレット実装を使用しますが、データベースにアクセスしてデータを検証しません。フロントデスクはhtmlとjavascriptで構成されており、jqueryでカプセル化されたajaxを使用する方法と、XMLHttpRequestオブジェクトを使用する方法があります。 2 つの検証方法の違いは、JavaScript スクリプトが異なるだけで、フロント ページとバックグラウンド サーブレットは同じです。
フロントエンド ajax.html