Heim > Artikel > Web-Frontend > Detaillierte Erläuterung der Servlet3.0- und JS-Interaktion anhand von Ajax-Beispielen

Detaillierte Erläuterung der Servlet3.0- und JS-Interaktion anhand von Ajax-Beispielen

php中世界最好的语言Original: 2018-05-10 11:27:022434Durchsuche

Dieses Mal werde ich Ihnen ein detailliertes Beispiel für die Interaktion zwischen Servlet3.0 und JS über Ajax geben. Was sind die Vorsichtsmaßnahmen für die Interaktion zwischen Servlet3.0 und JS über Ajax? Praktischer Fall, werfen wir einen Blick darauf.

Sollte für viele Menschen einfach sein. Aber ich schreibe es trotzdem auf, um Nachzüglern das Erlernen von Ajax zu erleichtern.

Obwohl js.html eine rein statische Seite ist, muss das folgende Programm auf dem Tomcat-Server hängen, um eine Ajax-Interaktion zu erreichen, andernfalls ist der Effekt nicht sichtbar.

Eclipse für Javaee achten Sie darauf, das abgeschlossene Projekt auf Tomcat aufzuhängen, bevor Sie Tomcat ausführen.

Mit Ausnahme des für JSP erforderlichen Servlet-Pakets muss dieses Projekt nichts anderes einführen. Tatsächlich möchte ich direkt eine JSP-Seite verwenden, um dieses Projekt abzuschließen, aber heutzutage schreibt im Grunde niemand, der sich mit JSP beschäftigt, Dinge direkt in die .jsp-Datei, oder? Alle Hintergrundaktionen werden in .java geworfen.

1. Grundziel

Übertragen Sie die Eingabe im Front-End-js.html-Eingabefeld mit dem Namen ajaxRequest an das Back-End und die Adresse /ajaxRequest Servlet.java. Der Servlet.java-Hintergrund gibt dann die entsprechenden Informationen an die Front-End-js.html zurück. Die js.html wird nicht aktualisiert und reagiert nicht.

2. Grundidee

Da es sich um Servlet3.0 handelt, können Sie Anmerkungen zum Schreiben von Servlets verwenden, und das ist auch nicht nötig Schreiben Sie alles in web.xml. Lassen Sie Eclipse direkt generieren

und lassen Sie nur den folgenden Inhalt darin:

<?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>

3. Produktionsprozess

1. Es spielt keine Rolle, ob Sie Servlet.java oder js.html schreiben. In der Ajax-Interaktion sind diese beiden jedoch integriert und können nicht getrennt werden.

Schauen Sie sich zuerst js.html an. Der Teil HTML-Layout ist nicht einmal ein Formular, sondern nur zwei Eingabefelder.

Achten Sie beim Erstellen des Ajax-Objekts XMLHttpRequest darauf, das Schlüsselwort XMLHttpRequest nicht als Namen des Ajax-Objekts XMLHttpRequest zu verwenden, da es sonst von einigen Browsern nicht verarbeitet werden kann.

<!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>

2. Als nächstes kommt Servlet.java. Tatsächlich drucken sowohl doGet als auch doPost Dinge auf der Seite, aber sie nehmen diese unterschiedliche Form an. PrintStream ist der Ausgabestream des vorherigen JDK, und PrintWriter scheint der Ausgabestream nach JDK1.4 zu sein. Aber dieser Teil ist zu einfach. Eingabe- und Ausgabestreams sind alles Pflichtkurse in Java, oder?
Nachdem js.html param1 und param2 an dieses Servlet.java übergeben hat, wartet es darauf, dass dieses Servlet.java die entsprechenden Dinge ausgibt, und liest sie dann direkt über die Variable XMLHttpRequest1.responseText im Front Desk.

package jsServletAjax; 
import java.io.*;  
import javax.servlet.*;  
import javax.servlet.http.*;  
import javax.servlet.annotation.*;  
  
//说明这个Servlet是没有序列号的  
@SuppressWarnings("serial")  
//说明这个Servlet的名称是ajaxRequest，其地址是/ajaxRequest 
//这与在web.xml中设置是一样的  
@WebServlet(name = "ajaxRequest", urlPatterns = { "/ajaxRequest" })  
public class Servlet extends HttpServlet {  
  //放置用户之间通过直接在浏览器输入地址访问这个servlet  
  protected void doGet(HttpServletRequest request,  
      HttpServletResponse response) throws ServletException, IOException {  
    PrintStream out = new PrintStream(response.getOutputStream());  
    response.setContentType("text/html;charSet=utf-8");  
    out.print("请正常打开此页"); 
  }  
  
  protected void doPost(HttpServletRequest request,  
      HttpServletResponse response) throws ServletException, IOException { 
    response.setContentType("text/html; charset=utf-8"); 
    PrintWriter pw = response.getWriter(); 
    request.setCharacterEncoding("utf-8"); 
    String param1=request.getParameter("param1"); 
    String param2=request.getParameter("param2");     
    pw.print("前台传来了参数：param1="+param1+"，param2="+param2); 
    pw.flush(); 
    pw.close(); 
  }  
}

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der NodeJS+Express-Implementierung des Datei-Upload-Falls

webpack.config.js-Parameter Anwendungsfall

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Servlet3.0- und JS-Interaktion anhand von Ajax-Beispielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Schritte zum Implementieren des Baummenüs in VueNächster Artikel：Schritte zum Implementieren des Baummenüs in Vue

In Verbindung stehende Artikel

Mehr sehen