Ajax (asynchronousjavascriptandxml) 非同期 JavaScript と XML。
これは、従来の Web アプリケーションの「リクエストの送信 - 応答の待機」モデルの欠点を解決するためです (リクエストの送信後、ブラウザーはサーバーの応答を待つことしかできません。ユーザーは他の操作を行うことができません。ブラウザーがリクエストを送信した後は、リクエストを実行すると、ページ全体が破棄され、サーバーが新しいページを返すのを待ちます。つまり、ブラウザーとサーバー間でやり取りされるデータの量は非常に多く、オンデマンドでデータを取得することはできません)。このテクノロジーの本質は、ブラウザーに組み込まれたオブジェクト (XmlHttpRequest) を介して非同期的に取得されることです。サーバーにリクエストを送信します。
いわゆる非同期とは、ブラウザーがページ全体を放棄しないこと、つまり、サーバーが要求を処理した後、データを XmlHttpRequest オブジェクトに返し、データをサーバーに送信しないことを意味します。 XmlHttpRequest 内のデータは JavaScript を通じて取得できます。その後、このデータを使用してページを更新すると、プロセス全体でユーザーはサーバーからの応答を待つ必要がなくなります。
説明: Web ページの非同期送信テクノロジ。Web ページ全体を更新せずにサーバーと通信し、ユーザーはシステムと対話し、更新せずにページのコンテンツを更新できます。合理的に使用すると、ユーザーにとって快適で便利になりますが、乱用しないでください。
同期と非同期
同期とは、送信者がデータを送信し、受信者が応答を返すのを待ってから次のデータ パケットを送信する通信方法を指します。
例: 同期: リクエストを送信する -> サーバーの処理を待つ -> 処理後に戻る 非同期とは、送信者がデータを送信した後、受信者がデータを送信するのを待ちません。応答し、次のデータ パケットを送信します。
例: 非同期: リクエストはイベントによってトリガーされる -> サーバーによって処理される (この時点でもブラウザは他の処理を行うことができます) -> 処理されます
AjaxXMLHttpRequestの重要なオブジェクト
重要 サーバーへのリクエストを行うことができる Javascript オブジェクト。複数のリクエストを行う場合は、事前定義されたメソッドによってリクエストの結果が処理されます。
XmlHttpRequest オブジェクトの作成方法
関数 getXmlHttpRequest(){
var xmlHttpRequest = null;
if ((XMLHttpRequest のタイプ) != '未定義') {
//IE以外のブラウザ
xmlHttpRequest = 新しい XMLHttpRequest();
}それ以外 {
//つまりブラウザ
xmlHttpRequest = new ActiveXObject('Microsoft.XMLHttp');
}
xmlHttpRequest を返します。
}
または
関数 createXmlHttpRequest(){
var xmlHttpRequest = null;
if(window.ActiveXObject){
xmlHttpRequest = new AvtiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){
xmlHttpRequest = 新しい XMLHttpRequest();
}
}
xmlHttpRequest オブジェクトの重要なプロパティ。
responseXml: サーバー応答の XML データを取得します。
status: サーバーから返されたステータス コード (200 など) を取得します。
readyState: xmlHttpRequest とサーバー間の通信のステータスを取得します (0、1、2、3、4、それぞれ異なる状態を示します)。
(未初期化): オブジェクトは作成されましたが、初期化されていません (open メソッドがまだ呼び出されていません)。
(初期化): オブジェクトは作成されていますが、send メソッドはまだ呼び出されていません。
(データ送信): 送信メソッドが呼び出されましたが、現在のステータスと http ヘッダーが不明です
（データ送信中）：一部のデータを受信しました。
(応答の終わり): この時点で、responseText/responseXml を通じてデータを取得できます。
Ajaxを使って人が実装した応用例
システムのスクリーンショット
システムの説明:
システム構成図
フロントページ register.jsp を表示する
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<頭>
<title>ユーザー登録</title>
<link href="css/regist.css" rel="stylesheet" type="text/css" />
<script src="js/regist_ajax.js" type="text/javascript"></script>
</head>
<body onload="getRegistRuleTxt(),getCheckcode()">
<form action="regist.do" onsubmit="return check(this);">
<table bordercolor="gray" cellpadding="6" align="center">
<tr>
<tdcolspan="2">
>> <font color="red">ユーザー登録</font>
<font color="gray">[モジュールの説明: ユーザー名のチェック、利用規約の使用 Ajax 非同期処理、検証コード サーバーの生成]</font>
</td>
</tr>
<tr>
<td align="right">
ユーザー名:
</td>
<td>
<input type="text" name="ユーザー名" id="ユーザー名" onblur="postValidate()"/>
<span style="color:orange" id="checkMsg" > * ユーザー名は文字、数字、アンダースコアで構成されます。</span>
</td>
</tr>
<tr>
<td align="right">
パスワード：
</td>
<td>
<input type="パスワード" name="パスワード" id="パスワード">
<span style="color:orange" id="pwdMsg" > * パスワードの長さは 6 ～ 8 文字です。セキュリティのため、独自の形式は避けてください。</span>
</td>
</tr>
<tr>
<td align="right">
パスワードを認証する：
</td>
<td>
<input type="password" name="repassword" id="repassword">
<span style="color:orange" id="repwdMsg" > * パスワードを設定する際は、パスワードを確認して間違いがないことを確認してください</span>
</td>
</tr>
<tr>
<td align="right">
郵便：
</td>
<td>
<input type="text" id="email" name="email">
<span style="color:orange" id="emailMsg" > * ご連絡できるよう、通常のメール アドレスを入力してください。</span>
</td>
</tr>
<tr>
<td align="right">
検証コード：
</td>
<td>
<input type="text" id="チェックコード">
<img id="ckcodeimage" src="imgsrc" style="border:solid #92CEDB 1px "> <!-- 確認コード-->
<a href="javascript:;" onclick="getCheckcode()">よく見えません。別のものを変更してください</a>
<span style="color:orange" id="ckcodeMsg" > </span>
</td>
</tr>
<tr>
<td align="right">
利用規約:
</td>
<td>
<textarea rows="5"cols="48" style="margin-bottom:6px;margin-left:5px; color:gray" readonly="readonly" id="item" >
</textarea>
</td>
</tr>
<tr>
<td align="right">
</td>
<td>
<input type="submit" value="規約に同意して登録します"/>
</td>
</tr>
</テーブル>
<div align="center">
Copyright (c) 2013 Su Ruonian (<a href="mailto:[email protected]">連絡先:[email protected]</a> )
株式会社 著作権所有。
</div>
</form>
</body>
</html>
/*
xmlHttpRequest オブジェクトを取得するメソッドを作成する
*/
関数 getXmlHttpRequest(){
var xmlHttpRequest = null;
if((XMLHttpRequest のタイプ) != '未定義'){
/*IE 以外のブラウザは XMLHttpRequest オブジェクトを作成します*/
xmlHttpRequest = 新しい XMLHttpRequest();
}それ以外{
/*IE ブラウザは XMLHttpRequest オブジェクトを作成します*/
xmlHttpRequest = new ActiveXObject('Microsoft.XMLHttp');
}
xmlHttpRequest を返します。
}
/*
認証コード応答イベント
*/
関数 getCheckcode(){
var codeimage = document.getElementById("ckcodeimage");
var url = "チェックコード.do";
codeimage.src=addTimestamp(url);
}
/*
Ajax を使用して利用規約を取得する
*/
関数 getRegistRuleTxt(){
var item = document.getElementById("item");
var url = "rulesText.do";
//get モードで送信する際の中国語エンコードの問題を解決します。encodeURI(url).true を使用してリクエストが非同期に送信されることを示し、addTimestamp(url) はブラウザーのキャッシュを防ぎます。
xmlHttpRequest.open("post",encodeURI(url),true);
xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttpRequest.onreadystatechange=function(){
if(xmlHttpRequest.readyState == 4){
if(xmlHttpRequest.status == 200){
var respText = xmlHttpRequest.responseText;
item.value=respText;
}それ以外{
//システムエラー。
item.value="システムエラー";
}
}それ以外{
//表示チェック中...
item.value="読み込み中...";
}
};
xmlHttpRequest.send(null);
}
/*
getメソッドを使用して確認します
*/
関数 getValidate(){
var ユーザー名 = document.getElementById("ユーザー名");
var url = "validatename.do?username=" + username.value;
//get モードで送信する際の中国語エンコードの問題を解決します。encodeURI(url).true を使用してリクエストが非同期に送信されることを示し、addTimestamp(url) はブラウザーのキャッシュを防ぎます。
xmlHttpRequest.open("get",encodeURI(addTimestamp(url)),true);
//メソッドを呼び出して戻りステータスを確認する
xmlHttpRequest.onreadystatechange=コールバック;
xmlHttpRequest.send(null);
}
/*
postメソッドを使用して確認します
*/
関数 postValidate(){
var ユーザー名 = document.getElementById("ユーザー名");
var url = "検証名.do";
//true は、非同期メソッドを使用してリクエストを送信することを意味します。デフォルトは true で、リクエスト メソッドは get、post、put、delete です。
xmlHttpRequest.open('post',url,true);
xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttpRequest.onreadystatechange=コールバック;
//複数のパラメータがある場合は、& 記号を使用してキーと値のペアをリンクし、中国語の問題を解決するにはエスケープを使用します
xmlHttpRequest.send('ユーザー名=' + エスケープ(ユーザー名.値));
}
/*
監視ステータスの返却方法
*/
関数コールバック(){
if(xmlHttpRequest.readyState == 4){
if(xmlHttpRequest.status == 200){
var respText = xmlHttpRequest.responseText;
innerHtmlMsg(respText);
}それ以外{
//システムエラー。
innerHtmlMsg("エラー");
}
}それ以外{
//表示チェック中...
innerHtmlMsg("チェック中");
}
}
/*
ブラウザのキャッシュを防ぐためにタイムスタンプを追加します。ブラウザのキャッシュでは get メソッドのみがキャッシュされます。
*/
関数 addTimestamp(url){
if(url.indexOf("?")!=-1){
//パラメータがある場合
return url+"×tamp= + new Date().valueOf();
}それ以外{
//パラメータなし
return url+"?timestamp=" + new Date().valueOf();
}
}
関数 innerHtmlMsg(メッセージ){
var checkMsg = document.getElementById("checkMsg");
if(メッセージ=='存在'){
//ユーザー名は存在します
checkMsg.innerHTML= "<font color='red'>* 申し訳ありませんが、ユーザー名はすでに存在します。</font>";
}
if(メッセージ=='存在しません'){
//ユーザー名も使用可能
checkMsg.innerHTML= "<font color='green'>* おめでとうございます。ユーザー名が使用可能になりました。</font>";
}
if(メッセージ=='チェック中'){
//システムチェック
checkMsg.innerHTML= "<font color='#0099aa'>* システムはデータをチェックしています...</font>";
}
if(メッセージ=='エラー'){
//システムエラー
checkMsg.innerHTML= "<font color='red'>システム障害です。ネットワークを確認するか、<a href='#'>お問い合わせください</a></font>";
}
}
} /* テーブル全体の幅と境界線のスタイルを定義し、テーブル内のすべてのテキストのスタイルを定義します */
。左{
フォントの太さ:500;
色:#708899;
パディング右:20px;
背景色: #D6ECF5;
}
.inpt {
ボーダー:実線 #92CEDB 1px;
幅: 210ピクセル;
高さ: 22ピクセル;
マージン左: 10px;
}
.rghts{
マージントップ:20px;
色:#708899;
フォントサイズ:12px;
}
<サーブレット>
<サーブレット名>ユーザーサーブレット</サーブレット名>
<サーブレットクラス>com.webapp.servlet.UserServlet</サーブレットクラス>
<初期パラメータ>
<param-name>ルールファイルパス</param-name>
<param-value>/txt/item.txt</param-value>
</init-param>
</サーブレット>
<サーブレットマッピング>
<サーブレット名>ユーザーサーブレット</サーブレット名>
<url-pattern>*.do</url-pattern>
</サーブレットマッピング>
<ウェルカムファイルリスト>
<welcome-file>regist.jsp</welcome-file>
</ウェルカムファイルリスト>
</web-app>
java.awt.Colorをインポートします。
java.awt.Fontをインポートします。
java.awt.Graphicsをインポートします。
インポート java.awt.image.BufferedImage;
java.util.HashMapをインポートします。
java.util.Mapをインポートします。
java.util.Randomをインポートします。
/**
*
* @バージョン: 1.1
*
* @author: Su Ruonian<a href="mailto:[email protected]">メールを送信</a>
*
* @since: 1.0 作成時間: 2013-1-20 04:26:52 pm
*
* @関数: TODO
*
*/
パブリック クラス CheckCodeImageUtil {
private static Final String[] chars = { "0"、"1"、"2"、"3"、"4"、"5"、"6"、
"7"、"8"、"9"、"A"、"B"、"C"、"D"、"E"、"F"、"G"、"H"、"I" };
private static Final int SIZE = 4; 検証コードの文字数
private static Final int LINES = 4;
private static Final int WIDTH = 110; //検証コード画像の幅
private static Final int HEIGHT = 40; 検証コードの画像の高さ
private static Final int FONT_SIZE = 21;
/**
* 確認コードの生成
*
* @return Map<認証コードの値、認証コードの画像>
*
*/
public static Map<String,BufferedImage> creatCheckImage(){
//検証コードの真の値を生成する文字列を保存します
StringBuffer バッファ = new StringBuffer();
//カスタム画像オブジェクト
BufferedImage 画像 = 新しい BufferedImage(WIDTH,HEIGHT,BufferedImage.TYPE_INT_RGB);
Map<String,BufferedImage> マップ = new HashMap<String,BufferedImage>();
グラフィックス グラフィックス = image.getGraphics();
グラフィックス.setColor(Color.WHITE);
graphics.fillRect(0, 0, WIDTH, HEIGHT);
ランダム ランダム = new Random();
//ランダムな文字を描画します
for(int i=0; i<SIZE; i++){
//定義された文字セットから要素を取得します
int rand = ランダム.nextInt(chars.length);
グラフィックス.setColor(randomColor());
graphics.setFont(new Font(null,Font.BOLD+Font.ITALIC,FONT_SIZE));
graphics.drawString(chars[rand],(i)*WIDTH/SIZE+8, HEIGHT/2+10);
buffer.append(chars[rand]); //生成された文字列をバッファに保存し、今後取得するときにユーザーが入力した値と比較するために使用します。
}
//干渉線を描く
for(int i=1;i<=LINES;i++){
グラフィックス.setColor(randomColor());
graphics.drawLine(random.nextInt(WIDTH),random.nextInt(HEIGHT),random.nextInt(WIDTH),random.nextInt(HEIGHT));
if(i==LINES){
graphics.setFont(new Font(null,Font.ITALIC,13));
グラフィックス.setColor(Color.GRAY);
graphics.drawString("Su Ruonian Studio", 5,15);
}
}
map.put(buffer.toString(), image);
マップを返す。
}
/**
※色はすぐに生成されます
* @戻る
*/
パブリック静的カラーrandomColor(){
ランダム ランダム = new Random();
カラー color = new Color(random.nextInt(256),random.nextInt(256),random.nextInt(256));
色を返す;
}
}
インポート java.awt.image.BufferedImage;
java.io.BufferedReaderをインポートします。
インポートjava.io.ByteArrayInputStream;
インポートjava.io.ByteArrayOutputStream;
java.io.ファイルをインポートします。
java.io.FileReaderをインポートします。
java.io.FileWriterをインポートします。
インポート java.io.IOException;
java.io.InputStreamをインポートします。
java.io.PrintWriterをインポートします。
java.util.Listをインポートします。
java.util.Mapをインポートします。
java.util.Vectorをインポートします。
インポートjavax.imageio.ImageIO;
インポート javax.servlet.ServletException;
インポート javax.servlet.ServletOutputStream;
インポート javax.servlet.http.HttpServlet;
インポート javax.servlet.http.HttpServletRequest;
インポート javax.servlet.http.HttpServletResponse;
com.sun.image.codec.jpeg.JPEGCodec をインポートします。
com.sun.image.codec.jpeg.JPEGImageEncoder をインポートします。
com.sun.imageio.plugins.common.ImageUtil をインポートします。
com.webapp.util.CheckCodeImageUtil をインポートします。
public class UserServlet extends HttpServlet {
private List<String> userList;
プライベート文字列txtFilePath = null;
public void init() は ServletException をスローします {
txtFilePath = this.getInitParameter("rulesfilepath");
//データベースをシミュレートする
userList = new Vector<String>();
userList.add("張さん");
userList.add("lisi");
userList.add("王武");
userList.add("zhaoliu");
}
public void doGet(HttpServletRequest リクエスト、HttpServletResponse レスポンス)
ServletException、IOExceptionをスローします{
doPost(リクエスト、レスポンス);
}
public void doPost(HttpServletRequest リクエスト、HttpServletResponse レスポンス)
ServletException、IOExceptionをスローします{
文字列 uri = request.getRequestURI();
文字列パス = uri.substring(uri.lastIndexOf("/"),uri.lastIndexOf("."));
if(path.equals("/validatename")){
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
試す {
Thread.sleep(3000);
} catch (InterruptedException e) {
e.printStackTrace();
}
//シミュレーションシステムは例外テストを生成します
/*if(1==2){
throw new ServletException("何らかのエラー");
}*/
文字列ユーザー名 = request.getParameter("ユーザー名");
System.out.println("ユーザー名:" + ユーザー名);
//ユーザーデータクエリをシミュレートします
ブール値存在 = userList.contains(ユーザー名);
if(存在する){
response.getWriter().print("存在します");
}それ以外{
response.getWriter().print("noexists");
}
}
if(path.equals("/rulesText")){
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
文字列ファイルパス = this.getServletContext().getRealPath(txtFilePath);
ファイル file = 新しいファイル(ファイルパス);
StringBuffer バッファ = new StringBuffer();
試す {
BufferedReader リーダー = new BufferedReader(new FileReader(file));
文字列 tmp = "";
while((tmp = Reader.readLine())!=null){
buffer.append(new String(tmp.getBytes("gbk"),"utf8")).append("/n");
}
Reader.close();
} catch (例外 e) {
e.printStackTrace();
}
if(buffer.toString().trim()!=null){
response.getWriter().print(buffer.toString());
}
}
if(path.equals("/checkcode")){
response.setContentType("画像/jpeg");
Map<String, BufferedImage> マップ = CheckCodeImageUtil.creatCheckImage();
文字列キー = (文字列)map.keySet().iterator().next();
request.getSession().setAttribute("コード",key);
System.out.println("checkcode = " + request.getSession().getAttribute("code"));
BufferedImage 画像 = map.get(key);
ImageIO.write(画像, "jpeg", response.getOutputStream());
}
}
}