创建一个用于接收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>
使用谷歌浏览器运行 结果如下
后端结果