Ajax 동적 목록
5733 단어 JavaScriptspringAjaxxmlservlet
예 를 들 어 귀하 가 디자인 한 웹 페이지 는 다음 과 같 습 니 다.
<!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=BIG5">
<title> </title>
<script type="text/javascript" src=DynamicListEx-1.js></script>
</head>
<body>
…
<select id="type" onchange="refreshBooklList();">
<option value="notTech"> </option>
<option value="language"> </option>
<option value="framework"> </option>
</select>
<br/><br/>
…
<br/>
<select id="books" size="6" style="width:300px;">
</select>
</body>
</html>사용자 가 책의 종 류 를 선택 한 후에 다른 선택 서 는 이 종류 에 맞 는 책 을 자동 으로 작성 하여 자바 스 크 립 트 가 어떻게 작성 하 는 지 보 겠 습 니 다.
var xmlHttp;
window.onload = refreshBooklList;
function createXMLHttpRequest() {
if(window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
else if(window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
function refreshBooklList() {
var type = document.getElementById("type").value;
var url = "RefreshBookServlet?type=" + type;
createXMLHttpRequest();
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open("GET", url);
xmlHttp.send(null);
}
function handleStateChange() {
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
clearBookList();
updateBookList();
}
}
}
//
function clearBookList() {
var books = document.getElementById("books");
while(books.childNodes.length > 0) {
books.removeChild(books.childNodes[0]);
}
}
//
function updateBookList() {
var results = xmlHttp.responseXML.getElementsByTagName("book");
var books = document.getElementById("books");
var option = null;
for(var i = 0; i < results.length; i++) {
option = document.createElement("option");
option.appendChild(document.createTextNode(results[i].firstChild.nodeValue));
books.appendChild(option);
}
}서보 에서 다음 XML 로 전송 하려 면 종류 에 따라 조회 결 과 를 표시 합 니 다.
다음 간단 한 Servlet 시 뮬 레이 션 자 료 를 사용 하여 XML 응답 과정 을 조회 하고 전송 할 수 있 습 니 다.
package onlyfun.caterpillar;
import java.util.*;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class RefreshBookServlet extends javax.servlet.http.HttpServlet implements javax.servlet.Servlet {
private static Map inMemoryDB = new HashMap();
public void init() throws ServletException {
inMemoryDB.put("notTech",
new String[] {" ", " ", " ", " "});
inMemoryDB.put("language",
new String[] {"Java ", "JSP/Servlet ", "C++ ", "Ajax "});
inMemoryDB.put("framework",
new String[] {"Struts ", "Spring ", "Hibernate ", "JUnit "});
}
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String type = request.getParameter("type");
StringBuffer xml = new StringBuffer("<books>");
String[] books = (String[]) inMemoryDB.get(type);
for(int i = 0; i < books.length; i++) {
xml.append("<book>");
xml.append(books[i]);
xml.append("</book>");
}
xml.append("</books>");
response.setCharacterEncoding("UTF8");
response.setContentType("text/xml");
response.getWriter().write(xml.toString());
response.getWriter().close();
}
}이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
기초 정리 - 1문자 (String) 숫자 (Number) 불린 (Boolean) null undefined 심볼 (Symbol) 큰정수 (BigInt) 따옴표로 묶어 있어야 함 Not-A-Number - 숫자 데이터 / 숫자로 표...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
