prototypeでAjax

Js Java


サーバにアクセスしてdivタグの値を書き換えるプログラムを作ってみた。


１．jsp(ajax.jsp)の作成

<%@ page language="java" contentType="text/html; charset=windows-31j"
    pageEncoding="windows-31j"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>sample</title>

<script src="prototype.js" type="text/javascript"></script>
<script type="text/javascript"> 
function execute() { 
	    var a = new Ajax.Updater( 
	        "container", 
	        "http://localhost:8080/HelloWorld/servlet/ajaxhello", 
	        { 
	            "method": "get", 
	            "parameters": "a=b&c=d&e=f", 
	            onSuccess: function(request) { 
	                // 成功時の処理を記述 
	                alert(request.responseText);
	                
	                
	                var d = $('myDiv');
					d.innerHTML = request.responseText;

	            }, 
	            onComplete: function(request) { 
	                // 完了時の処理
	            }, 
	            onFailure: function(request) { 
	                alert('読み込みに失敗しました'); 
	            }, 
	            onException: function (request) { 
	                alert('読み込み中にエラーが発生しました'); 
	            } 
	        } 
	    ); 
	} 
	</script> 

</head>

<body>

<div id="myDiv">
	This is a paragraph
</div>
	
<input type="button" value="java" onclick="execute()"/>
</body>
</html>

Ajax.Updaterメソッドでサーブレット(http://localhost:8080/HelloWorld/servlet/ajaxhello)を呼び出し、responseをdivタグに出力している。



２．サーブレット(ajaxHello)の作成

package info.searchman;
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
import java.sql.*;

public class ajaxHello extends HttpServlet {

public void doGet(HttpServletRequest request, HttpServletResponse response)
throws IOException, ServletException
{
	response.setContentType("text/html");
	PrintWriter out = response.getWriter();
	
	out.println("harada");

	
}
}

３．WEB.xmlの追加

<?xml version="1.0" encoding="ISO-8859-1"?>
<web-app xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"
version="2.4">

<servlet>
<servlet-name>ajaxhello</servlet-name>
<servlet-class>info.searchman.ajaxHello</servlet-class>
</servlet>

<servlet-mapping>
<servlet-name>
ajaxhello
</servlet-name>
<url-pattern>
/servlet/ajaxhello
</url-pattern>
</servlet-mapping>


</web-app>

ajaxhelloを追加。


４．prototype.jsの配置

jspフォルダと同じ場所に配置



フォルダ構成は以下のとおり

HelloWorld
|
|--WEB-INF/src
|　　|-info.searchman
|　　　　　　|-ajaxHello.java
|
|--JSP
|　　|-ajax.jsp
|　　|-prototype.js
|
|--WEB-INF
|　　|-web.xml


５．tomcatの再起動


web.xmlを変更した場合、再起動がいるみたい



６．下記のアドレスからアクセス

http://localhost:8080/HelloWorld/JSP/ajax.jsp