ajax servlet3.0,Servlet3.0与JS通过Ajax交互实例详解

这次给大家带来Servlet3.0与JS通过Ajax交互实例详解，Servlet3.0与JS通过Ajax交互的注意事项有哪些，下面就是实战案例，一起来看一下。

对于很多人来说应该很简单。不过还是写写，方便Ajax学习的后来者。

虽然js.html是一个纯静态的页面，但是以下的程序必须挂在Tomcat服务器上，才能做到Ajax交互，否则看不出效果的。

Eclipse for javaee注意把做好的工程挂在Tomcat上，才运行Tomcat。

本工程除了JSP必须的Servlet包以外，无须引入其它东西。其实想直接用一个JSP页面完成这个工程的，但是现在搞JSP的，基本上没有人直接在.jsp文件中写东西了吧？后台动作都扔到.java里面了。

一、基本目标

把前台js.html输入框输入的东西，传递到后台名称为ajaxRequest，地址/ajaxRequest的Servlet.java。Servlet.java后台再返回相应的信息给前台js.html，js.html不刷新无跳转，即时响应。

二、基本思想

由于是Servlet3.0，可以采用注解的方式写Servlet，web.xml不用写任何东西，直接让Eclipse生成

里面只需留下如下内容：<?xml version="1.0" encoding="UTF-8"?>

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

三、制作过程

1、首先写Servlet.java与js.html哪个都没所谓，反正Ajax交互中，这两个是一体的，不可以割裂。

先看js.html，HTML布局部分很简单，甚至表单都没有，仅有两个输入框。

然后创建Ajax对象XMLHttpRequest的时候，注意不要使用XMLHttpRequest这个关键字，作为Ajax对象XMLHttpRequest的命名，否则一些浏览器处理不了。

Js

Go!

//创建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("网络连接中断！");

}

}

};

}

2、之后是Servlet.java，其实doGet与doPost都是在页面上打印东西，但是采取了这种不同的形式。PrintStream是以前JDK的输出流，PrintWriter貌似是JDK1.4之后的输出流。不过这部分太简单了，输入输出流，都是Java的必修课吧？

js.html传param1与param2给此Servlet.java之后，等待这个Servlet.java打印出相应的东西，然后在前台直接通过XMLHttpRequest1.responseText变量读取出来。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();

}

}

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

推荐阅读：

nodejs+express实现文件上传案例详解

webpack.config.js参数使用案例