집 >웹 프론트엔드 >JS 튜토리얼 >Ajax 상호작용을 위한 Servlet3.0+JS

Ajax 상호작용을 위한 Servlet3.0+JS

php中世界最好的语言원래의: 2018-06-15 15:21:461188검색

이번에는 Ajax 상호작용을 위한 Servlet3.0+JS를 가져오겠습니다. Servlet3.0+JS와 Ajax 상호작용 시 주의사항은 무엇인가요?

js.html은 순전히 정적 페이지이지만 Ajax 상호 작용을 구현하려면 Tomcat 서버에 다음 프로그램을 실행해야 합니다. 그렇지 않으면 효과가 표시되지 않습니다.

Javaee용 Eclipse. Tomcat을 실행하기 전에 완료된 프로젝트를 Tomcat에 걸어두세요.

이 프로젝트에서는 JSP에 필요한 서블릿 패키지 외에 다른 것을 소개할 필요가 없습니다. 사실 이 프로젝트를 JSP 페이지를 직접 이용해서 완성하고 싶은데, 요즘은 기본적으로 JSP에 종사하는 사람이 .jsp 파일에 직접 내용을 쓰는 경우가 없잖아요? 모든 백그라운드 작업은 .java에 포함됩니다.

1. 기본 목표

프런트엔드 js.html 입력 상자의 입력을 ajaxRequest라는 이름과 /ajaxRequest 주소를 사용하여 백엔드 Servlet.java에 전달합니다. 그런 다음 Servlet.java 배경은 해당 정보를 프런트 엔드 js.html로 반환합니다. js.html은 새로 고치거나 점프하지 않고 즉시 응답합니다.

2. 기본 개념

서블릿 3.0이기 때문에 애너테이션을 사용하여 서블릿을 작성할 수 있습니다. 웹에서는 아무것도 작성할 필요가 없습니다.

1 . Servlet.java를 먼저 작성하든 js.html을 먼저 작성하든 상관없습니다. 어쨌든 Ajax 상호작용에서는 이 둘이 통합되어 분리될 수 없습니다. 먼저 js.html을 보세요. HTML 레이아웃은 양식도 없고 입력 상자가 두 개뿐입니다. Ajax 객체 XMLHttpRequest를 생성할 때 XMLHttpRequest 키워드를 Ajax 객체 XMLHttpRequest의 이름으로 사용하지 않도록 주의하세요. 그렇지 않으면 일부 브라우저에서 이를 처리할 수 없습니다.

<?xml version="1.0" encoding="UTF-8"?> 
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
  xmlns="http://java.sun.com/xml/ns/javaee" 
  xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" 
  version="3.0"> 
</web-app>

2. 다음은 Servlet.java입니다. 실제로 doGet과 doPost는 모두 페이지에 인쇄하지만 형식이 다릅니다. PrintStream은 이전 JDK의 출력 스트림이고, PrintWriter는 JDK1.4 이후의 출력 스트림인 것 같습니다. 그런데 이 부분은 너무 간단합니다. 입출력 스트림은 모두 자바에서 필수 과정이겠죠?

js.html은 param1과 param2를 이 Servlet.java에 전달한 후 이 Servlet.java가 해당 내용을 인쇄할 때까지 기다린 다음 프런트 데스크의 XMLHttpRequest1.responseText 변수를 통해 직접 읽습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Js</title> 
</head> 
 
<body> 
  <input type="text" id="param1" /> 
  <input type="text" id="param2" /> 
  <button onclick="ajax()">Go!</button> 
</body> 
</html> 
<script> 
  //创建Ajax对象，不同浏览器有不同的创建方法，其实本函数就是一个简单的new语句而已。  
  function createXMLHttpRequest() { 
    var XMLHttpRequest1; 
    if (window.XMLHttpRequest) { 
      XMLHttpRequest1 = new XMLHttpRequest(); 
    } else if (window.ActiveXObject) { 
      try { 
        XMLHttpRequest1 = new ActiveXObject("Msxml2.XMLHTTP"); 
      } catch (e) { 
        XMLHttpRequest1 = new ActiveXObject("Microsoft.XMLHTTP"); 
      } 
    } 
    return XMLHttpRequest1; 
  } 
  function ajax() { 
    //param1与param2就是用户在输入框的两个参数 
    var param1=document.getElementById("param1").value; 
    var param2=document.getElementById("param2").value; 
    var XMLHttpRequest1 = createXMLHttpRequest(); 
    //指明相应页面  
    var url = "./ajaxRequest"; 
    XMLHttpRequest1.open("POST", url, true); 
    //这里没法解释，你所有JavaScript的请求头都这样写就对了，不会乱码  
    XMLHttpRequest1.setRequestHeader("Content-Type", 
        "application/x-www-form-urlencoded"); 
    //对于ajaxRequest，本js.html将会传递param1与param2给你。  
    XMLHttpRequest1.send("param1=" + param1 + "¶m2=" + param2); 
    //对于返回结果怎么处理的问题  
    XMLHttpRequest1.onreadystatechange = function() { 
      //这个4代表已经发送完毕之后  
      if (XMLHttpRequest1.readyState == 4) { 
        //200代表正确收到了返回结果  
        if (XMLHttpRequest1.status == 200) { 
          //弹出返回结果  
          alert(XMLHttpRequest1.responseText); 
        } else { 
          //如果不能正常接受结果，你肯定是断网，或者我的服务器关掉了。  
          alert("网络连接中断！"); 
        } 
      } 
    }; 
  } 
</script>

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!