私が挙げた例は、企業ユーザーが登録する際に、ユーザー名と企業名が利用可能かどうかを確認するアプリケーションです。以前は、その横にボタンを追加し、「確認」をクリックしてリクエストを送信していました。サーバーに送信し、待機します...サーバーが情報を返し、操作を続行します。
AJAX テクノロジーを使用して上記の操作を実装すると、ユーザーがユーザー名または会社名を入力したときに、入力テキスト ボックスがフォーカスを失ったときに、サーバーからの情報が返されるのを待つ必要がなくなり、リクエストが自動的に送信されます。サーバーにアクセスし、ユーザーは引き続き次の操作を実行します。「チェック」をクリックしたり、サーバーから情報が返されるのを待つ必要はありません。チェックとユーザーの操作は非同期であり、同時に実行できます。サーバー情報が返されると、ページを更新せずに、返された情報がページ上の対応する位置に自動的に表示されます。これは、部分更新効果と同等です。 以下のコードを見てみましょう。
HTML ページの完全なコードは次のとおりです。
以下は引用部分です。
1＜ %@page language="java" contentType="text/html;charset=GBK"%＞
2＜スクリプト言語="javascript" タイプ="text/javascript">
3＜!--
4/**//**Alpha 2005-12-31 によって開始された Ajax*/
5
6 var http = getHTTPObject();
7
8 関数 handleHttpResponse(){
9 if(http.readyState == 4){
10 if(http.status == 200){
11 var xmlDocument = http.responseXML;
12 if(http.responseText!=""){
13 document.getElementById("showStr").style.display = "";
14 document.getElementById("userName").style.background= "#FF0000";
15 document.getElementById("showStr").innerText = http.responseText;
16 }その他{
17 document.getElementById("userName").style.background= "#FFFFFF";
18 document.getElementById("showStr").style.display = "none";
19}
20
21 }
22 その他{
23alert("あなたが要求したページは異常であり、このページの情報の閲覧に影響を与える可能性があります!");
24 アラート(http.status);
25}
26}
27}
28
29 関数ハンドルHttpResponse1(){
30 if(http.readyState == 4){
31 if(http.status == 200){
32 var xmlDocument = http.responseXML;
33 if(http.responseText!=""){
34 document.getElementById("comNmStr").style.display = "";
35 document.getElementById("comNm").style.background= "#FF0000";
36 document.getElementById("comNmStr").innerText = http.responseText;
37 }その他{
38 document.getElementById("comNm").style.background= "#FFFFFF";
39 document.getElementById("comNmStr").style.display = "none";
40}
41
42 }
43 その他{
44alert("あなたが要求したページは異常であり、このページの情報の閲覧に影響を与える可能性があります!");
45 アラート(http.status);
46 }
47 }
48 }
49
50 関数chkUser(){
51 var url = "/chkUserAndCom";
52 var name = document.getElementById("userName").value;
53 URL += ("&userName="+name+"&oprate=chkUser");
54 http.open("GET",url,true);
55 http.onreadystatechange = handleHttpResponse;
56 http.send(null);
57 戻ります。
58 }
59 関数chkComNm(){
60 var url = "/chkUserAndCom";
61 var name = document.getElementById("comNm").value;
62 URL += ("&comName="+name+"&oprate=chkCom");
63 http.open("GET",url,true);
64 http.onreadystatechange = handleHttpResponse1;
65 http.send(null);
66 リターン。
67 }
68
69 //この関数は必要な XMLHttpRequest オブジェクトを作成できます
70 関数 getHTTPObject(){
71 var xmlhttp = false;
72 if(window.XMLHttpRequest){
73 xmlhttp = 新しい XMLHttpRequest();
74 if(xmlhttp.overrideMimeType){
75 xmlhttp.overrideMimeType('text/xml');
76 }
77 }
78 その他{
79 試してください{
80 xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
81 }キャッチ(e){
82 トライ{
83 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
84 }キャッチ(E){
85 xmlhttp = false;
86}
87 }
88}
89 XMLhttp を返します。
90}
91/**//**Ajax が終了します*/
92
93//検出フォーム
94関数chkpassword()
95{
96 var m=ドキュメント.フォーム1;
97 if(len(m.パスワード値) ＞ 20 || len(m.パスワード値) ＜ 5 || !isStr(m.パスワード値))
98 {
99 document.getElementById("passwordStr").style.display = "";
100 document.getElementById("パスワード").style.background= "#FF0000";
101 document.getElementById("passwordStr").innerText = "申し訳ありませんが、パスワードは英字、数字、またはアンダースコアでなければならず、長さは 5 ～ 20 です!";
102 }
103 その他
104 {
105 document.getElementById("パスワード").style.background= "#FFFFFF";
106 document.getElementById("passwordStr").style.display = "none";
107 }
108}
109
110関数chkconfirmPassword()
111{
112 var m=ドキュメント.フォーム1;
113 if (m.password.value != m.confirmPassword.value)
114 {
115 document.getElementById("confirmPasswordStr").style.display = "";
116 document.getElementById("confirmPassword").style.background= "#FF0000";
117 document.getElementById("confirmPasswordStr").innerText = "申し訳ありませんが、パスワードは繰り返されたパスワードと一致しません!";
118 }
119 その他
120{
121 document.getElementById("confirmPassword").style.background= "#FFFFFF";
122 document.getElementById("confirmPasswordStr").style.display = "none";
123 }
124}
125
126関数チェックフィールド()
127{
128 var m=ドキュメント.フォーム1;
129 if(m.userName.value.length==0)
130 {
131alert("申し訳ありませんが、ユーザー名は英字、数字、またはアンダースコアである必要があり、長さは 5 ～ 20 です。");
132 m.userName.focus();
133 偽を返します。
134}
135 if(m.パスワード値.長さ==0)
136 {
137alert("申し訳ありませんが、パスワードは英字、数字、またはアンダースコアで、長さは 5 ～ 20 文字です。");
138 m.password.focus();
139 偽を返します。
140 }
141 if (m.password.value != m.confirmPassword.value)
142 {
143alert("申し訳ありませんが、パスワードは繰り返されたパスワードと一致しません!");
144 m.confirmPassword.focus();
145 偽を返します。
146 }
147 if(m.comNm.value.length==0)
148 {
149alert("申し訳ありませんが、会社名を空白にすることはできません!!");
150 m.comNm.focus();
151 偽を返します。
152 }
153 m.submit();
154}
155
156//-->
157＜/script＞
158＜ボディトップマージン="0">
159＜フォーム名="form1" メソッド="ポスト" アクション="/Control?act=Register">
160＜テーブル幅="100%">
161 ＜tr＞＜td align="center"> ＜H2＞Ajaxデモプログラム＜/H1＞＜/td＞＜/tr＞
162 <tr><td align="center"> ------ アルファによる企業登録</td></tr>
163＜/表＞
164
165＜HR＞
166 ＜テーブル幅="400" ボーダー="0" セルパディング="1" セルスペース="1" 整列="センター" ＞
167 ＜tr＞
168 ＜td＞＜font color="red">*＜/font＞＜/td＞
169 ＜td＞ユーザーアカウント：＜/td＞
170＜td＞
171 ＜input type="text" name="userName" maxlength="20" style="background:#FFFFFF" onBlur="chkUser()" value=""/>
172 ＜div id="showStr" style="background-color:#FF9900;display:none">＜/div＞
173 ＜/td＞
174 ＜/tr＞
175＜tr＞
176 ＜td＞＜font color="red">*＜/font＞＜/td＞
177 ＜td＞会社名：＜/td＞
178＜td＞
179 ＜input type="text" name="comNm" maxlength="100" style="background:#FFFFFF" onBlur="chkComNm()" value=""/>
180 ＜div id="comNmStr" style="background-color:#FF9900;display:none">＜/div＞
181
182 ＜/td＞
183 ＜/tr＞
184 ＜tr＞
185 ＜td＞＜font color="red">*＜/font＞＜/td＞
186 ＜td＞ユーザーパスワード：＜/td＞
187 ＜td＞＜input type="password" name="password" maxlength="20" style="background:#FFFFFF" onBlur="chkpassword()"/>
188 ＜div id="passwordStr" style="background-color:#FF9900;display:none">＜/div＞
189 ＜/td＞
190＜/tr＞
191 ＜tr＞
192 ＜td＞＜font color="red">*＜/font＞＜/td＞
193 ＜td＞パスワードの確認：＜/td＞
194 ＜td＞＜input type="password" name="confirmPassword" maxlength="20" style="background:#FFFFFF" onBlur="chkconfirmPassword()"/>
195 ＜div id="confirmPasswordStr" style="background-color:#FF9900;display:none">＜/div＞
196 ＜/td＞
197 ＜/tr＞
198 ＜/表＞
199
200 <div align="center">
201 <input type="button" name="ok" value="OK" onclick="checkfield()">
202
203 ＜input type="reset" name="reset" value="キャンセル">
204 ＜/div＞
205
206＜/フォーム＞
207＜/本体＞
208＜/html＞
JavaScript を使用して XmlHttpRequest クラスを作成します。HTTP リクエストをサーバーに送信した後、次のステップはサーバーからの応答を受信した後に何をする必要があるかを決定することです。これには、応答を処理するためにどの JavaScript 関数を使用するかを HTTP 要求オブジェクトに伝える必要があります。
次のように、オブジェクトの onreadystatechange 属性を、使用する JavaScript 関数の名前に設定できます。
onreadystatechange の後に作成されます。
request.open() を呼び出します。最初のパラメーターとして HTTP 動詞 (GET または POST) を使用し、2 番目のパラメーターとしてデータ プロバイダーの URL を使用して、サーバーとのソケット チャネルを開きます。 request.open() の最後のパラメータは true に設定されます。これはリクエストの非同期の性質を示します。リクエストはまだ送信されていないことに注意してください。 request.send() を呼び出すと、送信が開始されます。これにより、POST に必要なペイロードが提供されます。非同期リクエストを使用する場合は、request.onreadystatechanged プロパティを使用してリクエストのコールバック関数を割り当てる必要があります。 (リクエストが同期の場合、 request.send を呼び出した直後に結果を処理できるはずですが、リクエストが完了するまでユーザーをブロックすることもできます。)
データ プロバイダーの URL を見ると、 url = "/chkUserAndCom" 、サーブレットは次のとおりです。
以下は参照フラグメントです。
1/**//*
2 ※2005年12月31日作成
3*
4 * TODO この生成されたファイルのテンプレートを変更するには、次の場所に移動します。
5 * ウィンドウ - 設定 - Java - コード スタイル - コード テンプレート
6*/
7パッケージcom.イベント;
8
9インポート javax.servlet.ServletException;
10インポート javax.servlet.http.HttpServletRequest;
11インポート javax.servlet.http.HttpServletResponse;
12
13com.beans.EBaseInfo をインポートします。
14
15/** *//**
16 * @著者アルファ 2005-12-31
17*
18 * ＜P＞Ajax デモ ---企業登録時に企業ユーザー名と企業名を確認する＜/P>
19*
20 * TODO この生成された型コメントのテンプレートを変更するには、次の場所に移動します。
21 * ウィンドウ - 設定 - Java - コード スタイル - コード テンプレート
22 */
23パブリック クラス CheckUserAndComNm {
24 プライベート文字列 msgStr = "";
25 protected void doGet(HttpServletRequestリクエスト,HttpServletResponseレスポンス)
26 ServletException をスローします
27 {
28
29 EComBaseInfo info=new EComBaseInfo();
30 文字列 oprate=request.getParameter("oprate")).trim();
31 文字列 userName=request.getParameter("userName");
32 文字列 passWord=request.getParameter("パスワード");
33 文字列 comName=request.getParameter("comName");
34
35 試してみる
36 {
37 if(oprate.equals("chkUser"))
38 {
39 応答.setContentType("text/html;charset=GB2312");
40 if(userName.length()<5||userName.length()>20)
41 {
42 msgStr = "申し訳ありませんが、ユーザー名は文字、数字、またはアンダースコアである必要があり、長さは 5 ～ 20 文字です!";
43}
44 その他
45 {
46 boolean bTmp=info.findUser(userName) //ユーザー名がデータベースに存在するかどうかを確認します。
47 if(bTmp)
48 msgStr = "申し訳ありませんが、このユーザー名はすでに存在します。ユーザー名を変更して登録してください。";
49 その他
50 msgStr ="";
51 }
52 応答.getWriter().write(msgStr);
53}
54 else if(oprate.equals("chkCom"))
55 {
56 応答.setContentType("text/html;charset=GB2312");
57 if(comName.length()<6||comName.length()>100)
58 {
59 msgStr = "申し訳ありませんが、会社名の長さは 6 ～ 100 文字です (文字内のスペースを除く)!";
60 }
61 その他
62 {
63 boolean bTmp=info.findCom(comName) //データベースに会社名が存在するかどうかを確認します。
64 if(bTmp)
65 msgStr = "申し訳ありませんが、この会社名はすでに存在します。会社名を変更して登録してください。";
66 その他
67 msgStr ="";
68 }
69 応答.getWriter().write(msgStr);
70
71 }
72 }
73 キャッチ(例外例)
74 {
75 }
76 ついに
77 {
78 request.setAttribute("url",url);
79 }
80}
81
82 protected void doPost(HttpServletRequestリクエスト,HttpServletResponseレスポンス)
83 ServletException をスローします
84 {
85 doGet(リクエスト,レスポンス);
86}
87}
88
AJAX テクノロジの概要
1. AJAX (Asynchronous JavaScript and Xml) は、Java テクノロジ、Xml、および JavaScript を組み合わせたプログラミング テクノロジであり、Java テクノロジに基づいて Web アプリケーションを構築でき、ページのリロードを使用する慣例を打ち破ることができます。
2. AJAX (Asynchronous JavaScript and Xml) は、クライアント側のスクリプトを使用して Web サーバーとデータを交換する Web アプリケーション開発方法です。このようにして、対話プロセスを中断したり再編集したりすることなく、Web ページを動的に更新できます。 AJAX を使用すると、ネイティブ デスクトップ アプリケーションに近い、直接的で可用性が高く、よりリッチで動的な Web ユーザー インターフェイスを作成できます。
3. Mozilla.Netscape、Safari、Firefox およびその他のブラウザーの場合、XmlHttpRequest を作成するメソッドは次のとおりです。
Xmlhttp_request=
new XmlHttpRequest();
4. IE およびその他のブラウザーの場合、次のように XmlHttpRequest を作成します。
ActiveXObject("Microsoft.XmlHTTP") ;5. Xmlhttp_request.open('GET', URL, true); Xmlhttp_request.send(null);
6. open() の最初のパラメータは、HTTP リクエスト メソッド (GET、POST、またはサーバーがサポートするメソッド) です。 HTTP 仕様に従って、このパラメータは大文字で表記されます。そうしないと、一部のブラウザ (Firefox など) がリクエストを処理できない可能性があります。 2 番目のパラメータは、要求されたページの URL です。 3 番目のパラメーターは、リクエストが非同期モードであるかどうかを設定します。 TRUE の場合、JavaScript 関数はサーバーからの応答を待たずに実行を継続します。これは「AJAX」の「A」です。
AJAX テクノロジーをうまく使用すると、Web ページに多くのフレンドリーな効果が追加され、ユーザーに優れた感触を与えることができます。 AJAXは良いものです。