Servlet3.0+JS pour l'interaction Ajax-js tutoriel-php.cn

Servlet3.0+JS pour l'interaction Ajax

php中世界最好的语言

Libérer： 2018-06-15 15:21:46

original

1104 Les gens l'ont consulté

Cette fois, je vais vous présenter Servlet3.0+JS pour l'interaction Ajax. Quelles sont les précautions pour l'interaction Ajax avec Servlet3.0+JS Voici un cas pratique, jetons un coup d'oeil.

Bien que js.html soit une page purement statique, le programme suivant doit être suspendu sur le serveur Tomcat pour obtenir une interaction Ajax, sinon l'effet ne sera pas visible.

Eclipse pour javaee faites attention à suspendre le projet terminé sur Tomcat avant d'exécuter Tomcat.

À l'exception du package Servlet nécessaire pour JSP, ce projet n'a pas besoin d'introduire autre chose. En fait, je souhaite utiliser directement une page JSP pour terminer ce projet, mais de nos jours, pratiquement personne qui est engagé dans JSP n'écrit les choses directement dans le fichier .jsp, n'est-ce pas ? Toutes les actions en arrière-plan sont lancées dans .java.

1. Objectif de base

Transmettre l'entrée dans la zone de saisie js.html du front-end au back-end avec le nom ajaxRequest et l'adresse /ajaxRequest Servlet.java. L'arrière-plan Servlet.java renvoie ensuite les informations correspondantes au js.html frontal. Le js.html ne s'actualise pas et ne saute pas et répond immédiatement.

2. Idée de base

Puisqu'il s'agit de Servlet3.0, vous pouvez utiliser des annotations pour écrire des servlets, et vous n'en avez pas besoin. écrivez n'importe quoi dans web.xml. Laissez directement Eclipse générer

et n'avez qu'à y laisser le contenu suivant :

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

Copier après la connexion

3. Processus de production

1 , Peu importe que vous écriviez d'abord Servlet.java ou js.html. Quoi qu'il en soit, dans l'interaction Ajax, ces deux sont intégrés et ne peuvent pas être séparés.

Regardez d'abord js.html. La mise en page HTML est très simple. Il n'y a même pas de formulaire, seulement deux zones de saisie.

Lors de la création de l'objet Ajax XMLHttpRequest, veillez à ne pas utiliser le mot-clé XMLHttpRequest comme nom de l'objet Ajax XMLHttpRequest, sinon certains navigateurs ne pourront pas le traiter.

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

Copier après la connexion

2. Vient ensuite Servlet.java. En fait, doGet et doPost impriment des éléments sur la page, mais ils prennent cette forme différente. PrintStream est le flux de sortie du JDK précédent, et PrintWriter semble être le flux de sortie après JDK1.4. Mais cette partie est trop simple. Les flux d’entrée et de sortie sont tous des cours obligatoires en Java, n’est-ce pas ?
Une fois que js.html a transmis param1 et param2 à ce Servlet.java, il attend que ce Servlet.java imprime les éléments correspondants, puis les lit directement via la variable XMLHttpRequest1.responseText à la réception.

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

Copier après la connexion

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Utiliser vue pour implémenter la fonction de barre de menus en arborescence

Fonction Preload() et utilisation du téléchargement d'images

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!