Ajax与Servlet交互一（原生JS）

最新推荐文章于 2022-03-18 15:03:55 发布

一只空指针

最新推荐文章于 2022-03-18 15:03:55 发布

阅读量1.2w

点赞数 5

分类专栏：前后端交互

本文链接：https://blog.csdn.net/a13085/article/details/82851302

版权

前后端交互专栏收录该内容

2 篇文章 0 订阅

订阅专栏

创建一个用于接收Ajax请求的Servlet

package com.ajaxAndJQ.servlet;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

// 这里使用了注解注册servlet 所以xml不用配置
@WebServlet("/HelloAjax")
public class HelloAjax extends HttpServlet {
   // 用于接收get请求
   protected void doGet(HttpServletRequest request, HttpServletResponse response)
           throws ServletException, IOException {
       System.out.println(request.getParameter("name") + ":发来一条get请求");
       response.setContentType("text/html;charset=utf-8");
       response.getWriter().write("get请求已收到");
   }

   // 用于接收post请求
   protected void doPost(HttpServletRequest request, HttpServletResponse response)
           throws ServletException, IOException {
       System.out.println(request.getParameter("name") + ":发来post请求");
       response.setContentType("text/html;charset=utf-8");
       response.getWriter().write("post请求已收到");
   }

}

创建一个jsp文件

<%@ page language="java" contentType="text/html; charset=UTF-8"
   pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>

   <h2>
       <a href="" οnclick="get()">点击使用Ajax发送get请求</a>
   </h2>
   <h2>
       <a href="" οnclick="post()">点击使用Ajax发送post请求</a>
   </h2>

   <script type="text/javascript">
       // 发送请求并获取返回的数据
       function get() {
           // 1 创建xmlhttprequest对象
           var request = ajaxFunction();
           // 2 发送请求参数1:选择发送方式参数2:发送地址(这里发送给一个Servlet) 参数3:是否异步传输(一般为true)
           request.open("GET", "/ajaxAndJQ/HelloAjax?name=hh", true);
           // 3 获取请求响应数据注册监听状态如果发生变化会执行等号右边的函数
           request.onreadystatechange = function() {

               //前半段表示已经能够正常处理。再判断状态码是否是200
               if (request.readyState == 4 && request.status == 200) {
                   //弹出响应的信息
                   alert(request.responseText);
               }
           }

           request.send();
       }


       // 发送post请求并获取返回的数据
       function post() {
           //1. 创建对象
           var request = ajaxFunction();

           //2. 发送请求
           request.open("POST", "/ajaxAndJQ/HelloAjax", true);

           //想获取服务器传送过来的数据，加一个状态的监听。
           request.onreadystatechange = function() {
               if (request.readyState == 4 && request.status == 200) {
                   alert("post：" + request.responseText);
               }
           }

           //如果使用的是post方式带数据，那么这里要添加头，说明提交的数据类型是一个经过url编码的form表单数据
           request.setRequestHeader("Content-type",
                   "application/x-www-form-urlencoded");

           //带数据过去，在send方法里面写表单数据。
           request.send("name=aobama");
       }

       //这个函数用于创建对象
       function ajaxFunction() {
           var xmlHttp;
           try { // Firefox, Opera 8.0+, Safari
               xmlHttp = new XMLHttpRequest();
           } catch (e) {
               try {// Internet Explorer
                   xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
               } catch (e) {
                   try {
                       xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                   } catch (e) {
                   }
               }
           }
           return xmlHttp;
       }
   </script>
</body>
</html>

使用谷歌浏览器运行结果如下

后端结果

一只空指针

关注

5
点赞
踩
30

收藏

觉得还不错? 一键收藏
1
评论
Ajax与Servlet交互一（原生JS）

创建一个用于接收Ajax请求的Servletpackage com.ajaxAndJQ.servlet;import java.io.IOException;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpSe...
复制链接

扫一扫