Detailed explanation of examples of interaction between Servlet3.0 and pure JavaScript through Ajax-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Detailed explanation of examples of interaction between Servlet3.0 and pure JavaScript through Ajax

亚连

May 29, 2018 pm 03:20 PM

Servlet interacts with pure javascript through Ajax, which should be simple for many people. But I still write it down to make it easier for latecomers to learn Ajax

It should be very simple for many people. But I still write it down to facilitate latecomers who are learning Ajax.

Although js.html is a purely static page, the following program must be hung on the Tomcat server to achieve Ajax interaction, otherwise the effect will not be seen.

Eclipse for javaee pay attention to hanging the completed project on Tomcat before running Tomcat.

In addition to the necessary Servlet package for JSP, this project does not need to introduce other things. In fact, I want to directly use a JSP page to complete this project, but nowadays, basically no one who is engaged in JSP writes things directly in the .jsp file, right? All background actions are thrown into .java.

1. Basic goal

Pass the input in the front-end js.html input box to the back-end with the name ajaxRequest and the address/ajaxRequest Servlet.java. The Servlet.java background then returns the corresponding information to the front-end js.html. The js.html does not refresh or jump, and responds immediately.

2. Basic idea

Since it is Servlet3.0, you can use annotations to write Servlets, and you don’t need to write anything in web.xml. Directly let Eclipse generate

and only need to leave the following content in it:

<?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. Production process

1. First It doesn’t matter whether you write Servlet.java or js.html. Anyway, in Ajax interaction, these two are integrated and cannot be separated.

Look at js.html first. The HTML layout part is very simple. There is not even a form, only two input boxes.

When creating the Ajax object XMLHttpRequest, be careful not to use the XMLHttpRequest keyword as the name of the Ajax object XMLHttpRequest, otherwise some browsers cannot process it.

<!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. Next is Servlet.java. In fact, both doGet and doPost print things on the page, but they take this different form. PrintStream is the output stream of the previous JDK, and PrintWriter seems to be the output stream after JDK1.4. But this part is too simple. Input and output streams are all required courses in Java, right?
js.html After passing param1 and param2 to this Servlet.java, wait for this Servlet.java to print out the corresponding things, and then read them directly through the XMLHttpRequest1.responseText variable in the 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(); 
  }  
}

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

js canvas implements the sliding puzzle verification code function

##Detailed explanation of the insertion of red and black trees and examples of Javascript implementation methods

detailed explanation of js constructing binary tree for deduplication and optimization of numerical array

The above is the detailed content of Detailed explanation of examples of interaction between Servlet3.0 and pure JavaScript through Ajax. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Javascript Data Types : Is there any difference between Browser and NodeJs?May 14, 2025 am 12:15 AM

JavaScript core data types are consistent in browsers and Node.js, but are handled differently from the extra types. 1) The global object is window in the browser and global in Node.js. 2) Node.js' unique Buffer object, used to process binary data. 3) There are also differences in performance and time processing, and the code needs to be adjusted according to the environment.

JavaScript Comments: A Guide to Using // and /* */May 13, 2025 pm 03:49 PM

JavaScriptusestwotypesofcomments:single-line(//)andmulti-line(//).1)Use//forquicknotesorsingle-lineexplanations.2)Use//forlongerexplanationsorcommentingoutblocksofcode.Commentsshouldexplainthe'why',notthe'what',andbeplacedabovetherelevantcodeforclari

Python vs. JavaScript: A Comparative Analysis for DevelopersMay 09, 2025 am 12:22 AM

The main difference between Python and JavaScript is the type system and application scenarios. 1. Python uses dynamic types, suitable for scientific computing and data analysis. 2. JavaScript adopts weak types and is widely used in front-end and full-stack development. The two have their own advantages in asynchronous programming and performance optimization, and should be decided according to project requirements when choosing.

Python vs. JavaScript: Choosing the Right Tool for the JobMay 08, 2025 am 12:10 AM

Whether to choose Python or JavaScript depends on the project type: 1) Choose Python for data science and automation tasks; 2) Choose JavaScript for front-end and full-stack development. Python is favored for its powerful library in data processing and automation, while JavaScript is indispensable for its advantages in web interaction and full-stack development.

Python and JavaScript: Understanding the Strengths of EachMay 06, 2025 am 12:15 AM

Python and JavaScript each have their own advantages, and the choice depends on project needs and personal preferences. 1. Python is easy to learn, with concise syntax, suitable for data science and back-end development, but has a slow execution speed. 2. JavaScript is everywhere in front-end development and has strong asynchronous programming capabilities. Node.js makes it suitable for full-stack development, but the syntax may be complex and error-prone.

JavaScript's Core: Is It Built on C or C ?May 05, 2025 am 12:07 AM

JavaScriptisnotbuiltonCorC ;it'saninterpretedlanguagethatrunsonenginesoftenwritteninC .1)JavaScriptwasdesignedasalightweight,interpretedlanguageforwebbrowsers.2)EnginesevolvedfromsimpleinterpreterstoJITcompilers,typicallyinC ,improvingperformance.

JavaScript Applications: From Front-End to Back-EndMay 04, 2025 am 12:12 AM

JavaScript can be used for front-end and back-end development. The front-end enhances the user experience through DOM operations, and the back-end handles server tasks through Node.js. 1. Front-end example: Change the content of the web page text. 2. Backend example: Create a Node.js server.

Python vs. JavaScript: Which Language Should You Learn?May 03, 2025 am 12:10 AM

Choosing Python or JavaScript should be based on career development, learning curve and ecosystem: 1) Career development: Python is suitable for data science and back-end development, while JavaScript is suitable for front-end and full-stack development. 2) Learning curve: Python syntax is concise and suitable for beginners; JavaScript syntax is flexible. 3) Ecosystem: Python has rich scientific computing libraries, and JavaScript has a powerful front-end framework.

See all articles