Detaillierte Erläuterung von Beispielen für die Interaktion zwischen Servlet3.0 und reinem JavaScript über Ajax-js-Tutorial-php.cn

Detaillierte Erläuterung von Beispielen für die Interaktion zwischen Servlet3.0 und reinem JavaScript über Ajax

亚连

Freigeben： 2018-05-29 15:20:25

Original

1398 Leute haben es durchsucht

Servlet interagiert über Ajax mit reinem Javascript, was für viele Menschen einfach sein dürfte. Aber schreiben wir es auf, um Nachzüglern das Erlernen von Ajax zu erleichtern.

Für viele Menschen dürfte es sehr 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>

Nach dem Login kopieren

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. Das 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>

Nach dem Login kopieren

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(); 
  }  
}

Nach dem Login kopieren

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

js+canvas implementiert die Schiebepuzzle-Bestätigungscodefunktion

Detaillierte Erklärung des Einfügens von rot-schwarzen Bäumen und Beispiele dafür Javascript-Implementierungsmethoden

Detaillierte Erläuterung der Deduplizierung und Optimierung numerischer Arrays mithilfe von js zum Aufbau eines Binärbaums

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung von Beispielen für die Interaktion zwischen Servlet3.0 und reinem JavaScript über Ajax. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!