Ajax 동적 목록

function StorePage(){d=document;t=d.selection?(d.selection.type!='None'?d.selection.createRange().text:''):(d.getSelection?d.getSelection():'');void(keyit=window.open('http://www.365key.com/storeit.aspx?t='+escape(d.title)+'&u='+escape(d.location.href)+'&c='+escape(t),'keyit','scrollbars=no,width=475,height=575,left=75,top=20,status=no,resizable=yes'));keyit.focus();}사용자 에 게 단 추 를 누 르 라 고 요구 하 는 것 외 에 어떤 직관 적 인 방법 으로 자 료 를 얻 을 수 있 습 니까?이 관점 에서 볼 때 많은 비동기 요청 응답 방식 을 생각 할 수 있다.예 를 들 어 사용자 가 책 종 류 를 선택 한 후에 onchange 사건 을 촉발 하여 사용자 의 선택 을 자동 으로 보 내 고 다음 옵션 의 자 료 를 얻어 웹 페이지 에 나타 나 는 것 은 데스크 톱 응용 프로그램 에서 흔히 볼 수 있 지만 웹 응용 프로그램 에 서 는 예전 에는 흔 하지 않 았 다.
예 를 들 어 귀하 가 디자인 한 웹 페이지 는 다음 과 같 습 니 다.
  • DynamicListeEx-1.html
  • <!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>

    사용자 가 책의 종 류 를 선택 한 후에 다른 선택 서 는 이 종류 에 맞 는 책 을 자동 으로 작성 하여 자바 스 크 립 트 가 어떻게 작성 하 는 지 보 겠 습 니 다.
  • DynamicListEx-1.js
  • 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 로 전송 하려 면 종류 에 따라 조회 결 과 를 표시 합 니 다.

    Java 학습 노트
    C++학습 노트
    JSP/servlet 학습 노트
    아 약 스 학습 노트

    다음 간단 한 Servlet 시 뮬 레이 션 자 료 를 사용 하여 XML 응답 과정 을 조회 하고 전송 할 수 있 습 니 다.
  • RefreshBookServlet.java
  • 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();
    }
    }

    좋은 웹페이지 즐겨찾기