Ajax 提交后返还列表

package com.zxl.ajax;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class AjaxServlet02 extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
	protected void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException {
		// TODO Auto-generated method stub
		response.setContentType("text/html");
		if(request.getParameter("name").equals("java")){
			response.getWriter().println(
			"<topic>"+
				"<name>java language</name>"+
				"<tutorial>intrroduction to java sockets</tutorial>"+
				"<tutorial>intrroduction to rmi</tutorial>"+
				"<tutorial>equals method</tutorial>"+
			"</topic>"
			);
		}else if (request.getParameter("name").equals("oodp")) {
			response.getWriter().println(
					"<topic>"+
						"<name>object oriented design patterns</name>"+
						"<tutorial>factory method</tutorial>"+
						"<tutorial>abstract factory</tutorial>"+
						"<tutorial>singleton</tutorial>"+
					"</topic>"
					);
		}else {
			response.getWriter().println(
					"<topic>"+
						"<name>topic:" +request.getParameter("name")+"</name>"+
						"<tutorial>no tutorials found</tutorial>"+
					"</topic>"
					);
		}
	}

}

var xmlHttpRequest=new XMLHttpRequest();
function findTurorals(){
	xmlHttpRequest.open("POST","AjaxServlet02?name="+document.getElementById('topicTextInput').value,true);
	xmlHttpRequest.onreadystatechange=processTutorials;
	xmlHttpRequest.send();
	documnet.getElementById('topicTextInput').value="";
}
function processTutorials(){
	if(xmlHttpRequest.readyState==4 && xmlHttpRequest.status==200){
		var table=document.getElementById("tutorialsTable");
		table.innerHTML="";
		var dom=(new DOMParser()).parseFromString(xmlHttpRequest.responseText,"text/xml");
		var tutorials=dom.getElementsByTagName("tutorial");
		var headrow=table.insertRow(0);
		var headcell=headrow.insertCell(0);
		headcell.style.backgroundColor="LightGray";
		headcell.innerHTML=(dom.getElementsByTagName("name"))[0].childNodes[0].nodeValue;
		var i=0;
		while(i<tutorials.length){
			row=table.insertRow(i+1);
			cell=row.insertCell(0);
			cell.innerHTML=tutorials[i++].childNodes[0].nodeValue;
		};
	}
}

<!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>
<script type="text/javascript" src="ajaxprj02.js"></script>
</head>
<body>
	<input type="text" id="topicTextInput" size=12/>
	<button type="button" onclick="findTurorals()">find</button>
	<table id="tutorialsTable" style="border:1px solid black"></table>
</body>
</html>

原文链接：https://www.f2er.com/ajax/165492.html

Ajax 提交后 返还列表

猜你在找的Ajax相关文章

Ajax 提交后返还列表