1. 利用JQ实现异步请求
$.ajax({
method:'POST',
url:'xxxxxx.do',
data:'username=tom&password=123',
success:function(data){
},
error:function(error){
}
});
2. GET请求的Text交互
- jQuery-min.js提供ajax异步访问方法
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;
@WebServlet("/text")
public class TextServlet extends HttpServlet
{
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
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="周威"/>
<%-- 引入jQuery --%>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jQuery-min.js"></script>
<script type="text/javascript">
function sendHandler()
{
$.ajax({
// 设置请求方式
method:'GET',
// 设置请求地址
url:'${pageContext.request.contextPath}/text',
// 请求成功回调
success:function(data){
// 控制台打印输出
console.log(data);
}
});
}
</script>
</head>
<body>
<%-- 通过按钮发送异步的GET请求 --%>
<button type="button" onClick="sendHandler()">发送请求</button>
</body>
</html>
2.3 运行结果
3. POST请求的Text交互
- jQuery-min.js提供ajax异步访问方法
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;
@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.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="周威"/>
<%-- 引入jQuery --%>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jQuery-min.js"></script>
<script type="text/javascript">
function sendHandler()
{
$.ajax({
// 设置请求方式
method:'POST',
// 设置请求地址
url:'${pageContext.request.contextPath}/text',
// 设置请求参数
data:'data=Hello World',
// 请求成功回调
success:function(data){
// 控制台打印输出
console.log(data);
}
});
}
</script>
</head>
<body>
<%-- 通过按钮发送异步的POST请求 --%>
<button type="button" onClick="sendHandler()">发送请求</button>
</body>
</html>
3.3 运行结果
4. GET请求的JSON交互
- 前台:
- jQuery-min.js提供ajax异步访问方法
- jQuery-json.js提供json字符串转json对象,json对象转json字符串
- 后台:
- fastjson-1.2.68.jar进行json数据的解析
4.1 Student.java
package zw.ajax.domain;
import java.io.Serializable;
import java.util.Date;
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.ByteArrayOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.PrintWriter;
import java.util.Date;
@WebServlet("/json")
public class JsonServlet extends HttpServlet
{
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
Student student = new Student();
student.setName("tom");
student.setAge(20);
student.setSex("男");
student.setBirthday(new Date());
response.setCharacterEncoding("UTF-8");
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="周威"/>
<%-- 引入jQuery --%>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jQuery-min.js"></script>
<%-- 引入jQuery-json --%>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jQuery-json.js"></script>
<script type="text/javascript">
function sendHandler()
{
$.ajax({
// 设置请求方式
method:'GET',
// 设置请求地址
url:'${pageContext.request.contextPath}/json',
// 请求成功回调
success:function(data){
// 控制台打印输出
console.log($.parseJSON(data));
}
});
}
</script>
</head>
<body>
<%-- 通过按钮发送异步的GET请求 --%>
<button type="button" onClick="sendHandler()">发送请求</button>
</body>
</html>
4.4 运行结果
5. POST请求的JSON交互
- 前台:
- jQuery-min.js提供ajax异步访问方法
- jQuery-json.js提供json字符串转json对象,json对象转json字符串
- 后台:
- fastjson-1.2.68.jar进行json数据的解析
5.1 Student.java
package zw.ajax.domain;
import java.io.Serializable;
import java.util.Date;
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;
@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.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
String jsonText = readAsText(request.getInputStream(), "UTF-8");
Student student = JSON.parseObject(jsonText, Student.class);
System.out.println("student = " + student);
PrintWriter pw = response.getWriter();
pw.println(JSON.toJSONString(student));
pw.close();
}
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);
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="周威"/>
<%-- 引入jQuery --%>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jQuery-min.js"></script>
<%-- 引入jQuery-json --%>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jQuery-json.js"></script>
<script type="text/javascript">
function sendHandler()
{
// 定义一个json对象
let jsonObject = {name:"tom", age:100, sex:"男", birthday:new Date()};
$.ajax({
// 设置请求方式
method:'POST',
// 设置请求地址
url:'${pageContext.request.contextPath}/json',
// 设置请求参数
data:$.toJSON(jsonObject),
// 请求成功回调
success:function(data){
// 控制台打印输出
console.log($.parseJSON(data));
}
});
}
</script>
</head>
<body>
<%-- 通过按钮发送异步的POST请求 --%>
<button type="button" onClick="sendHandler()">发送请求</button>
</body>
</html>
5.4 运行结果
6. 文件异步上传
- 前台:
- jQuery-min.js提供ajax异步访问方法
- FormData对象封装文件进行提交
- 后台:
- 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;
@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);
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="周威"/>
<%-- 引入jQuery --%>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jQuery-min.js"></script>
<script type="text/javascript">
function sendHandler()
{
// 获取文件
var data = new FormData();
data.append("file", $('[name="file"]')[0].files[0]);
$.ajax({
// 设置请求方式
method:'POST',
// 设置请求地址
url:'${pageContext.request.contextPath}/file',
// 设置请求头
contentType: false,
processData: false,
// 设置请求参数
data:data,
// 请求成功回调
success:function(data){
// 控制台打印输出
console.log(data);
}
});
}
</script>
</head>
<body>
<%-- 通过按钮发送异步的POST请求 --%>
<button type="button" onClick="sendHandler()">发送请求</button>
<%-- 表单文件域 --%>
<input type="file" name="file"/>
</body>
</html>
6.3 运行结果