This time I will bring you Servlet3.0 JS for Ajax interaction. What are the precautions for Servlet3.0 JS for Ajax interaction? The following is a practical case, let’s take a look.
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> </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.
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <meta> <title>Js</title> <input> <input> <button>Go!</button> <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(); } }
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
Recommended reading:
Use vue to implement tree menu bar function
preload() function and image upload usage
The above is the detailed content of Servlet3.0+JS for Ajax interaction. For more information, please follow other related articles on the PHP Chinese website!

JavaScript is at the heart of modern websites because it enhances the interactivity and dynamicity of web pages. 1) It allows to change content without refreshing the page, 2) manipulate web pages through DOMAPI, 3) support complex interactive effects such as animation and drag-and-drop, 4) optimize performance and best practices to improve user experience.

C and JavaScript achieve interoperability through WebAssembly. 1) C code is compiled into WebAssembly module and introduced into JavaScript environment to enhance computing power. 2) In game development, C handles physics engines and graphics rendering, and JavaScript is responsible for game logic and user interface.

JavaScript is widely used in websites, mobile applications, desktop applications and server-side programming. 1) In website development, JavaScript operates DOM together with HTML and CSS to achieve dynamic effects and supports frameworks such as jQuery and React. 2) Through ReactNative and Ionic, JavaScript is used to develop cross-platform mobile applications. 3) The Electron framework enables JavaScript to build desktop applications. 4) Node.js allows JavaScript to run on the server side and supports high concurrent requests.

Python is more suitable for data science and automation, while JavaScript is more suitable for front-end and full-stack development. 1. Python performs well in data science and machine learning, using libraries such as NumPy and Pandas for data processing and modeling. 2. Python is concise and efficient in automation and scripting. 3. JavaScript is indispensable in front-end development and is used to build dynamic web pages and single-page applications. 4. JavaScript plays a role in back-end development through Node.js and supports full-stack development.

C and C play a vital role in the JavaScript engine, mainly used to implement interpreters and JIT compilers. 1) C is used to parse JavaScript source code and generate an abstract syntax tree. 2) C is responsible for generating and executing bytecode. 3) C implements the JIT compiler, optimizes and compiles hot-spot code at runtime, and significantly improves the execution efficiency of JavaScript.

JavaScript's application in the real world includes front-end and back-end development. 1) Display front-end applications by building a TODO list application, involving DOM operations and event processing. 2) Build RESTfulAPI through Node.js and Express to demonstrate back-end applications.

The main uses of JavaScript in web development include client interaction, form verification and asynchronous communication. 1) Dynamic content update and user interaction through DOM operations; 2) Client verification is carried out before the user submits data to improve the user experience; 3) Refreshless communication with the server is achieved through AJAX technology.

Understanding how JavaScript engine works internally is important to developers because it helps write more efficient code and understand performance bottlenecks and optimization strategies. 1) The engine's workflow includes three stages: parsing, compiling and execution; 2) During the execution process, the engine will perform dynamic optimization, such as inline cache and hidden classes; 3) Best practices include avoiding global variables, optimizing loops, using const and lets, and avoiding excessive use of closures.


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

VSCode Windows 64-bit Download
A free and powerful IDE editor launched by Microsoft

ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment

MantisBT
Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

Notepad++7.3.1
Easy-to-use and free code editor

mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),
