什么是 AJAX ？
AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。
原生js实现Ajax
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function fun() {
//发送异步请求
//1.创建核心对象
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//2.建立连接
/*open(method,url,async):
method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）
*/
xmlhttp.open("GET","ajaxServlet?username=lisan",true);
//3.发送请求
/*
* send(string)
* string仅用于 POST 请求
* 在以下情况中，请使用 POST 请求：
1.无法使用缓存文件（更新服务器上的文件或数据库）
2.向服务器发送大量数据（POST 没有数据量限制）
3.发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
* */
xmlhttp.send();
//4.接受并处理服务器的响应结果
//获取方式：xmlhttp.responseText
xmlhttp.onreadystatechange=function()
{
//判断readyState就绪状态是否为4，status响应状态码是否为200
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//获取服务器响应结果
var responseText = xmlhttp.responseText;
alert(responseText);
}
}
}
</script>
</head>
<body>
<input value="发送异步请求" type="button" onclick="fun()" >
<input type="text">
</body>
</html>
servlet 代码
package com.day08.web.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;
@WebServlet("/ajaxServlet")
public class AjaxServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1.获取请求参数
String username = request.getParameter("username");
//处理业务逻辑
try {
Thread.sleep(5000);
} catch (InterruptedException e) {
e.printStackTrace();
}
//2.打印username
System.out.println(username);
//3.响应
response.getWriter().write("hello:"+username);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
}
JQuery实现ajax
- 注意 要导入 jquery-3.3.1.min.js
使用$.ajax()发送请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
function fun() {
//使用$.ajax()发送请求
$.ajax({
url:"ajaxServlet",//请求路径
type:"POST",//请求方式，默认为GET
//data:"username=lisi&age=23",
data:{"username":"lisi","age":23},//请求参数，两种方式
success:function (data) {
alert(data);
},//响应成功后的回调函数
error:function () {
alert("出错啦...")
},//表示如果请求响应出现错误，会执行的回调函数
dataType:"text"//设置接受到的响应数据的格式
});
}
</script>
</head>
<body>
<input value="发送异步请求" type="button" onclick="fun()" >
<!--<input type="text">-->
</body>
</html>
$.get()：发送get请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
function fun() {
/*
$.get()：发送get请求
* 语法：$.get(url, [data], [callback], [type])
* 参数：
* url：请求路径
* data：请求参数
* callback：回调函数
* type：响应结果的类型
*/
$.get("ajaxServlet",{username:"jok"},function (data) {
alert(data);
},"text")
}
</script>
</head>
<body>
<input value="发送异步请求" type="button" onclick="fun()" >
<!--<input type="text">-->
</body>
</html>
$.post()：发送post请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
function fun() {
/*
3. $.post()：发送post请求
* 语法：$.post(url, [data], [callback], [type])
* 参数：
* url：请求路径
* data：请求参数
* callback：回调函数
* type：响应结果的类型
* */
$.post("ajaxServlet",{username:"jok-post"},function (data) {
alert(data);
},"text")
}
</script>
</head>
<body>
<input value="发送异步请求" type="button" onclick="fun()" >
<!--<input type="text">-->
</body>
</html>
