content.html
Hello World!!
ajax_receive_content.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <base href="<%=basePath%>"> </head> <body> <script type="text/javascript" language="JavaScript"> var xmlHttp; function createXMLHttpRequest() { if(window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest();//Firefox核心 } else { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");//IE核心 } } function showMsg() { createXMLHttpRequest(); xmlHttp.open("POST", "jsp/content.html"); xmlHttp.onreadystatechange = showMsgCallback; xmlHttp.send(null); } function showMsgCallback() { if(xmlHttp.readyState == 4) { if(xmlHttp.status == 200) { var test = xmlHttp.responseText; //設定要使用的CSS樣式表 //document.getElementById("msg").className = "樣式表名稱"; document.getElementById("msg").innerHTML = test; } } } </script> <input type="button" onclick="showMsg()" value="調用Ajax顯示內容"> <span id="msg"></span> </body></html>
index.jsp
<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <base href="<%=basePath%>"> <title>My JSP 'index.jsp' starting page</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><!--<link rel="stylesheet" type="text/css" href="styles.css">--> </head> <body> <jsp:include page="jsp/ajax_recieve_content.jsp"></jsp:include> </body></html>