JAvaでのjQueryとAjaxの応用、菜鳥チュートリアル

一、紹介
     1. Ajaxは、単一の技術ではなく、一連のインタラクティブなウェブアプリケーションに関連する技術を有機的に利用して形成された結合体を指す.Ajaxは更新ページを更新しない新時代を切り開き、システムに代わるWeb方式や非同期で提出する傾向があり、Web開発アプリケーションのマイルストーンとなっている.Ajaxフルネーム(Asynchronous JavaScript and XML)、すなわち非同期JavaScriptとXML.クライアントの非同期要求操作を実現し、ページ全体をリフレッシュせずにサーバ通信を行い、待ち時間を減らす.
簡単に言えば、Ajaxは非同期通信メカニズムであり、ローカルリフレッシュを実現します.
Ajaxのメリットと不足点
メリット
欠点
プラグインのサポートは不要
XMLHttpRequestオブジェクトに対するブラウザのサポートが不足しています
優れたユーザー・エクスペリエンス
ブラウザの前進後退ボタンの正常な使用を破壊
Webプログラムのパフォーマンス向上
検索エンジンのサポート不足
サーバとブロードバンドの負担軽減
開発とデバッグツールの不足
2.AjaxのXMLHttpRequestオブジェクト
Ajaxの核心はXMLHttpRequestオブジェクトであり、Ajax実装の鍵である.非同期リクエストの送信、応答の受信、コールバックの実行は、それによって行われる.
利用する
XMLHttpRequest
(XHR)
オブジェクト、構築ごと
Ajax
適用は、次の手順に従います.
(1)作成
XMLHttpRequest
オブジェクト
(2)作成
Ajax
リクエスト
(3)送信
Ajax
リクエスト
(4)処理サーバ応答
3.XMLHttpRequestプロパティ:
(1)ReadyState
        0 「初期化されていません」(XMLHttpRequest)オブジェクトは作成されていますが、open()メソッドはまだ呼び出されていません.
        1 「送信」ステータスで、リクエストをサーバに送信する準備ができています.
        2 「送信完了」ステータスで、リクエストがサーバ側に送信されましたが、まだ応答していません.
        3 「受信中」状態、受信済み、まだ完全な受信が終了していません.
        4 「ロード済み」ステータスで、応答は完全に受信されました.
(2)responseTextとresponseXML      要求されたテキストまたはXMLコンテンツ
(3)status Http状態コード
        
    100-お客様は引き続き要求を出す必要があります
    101——クライアント要求サーバーが要求に応じてHTTPプロトコルバージョンを変換する
    200-成功
    201——新しいファイルのURLをお知らせします
    300-要求されたリソースは複数箇所で入手可能
    301-要求データの削除
    404-ファイル、クエリー、またはURlが見つかりません
    500-サーバ内部エラー
4.方法
Labort()リクエストを一時停止し、未初期化状態にリセット
lopen()  リンクするページのロード
lsend()  このリクエストをサーバに送信
説明:1) sendメソッドにはcontentパラメータがあり、サーバに送信するデータを識別します.フォーマットは
                  次のようなクエリ文字列の形式.
                  var content = "userName=li&sex=male&age=25";
                  xmlHttp.send(content);
          2)コミットメソッドがget方式である場合、これらのパラメータはクエリー文字列としてコミットされる.指定した場合
                post方式であれば、これらのパラメータはリクエストボディにコミットされます.
         3)Request.getParameter(「パラメータ名」)対応する値を取得
         4)Openメソッドでpostコミット要求が指定されている場合はsendの前にhttpヘッダ情報を設定する必要がある
           xmlHttp.setRequestHeader(“Content-Type”,“application/x-www-form-urlencoded”);
イベントonreadystatechange------readystate値が変更されたときにトリガー
二、JQUERYのAJAX実現(一)
jQueryはAjaxをカプセル化しています.
JQueryのAjaxリクエスト方法:
    $.load(
url
,[data], [callback])
    $.get(
url
,[data], [
fn
],[type])
    $.post(
url
,[data],[callback])
    $.
getJSON
(
url
, [data], [
fn
])
    $.
getScript
(
url
,[callback])
    $.ajax([
options
])
1、load()方法
   リモートHTMLコードを読み込み、DOMに挿入できます.
  構文:
  load( url [,data] [ ,callback])
  url:HTMLページのURLアドレスを要求する
  data:サーバに送信されるデータ
  callback:リクエストが成功したか失敗したかにかかわらず、リクエストが完了したときのコールバック関数
    
