文章目录
AJAX请求详解
1、什么是AJAX
AJAX全称：Asynchronous JavaScript And XML(异步JavaScript和XML），是指一种创建交互式网页的网页开发技术。ajax是一种浏览器通过js异步发起请求，局部更新页面的技术。
2、原生的AJAX请求实例（正常开发不用，但是可以了解一下）
注意：客户端（浏览器）通过Ajax对服务器发起请求，如果要返回对象，需要将对象通过JSON转化为JSON字符串，再响应给客户端（浏览器）。
使用Ajax技术我们通常需要先创建XMLHttpRequest对象。
在JavaScript中代码如下：
const xmlhttprequest = new XMLHttpRequest();
使用Ajax向服务器发送请求，我们需要使用XMLHttpRequest对象的open()和send()方法。
| 方法 | 描述 |
|---|---|
| open(method,url,async) | method：规定请求的类型 url：规定请求的地址 async：规定是否异步处理请求 |
| send(string) | 将请求发送到服务器 string参数用于POST请求 |
如果要获取服务器的响应，则使用XMLHttpRequest对象的以下属性：
| 属性 | 描述 |
|---|---|
| responseText | 获取字符串形式的响应数据（适用于Json字符串） |
| responseXML | 获取XML形式的响应数据（适用于XML） |
这里，因为Ajax的请求是异步的，我们还得调用onreadystatechange监听函数进行判断（该函数在每次readyState属性改变时，触发onreadystatechange监听函数）。
那么，这个readyState是什么呢？请看下方表格(XMLHttpRequest对象的三个重要属性）：
| 属性 | 描述 |
|---|---|
| onreadystatechange() | 函数名，每当readyState属性改变时会自动调用 |
| readyState | 存放XMLHttpRequest对象的状态，从0——4变化 0:请求未初始化 1:服务器连接已建立 2:请求已接收 3:请求处理中 4:请求已完成，且响应已就绪 |
| status | 200：“OK” 404:未找到页面 |
为了更好地理解，这里，我们举一个把Person对象转化为Json字符串传给客户端并显示的案例。
显示，先写我们的Person对象：
package com.example.po;
public class Person {
private Integer id;
private String name;
public Person() {
}
public Person(Integer id, String name) {
this.id = id;
this.name = name;
}
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
@Override
public String toString() {
return "Person{" +
"id=" + id +
", name='" + name + '\'' +
'}';
}
}
然后写我们的Servlet程序：
BaseServlet.java:
package com.example.servlet;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.lang.reflect.Method;
public class BaseServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req,resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//解决post请求中文乱码问题
req.setCharacterEncoding("UTF-8");
resp.setContentType("text/html; charset=UTF-8");
String action = req.getParameter("action");
try {
// 获取action业务鉴别字符串，获取相应的业务 方法反射对象
Method method = this.getClass().getDeclaredMethod(action, HttpServletRequest.class, HttpServletResponse.class);
// 调用目标业务方法
method.invoke(this, req, resp);
} catch (Exception e) {
e.printStackTrace();
}
}
}
AjaxServlet.java:
package com.example.servlet;
import com.example.po.Person;
import com.google.gson.Gson;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
public class AjaxServlet extends BaseServlet{
protected void javaScriptAjax(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("成功接收到ajax请求。");
Person person = new Person(1,"张三");
//将对象（Bean）转化为JSON字符串
Gson gson = new Gson();
String personJsonStr = gson.toJson(person);
//将json字符串信息写到servlet程序下，供xmlhttprequest通过responseText获取
resp.getWriter().write(personJsonStr);
}
}
然后在web.xml中进行注册：
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
version="4.0">
<servlet>
<servlet-name>AjaxServlet</servlet-name>
<servlet-class>com.example.servlet.AjaxServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>AjaxServlet</servlet-name>
<url-pattern>/ajax</url-pattern>
</servlet-mapping>
</web-app>
再编写我们的html文件：
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>Ajax详解</title>
<script type="text/javascript">
// 在这里使用javaScript语言发起Ajax请求，访问服务器AjaxServlet中javaScriptAjax
function ajaxRequest() {
// 1、我们首先要创建XMLHttpRequest
let xmlhttprequest = new XMLHttpRequest();
/**
* 2、调用open方法设置请求参数
* 第一个参数是请求的方法("GET"、"POST")
* 第二个参数是请求的地址
* 第三个参数一般是true，表示是否异步
*/
xmlhttprequest.open("GET","http://localhost:8080/Ajax/ajax?action=javaScriptAjax",true);
// 3、在send方法前绑定onreadystatechange事件，处理请求完成后的操作。
// 这里xmlhttprequest.readyState == 4 表示
xmlhttprequest.onreadystatechange = function(){
if (xmlhttprequest.readyState == 4 && xmlhttprequest.status == 200) {
alert("收到服务器返回的数据：" + xmlhttprequest.responseText);
let jsonObj = JSON.parse(xmlhttprequest.responseText);
// 把响应的数据显示在页面上
document.getElementById("div01").innerHTML = "编号：" + jsonObj.id + " , 姓名：" + jsonObj.name;
}
}
// 4、调用send方法发送请求
xmlhttprequest.send();
}
</script>
</head>
<body>
<button onclick="ajaxRequest()">触发ajax请求</button>
<div id="div01"></div>
</body>
</html>
这里有一个知识点，其实就是我们把读取到的信息(Person的信息）写到Servlet下，可以访问地址http://localhost:8080/Ajax/ajax?action=javaScriptAjax 查看里面的内容如下（往上提供的很多接口也是以这种形式给的）：
然后，读取到的信息就被xmlhttprequest对象接收，又因为是Json字符串形式，所以保存在它的responseText属性中。
我们只需要将这个字符串重新还原为JSON的格式，就可以将里面的数据一一取出啦！看下边：
//将Json字符串转化为Json对象
let jsonObj = JSON.parse(xmlhttprequest.responseText);
// 把响应的数据显示在页面上
document.getElementById("div01").innerHTML = "编号：" + jsonObj.id + " , 姓名：" + jsonObj.name;
3、jQuery的ajax方法（较常用）
使用jQuery的$.ajax方法，参数：
| 参数 | 描述 |
|---|---|
| url | 表示请求的地址 |
| type | 表示请求的类型GET或POST请求 |
| data | 表示发送给服务器的数据 格式一：name1=value1&name2=value2 格式二：{key1:value1,key2:value2} |
| success | 请求成功，响应的回调函数 |
| dataType | 响应的数据类型（常用的有三个 text：纯文本； xml：xml数据 json：json对象） |
来一个演示的案例：
现在AjaxServlet.java中添加我们的方法：
protected void jQueryAjax(HttpServletRequest req, HttpServletResponse resp) throws IOException {
System.out.println("成功调用方法jQueryAjax");
Person person = new Person(1,"张三");
//将对象（Bean）转化为JSON字符串
Gson gson = new Gson();
String personJsonStr = gson.toJson(person);
//将读取的json字符串信息写到servlet程序下，供xmlhttprequest通过responseText获取
resp.getWriter().write(personJsonStr);
}
然后写一个网页jQuery_ajax.html用来调用我们的Servlet，实现jQuery的ajax。
这里需要特别注意的是：
导入jquery的时候，src="./…"最前面的 ./ 最好加进去，否则可能会报404错误。
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>jQuery_Ajax案例</title>
<script type="text/javascript" src="./script/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function (){
//ajax请求
$("#ajaxBtn").click(function (){
//下面的url加起来其实就是之前的http://localhost:8080/Ajax/ajax?action=jQueryAjax
$.ajax({
//http://ip:端口号/工程名/Servlet程序名(根据web.xml中定义的来)
url:"http://localhost:8080/Ajax/ajax",
//等价于?action=jQueryAjax
data:{action:"jQueryAjax"},
type:"GET",
//这里的data其实就是请求到的参数
success:function (data){
// .html等价于 innerHTML
$("#msg").html("编号:"+data.id+", 姓名:"+data.name);
},
//这里使用json，他会自动帮我们转换成json类型，就不需要我们再用JSON.parse()去解析啦
dataType:"json"
});
});
});
</script>
</head>
<body>
<div>
<button id="ajaxBtn">.ajax请求</button>
</div>
<div id="msg"></div>
</body>
</html>
运行结果：
点击按钮后，会把Person信息显示出来。
4、jQuery的get和post方法（可用来替代ajax方法）
使用jQuery的 $.get 和 $.post 方法取代$.ajax ，参数（使用get方法就是.ajax的type=get，使用post方法就是 .ajax的type=post）：
| 参数 | 描述 |
|---|---|
| url | 表示请求的地址 |
| data | 表示发送给服务器的数据 格式一：name1=value1&name2=value2 格式二：{key1:value1,key2:value2} |
| success | 请求成功，响应的回调函数 |
| datatype | 响应的数据类型（常用的有三个 text：纯文本； xml：xml数据 json：json对象） |
实例：
先在AjaxServlet.java中添加两个方法如下：
protected void jQueryGet(HttpServletRequest req, HttpServletResponse resp) throws IOException {
System.out.println("成功调用方法jQueryGet");
Person person = new Person(2,"李四");
//将对象（Bean）转化为JSON字符串
Gson gson = new Gson();
String personJsonStr = gson.toJson(person);
//将读取的json字符串信息写到servlet程序下，供xmlhttprequest通过responseText获取
resp.getWriter().write(personJsonStr);
}
protected void jQueryPost(HttpServletRequest req, HttpServletResponse resp) throws IOException {
System.out.println("成功调用方法jQueryPost");
Person person = new Person(3,"王五");
//将对象（Bean）转化为JSON字符串
Gson gson = new Gson();
String personJsonStr = gson.toJson(person);
//将读取的json字符串信息写到servlet程序下，供xmlhttprequest通过responseText获取
resp.getWriter().write(personJsonStr);
}
然后在修改html文件为：
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>jQuery_Ajax案例</title>
<script type="text/javascript" src="./script/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function (){
//ajax请求
$("#ajaxBtn").click(function (){
//下面的url加起来其实就是之前的http://localhost:8080/Ajax/ajax?action=jQueryAjax
$.ajax({
//http://ip:端口号/工程名/Servlet程序名(根据web.xml中定义的来)
url:"http://localhost:8080/Ajax/ajax",
//等价于?action=jQueryAjax
data:{action:"jQueryAjax"},
type:"GET",
//这里的data其实就是请求到的参数
success:function (data){
// .html等价于 innerHTML
$("#msg").html("编号:"+data.id+", 姓名:"+data.name);
},
//这里使用json，他会自动帮我们转换成json类型，就不需要我们再用JSON.parse()去解析啦
dataType:"json"
});
});
$("#getBtn").click(function (){
$.get({
url:"http://localhost:8080/Ajax/ajax",
data:{
action: "jQueryGet"
},
success:function (data){
$("#msg").html("编号:"+data.id+", 姓名:"+data.name);
},
dataType:"json"
});
});
$("#postBtn").click(function (){
$.post({
url:"http://localhost:8080/Ajax/ajax",
data:{
action: "jQueryPost"
},
success:function (data){
$("#msg").html("编号:"+data.id+", 姓名:"+data.name);
},
dataType:"json"
});
});
});
</script>
</head>
<body>
<div>
<button id="ajaxBtn">.ajax请求</button>
<button id="getBtn">.get请求</button>
<button id="postBtn">.post请求</button>
</div>
<div id="msg"></div>
</body>
</html>
运行结果：
点击三个按钮，分别显示：
jQuery还有一个getJSON方法（其实就是ajax方法的type固定为get，然后dataType固定为json，其他用法一样。）
代码：
在Servlet中添加方法：
protected void jQueryGetJson(HttpServletRequest request,HttpServletResponse response) throws IOException {
System.out.println("成功调用方法jQueryPost");
Person person = new Person(4,"刘六");
//将对象（Bean）转化为JSON字符串
Gson gson = new Gson();
String personJsonStr = gson.toJson(person);
//将读取的json字符串信息写到servlet程序下，供xmlhttprequest通过responseText获取
response.getWriter().write(personJsonStr);
}
在html中添加：
$("#getJsonBtn").click(function (){
$.getJSON({
url:"http://localhost:8080/Ajax/ajax",
data:{
action: "jQueryGetJson"
},
success:function (data){
console.log("getJsonFunction:",data);
$("#msg").html("编号:"+data.id+", 姓名:"+data.name);
}
})
})
<button id="getJsonBtn">.getJson请求</button>
5、jQuery的serialize方法（表单序列化）
serialize方法可以把表单中所有表单项的内容都获取到，并以name=value&name=value的形式进行拼接。
演示代码：
首先写html，在body标签下添加：
<form id="myForm">
用户名：<input type="text" name="username"/><br>
密 码：<input type="password" name="password"><br>
单选：
<select name="single">
<option value="single1">单选1</option>
<option value="single2">单选2</option>
</select>
<br>
多选：<br>
<select name="multiple" multiple="multiple">
<option value="Multiple1" selected>Multiple1</option>
<option value="Multiple2">Multiple2</option>
<option value="Multiple3" selected>Multiple3</option>
</select>
</form>
<button id="submit">提交</button>
<div id="submitMsg"></div>
然后在head标签下添加：
<head>
<meta charset="UTF-8">
<title>jQuery_Ajax案例</title>
<script type="text/javascript" src="./script/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function (){
$("#submit").click(function (){
$.getJSON({
url:"http://localhost:8080/Ajax/ajax",
data: "action=jQuerySerialize&"+$("#myForm").serialize()
})
})
});
</script>
</head>
运行后，点击以下按钮：
我们就可以在服务器端接收到所有的表单项啦！
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
