Ajaxの原理と運行過程

6243 ワード

Ajaxとは
一般的には、現在のページ内で異なるリクエスト内容に応答するための非同期リフレッシュ技術、具体的には、AJAXは「Asynchronous JavaScript and XML」(非同期JavaScriptとXML)と呼ばれ、インタラクティブなWebアプリケーションを作成するWeb開発技術です.新しい技術ではなく、以下のいくつかの技術の組み合わせの応用です.
  • web規格(standards-based presentation)XHTML+CSSに基づく表現
  • DOM(Document Object Model)による動的表示およびインタラクション
  • XMLとXSLTによるデータ交換および関連動作
  • XMLHttpRequestによる非同期データ照会、取得
  • JavaScriptを使用してすべてのものをバインドする
  • Ajaxは本質的にブラウザ側の技術
  • である.
    なぜAjaxが必要なのか
    必要:
    今回の応答結果と前の応答結果の内容を同じページでユーザーに表示する必要がある場合があります.
    解決:
  • バックグラウンドサーバ側で複数回の応答内容をjspページに再結合し、応答する.しかし、これにより多くの応答内容が重複する応答が発生し、リソースの浪費が
  • になる.
  • Ajax技術
  • を使用
  • リクエストはa_herf,window.localion、formフォーム、ajaxの最初の3つは、自分がページをノックするリターンに相当します.ajaxは、現在のページに応答します.jsにはajaxエンジンオブジェクト(XMLHttpRequest)と呼ばれるオブジェクトがあります.現在のページの一部に属し、サーバに要求を開始します.応答するオブジェクトは、現在のページ
  • です.
    具体的なコード実装(実行プロセス)
    <%@ page language="java" contentType="text/html; charset=utf-8"
        pageEncoding="utf-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Insert title here</title>
    <!--   js    -->
    <script type="text/javascript">
    	function getData(){
    		//      
    		var showdiv=document.getElementById("showdiv");
    		showdiv.innerHTML="       ajax     ";
    	}
    </script>
    <style type="text/css">
    	#showdiv{
    		border:solid 1px;
    		width:200px;
    		height:100px; 
    	}
    </style>
    </head>
    <body>
    	<h3>    403  </h3>
    	<hr>
    	<input type="button" value="   " onclick="getData()"/>
    	<div id="showdiv"></div>
    </body>
    </html>