Detailed explanation of Servlet3.0 and JS interaction through Ajax examples

This time I will bring you a detailed explanation of the interaction between Servlet3.0 and JS through Ajax. What are theprecautionsfor the interaction between Servlet3.0 and JS through Ajax. The following is a practical case, let's take a look.

Should be 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:

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, theHTML layoutpart 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.

     
    Go!   

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:

detailed explanation of nodejs express implementation of file upload case

webpack.config.js parameter usage case

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