1. 原生JS实现异步请求
- 描述:原生JS的AJAX开发,通过XMLHttpRequest对象来完成异步发送请求和接受响应
- 步骤:
-
第一步:获取XMLHttpRequest对象
-
第二步:和服务器进行连接
-
第三步:发送请求数据
-
第四步:接受服务器响应
-
第五步:获取响应数据
```java 第一步:获取XMLHttpRequest对象 # 兼容大多数浏览器 var xhr = new XMLHttpRequest(); # 兼容IE6浏览器 var xhr = new ActiveXObject('Msxml2.XMLHTTP'); # 兼容IE5.5及以下版本 var xhr = new ActiveXObject('Mcrosoft.XMLHTTP'); 解决兼容性: function getXMLHttpRequest() { try { //解决大多数浏览器兼容问题 return new XMLHttpRequest(); } catch (e) { try { //解决IE6浏览器兼容问题 return new ActiveXObject('Msxml2.XMLHTTP'); } catch (e) { try { //解决IE5.5及以下版本兼容问题 return new ActiveXObject('Mcrosoft.XMLHTTP'); } catch (e) { console.log("你用的啥浏览器"); } } } } 第二步:和服务器进行连接 xhr.open('GET', '/xxxxxx.do', true); -----请求方式 -----请求资源 -----是否开启异步机制 第三步:发送请求数据 xhr.send(xxxxxxxxx); # GET请求 GET请求的参数拼接在url后面,通常设置xhr.send(null)可以解决火狐浏览器兼容性 # POST请求 第一步:设置请求头 xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 第二步:设置请求数据 xhr.send('username=root&password=root'); 第四步:接受服务器响应 -----事件:onreadystatechange 监听xhr对象的状态变化(五种状态) -----0:刚创建完xhr的对象 -----1:刚连接完服务器,但是没有发送请求 -----2:发送完请求,但服务器还没有做出响应 -----3:服务器已经做出响应,但还没有响应完成 -----4:服务器响应已经完成(一般监听此状态) -----xhr.readyState == 4 判断是否为4状态 -----xhr.status == 200 判断是否交互成功 状态码(200,404,500,302,304) 第五步:获取响应数据 -----var text = xhr.responseText; 获取纯文本(字符串) -----var xmlText = xhr.response.XML; 获取XML文本(document) ```
-
2. GET请求的TEXT交互
2.1 TextServlet.java
package zw.ajax.servlet;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
/**
* @ClassName TextServlet
* @Description 异步请求处理Servlet类
* @Author 周威
* @Date 2020-07-16 9:45
* @Version 1.0
**/
@WebServlet("/text")
public class TextServlet extends HttpServlet
{
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
//设置response缓冲区字符集
response.setCharacterEncoding("UTF-8");
//设置请求响应头
response.setHeader("Content-Type", "application/x-www-form-urlencoded");
//获取输出流
PrintWriter pw = response.getWriter();
//向客户端写数据
pw.println("Hello World");
//关闭流资源
pw.close();
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
}
}
2.2 index.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>测试</title>
<meta http-equiv="Content-Type" content="text/html;charsetr=utf-8"/>
<meta name="author" content="周威"/>
<script type="text/javascript">
//获取XMLHttpRequest对象(解决浏览器兼容问题)
function getXMLHttpRequest()
{
try
{
//解决大多数浏览器兼容问题
return new XMLHttpRequest();
}
catch (e)
{
try
{
//解决IE6浏览器兼容问题
return new ActiveXObject('Msxml2.XMLHTTP');
}
catch (e)
{
try
{
//解决IE5.5及以下版本兼容问题
return new ActiveXObject('Mcrosoft.XMLHTTP');
}
catch (e)
{
console.log("你用的啥浏览器");
}
}
}
}
function sendHandler()
{
//1.获得XMLHttpRequest对象
var xhr = getXMLHttpRequest();
//2.和服务器进行连接
xhr.open('GET', '${pageContext.request.contextPath}/text', true);
//3.发送请求数据
xhr.send(null);
//4.接受服务器响应
xhr.onreadystatechange = function()
{
//交互成功
if(xhr.status == 200 && xhr.readyState == 4)
{
//获取服务器返回字符串
let data = xhr.responseText;
//控制台打印输出字符串
console.log(data);
}
}
}
</script>
</head>
<body>
<%-- 通过按钮发送异步的GET请求 --%>
<button type="button" onClick="sendHandler()">发送请求</button>
</body>
</html>
2.3 运行结果
3. POST请求的TEXT交互
3.1 TextServlet.java
package zw.ajax.servlet;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
/**
* @ClassName TextServlet
* @Description 异步请求处理Servlet类
* @Author 周威
* @Date 2020-07-16 9:45
* @Version 1.0
**/
@WebServlet("/text")
public class TextServlet extends HttpServlet
{
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
//设置request和response缓冲区字符集
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
//获取请求参数
String data = request.getParameter("data");
//控制台打印请求字符串
System.out.println("data = " + data);
//设置请求响应头
response.setHeader("Content-Type", "application/x-www-form-urlencoded");
//获取输出流
PrintWriter pw = response.getWriter();
//向客户端写数据
pw.println(data);
//关闭流资源
pw.close();
}
}
3.2 index.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>测试</title>
<meta http-equiv="Content-Type" content="text/html;charsetr=utf-8"/>
<meta name="author" content="周威"/>
<script type="text/javascript">
//获取XMLHttpRequest对象(解决浏览器兼容问题)
function getXMLHttpRequest()
{
try
{
//解决大多数浏览器兼容问题
return new XMLHttpRequest();
}
catch (e)
{
try
{
//解决IE6浏览器兼容问题
return new ActiveXObject('Msxml2.XMLHTTP');
}
catch (e)
{
try
{
//解决IE5.5及以下版本兼容问题
return new ActiveXObject('Mcrosoft.XMLHTTP');
}
catch (e)
{
console.log("你用的啥浏览器");
}
}
}
}
function sendHandler()
{
//1.获得XMLHttpRequest对象
var xhr = getXMLHttpRequest();
//2.和服务器进行连接
xhr.open('POST', '${pageContext.request.contextPath}/text', true);
//3.发送请求数据
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('data=Hello World');
//4.接受服务器响应
xhr.onreadystatechange = function()
{
//交互成功
if(xhr.status == 200 && xhr.readyState == 4)
{
//获取服务器返回字符串
var data = xhr.responseText;
//控制台打印输出字符串
console.log(data);
}
}
}
</script>
</head>
<body>
<%-- 通过按钮发送异步的POST请求 --%>
<button type="button" onClick="sendHandler()">发送请求</button>
</body>
</html>
3.3 运行结果
4. GET请求的JSON交互
- 后台通过第三方fastjson-1.2.68.jar解析json数据
4.1 Student.java
package zw.ajax.domain;
import java.io.Serializable;
import java.util.Date;
/**
* @ClassName Student
* @Description 学生实体类
* @Author 周威
* @Date 2020-07-16 11:07
* @Version 1.0
**/
public class Student implements Serializable
{
private String name;
private Integer age;
private String sex;
private Date birthday;
public String getName()
{
return name;
}
public void setName(String name)
{
this.name = name;
}
public Integer getAge()
{
return age;
}
public void setAge(Integer age)
{
this.age = age;
}
public String getSex()
{
return sex;
}
public void setSex(String sex)
{
this.sex = sex;
}
public Date getBirthday()
{
return birthday;
}
public void setBirthday(Date birthday)
{
this.birthday = birthday;
}
@Override
public String toString()
{
return "Student{" +
"name='" + name + '\'' +
", age=" + age +
", sex='" + sex + '\'' +
", birthday=" + birthday +
'}';
}
}
4.2 JsonServlet.java
package zw.ajax.servlet;
import com.alibaba.fastjson.JSON;
import zw.ajax.domain.Student;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Date;
/**
* @ClassName JsonServlet
* @Description 异步请求处理Servlet类
* @Author 周威
* @Date 2020-07-16 9:45
* @Version 1.0
**/
@WebServlet("/json")
public class JsonServlet extends HttpServlet
{
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
//创建一个student对象
Student student = new Student();
student.setName("tom");
student.setAge(20);
student.setSex("男");
student.setBirthday(new Date());
//设置response缓冲字符集
response.setCharacterEncoding("UTF-8");
//响应json字符串
PrintWriter pw = response.getWriter();
pw.println(JSON.toJSONString(student));
pw.close();
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
}
}
4.3 index.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>测试</title>
<meta http-equiv="Content-Type" content="text/html;charsetr=utf-8"/>
<meta name="author" content="周威"/>
<script type="text/javascript">
//获取XMLHttpRequest对象(解决浏览器兼容问题)
function getXMLHttpRequest()
{
try
{
//解决大多数浏览器兼容问题
return new XMLHttpRequest();
}
catch (e)
{
try
{
//解决IE6浏览器兼容问题
return new ActiveXObject('Msxml2.XMLHTTP');
}
catch (e)
{
try
{
//解决IE5.5及以下版本兼容问题
return new ActiveXObject('Mcrosoft.XMLHTTP');
}
catch (e)
{
console.log("你用的啥浏览器");
}
}
}
}
function sendHandler()
{
//1.获得XMLHttpRequest对象
var xhr = getXMLHttpRequest();
//2.和服务器进行连接
xhr.open('GET', '${pageContext.request.contextPath}/json', true);
//3.发送请求数据
xhr.send(null);
//4.接受服务器响应
xhr.onreadystatechange = function()
{
//交互成功
if(xhr.status == 200 && xhr.readyState == 4)
{
//将服务器返回的json字符串转为json对象
var data = JSON.parse(xhr.responseText);
//控制台打印输出json对象
console.log(data);
}
}
}
</script>
</head>
<body>
<%-- 通过按钮发送异步的GET请求 --%>
<button type="button" onClick="sendHandler()">发送请求</button>
</body>
</html>
4.4 运行结果
5. POST请求的JSON交互
- 后台通过第三方fastjson-1.2.68.jar解析json数据
5.1 Student.java
package zw.ajax.domain;
import java.io.Serializable;
import java.util.Date;
/**
* @ClassName Student
* @Description 学生实体类
* @Author 周威
* @Date 2020-07-16 11:07
* @Version 1.0
**/
public class Student implements Serializable
{
private String name;
private Integer age;
private String sex;
private Date birthday;
public String getName()
{
return name;
}
public void setName(String name)
{
this.name = name;
}
public Integer getAge()
{
return age;
}
public void setAge(Integer age)
{
this.age = age;
}
public String getSex()
{
return sex;
}
public void setSex(String sex)
{
this.sex = sex;
}
public Date getBirthday()
{
return birthday;
}
public void setBirthday(Date birthday)
{
this.birthday = birthday;
}
@Override
public String toString()
{
return "Student{" +
"name='" + name + '\'' +
", age=" + age +
", sex='" + sex + '\'' +
", birthday=" + birthday +
'}';
}
}
5.2 JsonServlet.java
package zw.ajax.servlet;
import com.alibaba.fastjson.JSON;
import zw.ajax.domain.Student;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.ByteArrayOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.PrintWriter;
import java.util.Date;
/**
* @ClassName JsonServlet
* @Description 异步请求处理Servlet类
* @Author 周威
* @Date 2020-07-16 9:45
* @Version 1.0
**/
@WebServlet("/json")
public class JsonServlet extends HttpServlet
{
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
//设置request、response缓冲字符集
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
//获取请求的json字符串
String jsonText = readAsText(request.getInputStream(), "UTF-8");
//解析json字符串
Student student = JSON.parseObject(jsonText, Student.class);
System.out.println("student = " + student);
//响应json字符串
PrintWriter pw = response.getWriter();
pw.println(JSON.toJSONString(student));
pw.close();
}
//读取TCP Stream流
private String readAsText(InputStream is, String charset) throws IOException
{
ByteArrayOutputStream bo = new ByteArrayOutputStream(4096);
byte[] data = new byte[1024];
while (true)
{
int len = is.read(data);
// 连接已经断开
if(len < 0)
{
break;
}
// 数据未完
if(len == 0)
{
continue;
}
// 缓存起来
bo.write(data, 0, len);
// 上限, 最多读取16KB
if(bo.size() > 1024*16)
{
break;
}
}
return bo.toString(charset);
}
}
5.3 index.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>测试</title>
<meta http-equiv="Content-Type" content="text/html;charsetr=utf-8"/>
<meta name="author" content="周威"/>
<script type="text/javascript">
//获取XMLHttpRequest对象(解决浏览器兼容问题)
function getXMLHttpRequest()
{
try
{
//解决大多数浏览器兼容问题
return new XMLHttpRequest();
}
catch (e)
{
try
{
//解决IE6浏览器兼容问题
return new ActiveXObject('Msxml2.XMLHTTP');
}
catch (e)
{
try
{
//解决IE5.5及以下版本兼容问题
return new ActiveXObject('Mcrosoft.XMLHTTP');
}
catch (e)
{
console.log("你用的啥浏览器");
}
}
}
}
function sendHandler()
{
//1.获得XMLHttpRequest对象
var xhr = getXMLHttpRequest();
//2.和服务器进行连接
xhr.open('POST', '${pageContext.request.contextPath}/json', true);
//3.发送请求数据
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
let jsonObject = {name:"tom", age:100, sex:"男", birthday:new Date()};
let jsonText = JSON.stringify(jsonObject);
xhr.send(jsonText);
//4.接受服务器响应
xhr.onreadystatechange = function()
{
//交互成功
if(xhr.status == 200 && xhr.readyState == 4)
{
//将服务器返回的json字符串转为json对象
var data = JSON.parse(xhr.responseText);
//控制台打印输出json对象
console.log(data);
}
}
}
</script>
</head>
<body>
<%-- 通过按钮发送异步的POST请求 --%>
<button type="button" onClick="sendHandler()">发送请求</button>
</body>
</html>
5.4 运行结果
6. 文件异步上传
- 前台:通过FormData封装文件上传
- 后台:Servlet通过第三方commons-fileupload-1.4.jar和commons-io-2.7.jar进行文件的读写
6.1 FileServlet.java
package zw.ajax.servlet;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.apache.commons.io.FileUtils;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.*;
import java.util.List;
/**
* @ClassName FileServlet
* @Description 异步请求处理Servlet类
* @Author 周威
* @Date 2020-07-16 13:57
* @Version 1.0
**/
@WebServlet("/file")
public class FileServlet extends HttpServlet
{
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
doPost(request, response);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
boolean status = false;
try
{
//创建磁盘文件项工厂类
DiskFileItemFactory dfif = new DiskFileItemFactory();
//创建核心解析对象
ServletFileUpload up = new ServletFileUpload(dfif);
//解析request
List<FileItem> list = up.parseRequest(request);
for (FileItem fileItem : list)
{
if (fileItem.isFormField())
{
//普通表单域
}
else
{
//文件表单域
String fileName = fileItem.getName();
File file = new File("D://Idea//upload", fileName);
//进行文件读写操作
InputStream is = fileItem.getInputStream();
FileUtils.copyInputStreamToFile(is, file);
}
}
status = true;
}
catch (FileUploadException e)
{
e.printStackTrace();
status = false;
}
//进行响应
if(status)
{
response.setCharacterEncoding("UTF-8");
PrintWriter pw = response.getWriter();
pw.println("上传成功");
pw.close();
}
else
{
response.setCharacterEncoding("UTF-8");
PrintWriter pw = response.getWriter();
pw.println("上传失败");
pw.close();
}
}
}
6.2 index.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>测试</title>
<meta http-equiv="Content-Type" content="text/html;charsetr=utf-8"/>
<meta name="author" content="周威"/>
<script type="text/javascript">
//获取XMLHttpRequest对象(解决浏览器兼容问题)
function getXMLHttpRequest()
{
try
{
//解决大多数浏览器兼容问题
return new XMLHttpRequest();
}
catch (e)
{
try
{
//解决IE6浏览器兼容问题
return new ActiveXObject('Msxml2.XMLHTTP');
}
catch (e)
{
try
{
//解决IE5.5及以下版本兼容问题
return new ActiveXObject('Mcrosoft.XMLHTTP');
}
catch (e)
{
console.log("你用的啥浏览器");
}
}
}
}
function sendHandler()
{
//1.获得XMLHttpRequest对象
var xhr = getXMLHttpRequest();
//2.和服务器进行连接
xhr.open('POST', '${pageContext.request.contextPath}/file', true);
//3.发送请求数据
var data = new FormData();
data.append("file", document.getElementsByName("file")[0].files[0]);
xhr.send(data);
//4.接受服务器响应
xhr.onreadystatechange = function()
{
//交互成功
if(xhr.status == 200 && xhr.readyState == 4)
{
//获取服务器返回字符串
var data = xhr.responseText;
//控制台打印输出字符串
console.log(data);
}
}
}
</script>
</head>
<body>
<%-- 通过按钮发送异步的POST请求 --%>
<button type="button" onClick="sendHandler()">发送请求</button>
<input name="file" type="file"/>
</body>
</html>
6.3 运行结果