例:inner.htmlというHTMLファイルを作成し、ページtest.htmlを再構築し、button要素を追加し、idがresTestの要素を追加し、buttonをクリックすると、resTextに追加のHTML内容が表示されます.
HTMLコード略.
jQueryコードは次のとおりです.    

$(function){
    $(“#send”).click(function(){
        $(“#resTest”).load(“test.hmtl .para”);
    });
}

2.$.get()メソッド
 getメソッドを用いて非同期要求を行う.
 $.get(url[,data] [,callback] [,type])
 url:要求されたHTMLページのURLアドレス例えばtest.jsp
  Data:サーバに送信されたデータは、要求URLにQueryStringとして添付されます.次のようになります.
        {name:’zhangs’}
  callback:読み込み成功時コールバック関数(Responseの戻り状態がsuccessである場合のみ)
        メソッドが呼び出された場合のみ)リクエスト結果とステータスが自動的にメソッドに渡されます.たとえば 
         function(dt){alert(dt)}
  type:xml html script json textを含むサーバが返すコンテンツのフォーマット 
例:
ページ構築:

		

			
  :
			
  :
			
  :</p>
			<p><input type="button" id="send" value="  "/></p>
		</form>


		<div class="comment">
			    ：
		</div>
		<div id="resText">
		</div>
	</code></pre> 
  <p>servlet  ：</p> 
  <pre><code>//  
		request.setCharacterEncoding("UTF-8");
		response.setCharacterEncoding("UTF-8");
		
		response.setContentType("text/html");
		PrintWriter out = response.getWriter();
		//       
		String username=request.getParameter("username");
		String content=request.getParameter("content");
		//      
		out.println("<div class="comment"><h6> " + username + " :</h6><p class="para"> " 
                + content + " </p></div>");
		
		out.flush();
		out.close();</code></pre> 
  <p>jq     ：</p> 
  <p>   ：</p> 
  <pre><code><script src="scripts/jquery.js" type="text/javascript"/>
		<script language="javascript">
	$(function() {
		$("#send").click(function() {
			$.get("GetHtmlServlet", {
				username : $("#username").val(),
				content : $("#content").val()
			}, function(data, textStatus) {
				$("#resText").append(data); //             
				});
		})
	})
</script></code></pre> 
  <p>   ：</p> 
  <pre><code><script src="scripts/jquery.js" type="text/javascript"/>
		<script language="javascript">
	$(function(){
	   $("#send").click(function(){
			$.get("GetXmlServlet", { 
						username :  $("#username").val() , 
						content :  $("#content").val()
		}, function(data, textStatus) {
					    
					    var username = $(data).find("comment").attr("username");
						var content = $(data).find("comment content").text();
					    var txtHtml = "<div class='comment'><h6>"+username+":</h6><p class='para'>"+content+"</p></div>";
                        $("#resText").append(txtHtml); //             
					});
	   })
	})
</script></code></pre> 
  <p>   ：</p> 
  <pre><code>	<script src="scripts/jquery.js" type="text/javascript"/>
		<script language="javascript">
	$(function(){
	   $(function() {
        $("#send").click(function() {
            $.get("GetJsonServlet", {
                username: $("#username").val(),
                content: $("#content").val()
            }, function(data, textStatus) {
               // alert(data);
                var username = data.username;
                var content = data.content;
                var txtHtml = "<div class='comment'><h6>" + username + ":</h6><p class='para'>" + content + "</p></div>";
                $("#resText").html(txtHtml); //             
            }, "json");
        })
    })
})
</script></code></pre> 
  <p><span style="color:#000000;"><span style="font-size:16px;">3.</span></span><span style="font-size:16px;"><span style="color:#000000;">$.post()</span><span style="color:#000000;">  </span></span></p> 
  <p><span style="color:#000000;">   get（）            post</span></p> 
  <p><span style="color:#000000;">4.$ajax()</span></p> 
  <pre><code><script src="scripts/jquery.js" type="text/javascript"/>
 <script>
   $(function(){
        $('#send').click(function() {
            $.ajax({
			  type: "get",
			  url: "JsonListServlet",
			  dataType: "json",
			  success : function(data){
			         $('#resText').empty();
					  var html = '';
					  $.each( data  , function(commentIndex, comment) {
						  html += '<div class="comment"><h6>' + comment['userName'] + ':</h6><p class="para">' + comment['content'] + '</p></div>';
					  })
					 $('#resText').html(html);
			  }
			}); 
        });
   })
   </script>
  
  
  
<p><input type="button" id="send" value="  "/></p>
<div class="comment">    ：</div>
<div id="resText"/>
  
</code></pre></div></div></div></div>