一，AJAX概念
Jesse James Garrett于2005年创造了一个术语，它本身不是一种技术，而是异步JavaScript + XML，它描述了一种将多种现有技术 (包括HTML或XHTML，级联样式表，JavaScript，文档对象模型，XML，XSLT，最重要的是XMLHttpRequest对象。)
JSON和XML都用于在Ajax模型中打包信息。
1，XMLHttpRequest对象的属性
2、XMLHttpRequest对象的方法
XMLHttpRequest支持同步和异步通信。但是，一般而言，出于性能方面的考虑，异步请求应比同步请求优先。
如果使用异步方法XMLHttpRequest，则在收到数据后会收到回调。这样，在处理您的请求时，浏览器就可以继续正常运行。
二、案例演示——不加载整个页面局部刷新内容
步骤：
1、创建Web项目AjaxDemo
2、修改Web项目首页文件index.jsp
3、在web目录创建子目录data，在里面创建userlist.txt文件
4、在web目录创建getUserList.html页面
可将监听状态语句放在发送请求之后：
项目目录：
好吧，文章是补写的然后就是会有其他项目，但是后面会有代码的！！！！！！！
1、创建Web项目AjaxDemo
2、修改Web项目首页文件index.jsp
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h3>
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
</h3>
</body>
</html>
这个代码没什么用就是看的，然后我就。。。。。。。。
3、在web目录创建子目录data，在里面创建userlist.txt文件
01 王昭君 127839473892<br/>
02 李白 128739184787<br/>
03 韩信 1213897247383<br/>
04 小鲁班 18243857548232<br/>
05 孙尚香 1928349239759<br/>
4、在web目录创建getUserList.html页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取用户列表</title>
<script>
function loadUserList() {
// 声明请求对象
var xmlhttp;
// 实例化请求对象
if (window.XMLHttpRequest) {
// IE7+， Firefox, Chrome, Opera, Safari浏览器里执行代码
xmlhttp = new XMLHttpRequest();
} else {
// IE5， IE6 浏览器里执行代码
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
// 监听请求状态变化，一旦有变化，执行相应的回调函数
xmlhttp.onreadystatechange = function () {
// 判断请求是否成功，响应是否完成
if (xmlhttp.status == 200 && xmlhttp.readyState == 4) {
// 利用响应文本修改页面元素内容
document.getElementById("users").innerHTML = xmlhttp.responseText;
}
}
// 新建HTTP请求，采用GET方式，请求采用异步方式
xmlhttp.open("GET", "/AjaxDemo/data/userlist.txt", true);
// 发送HTTP请求，不传递参数
xmlhttp.send(null);
}
</script>
</head>
<body>
<h3>用户列表</h3>
<div id="users"></div>
<hr>
<button type="button" οnclick="loadUserList()">获取用户列表</button>
</body>
</html>
5、启动服务器，查看运行效果
当点击获取用户列表时会弹出内容：
此时，重启服务器，就无法获取用户列表，应该如何修改代码呢？
三、案例演示——利用AJAX实现登录功能
1、在web目录里创建login.html页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户登录</title>
<script>
function login() {
// 获取用户名与密码
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
// 声明请求对象
var xmlhttp;
// 实例化请求对象
if (window.XMLHttpRequest) {
// IE7+， Firefox, Chrome, Opera, Safari浏览器里执行代码
xmlhttp = new XMLHttpRequest();
} else {
// IE5， IE6 浏览器里执行代码
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
// 监听请求状态变化，一旦有变化，执行相应的回调函数
xmlhttp.onreadystatechange = function () {
// 判断请求是否成功，响应是否完成
if (xmlhttp.status == 200 && xmlhttp.readyState == 4) {
// 根据返回值不同跳转不同的页面
if (xmlhttp.responseText == "success") {
// 跳转到登录成功页面，传递用户名
window.location = "success.html?username=" + username;
} else {
// 跳转到登录失败页面，传递用户名
window.location = "failure.html?username=" + username;
}
}
}
// 新建HTTP请求，采用POST方式，请求采用异步方式
xmlhttp.open("POST", "/AjaxDemo/login", true); //大家可以看到，AJAX提交的数据是交给login来处理，其实login是一个Servlet的url。
// 设置请求头
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
// 定义要传递的数据
var data = "username=" + encodeURIComponent(username) + "&password=" + encodeURIComponent(password);
// 发送请求，传递数据
xmlhttp.send(data);
}
function reset() {
// 清空用户名与密码数据
document.getElementById("username").value = "";
document.getElementById("password").value = "";
}
</script>
</head>
<body>
<h3 style="text-align: center">用户登录</h3>
<table border="1" cellpadding="10" style="margin: 0px auto">
<tr>
<td align="center">用户名</td>
<td><input type="text" id="username"></td>
</tr>
<tr>
<td align="center">密 码</td>
<td><input type="password" id="password"></td>
</tr>
<tr align="center">
<td colspan="2">
<button type="button" οnclick="login()">登录</button>
<button type="button" οnclick="reset()">重置</button>
</td>
</tr>
</table>
</body>
</html>
利用AJAX传递数据到服务器端，服务器端拿到数据之后进行处理，处理完之后返回数据（success和failure），AJAX拿到服务器端返回的数据（success或failure），根据不同返回值跳转到不同页面。
2、在src里创建net.wlq.servlet包，在里面创建LoginServlet
package net.wlq.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;
/**
* 功能：登录处理控制器
* 作者：华卫
* 日期：2019年11月25日
*/
@WebServlet(name = "LoginServlet", value = "/login")
public class LoginServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// 设置请求对象字符编码
request.setCharacterEncoding("utf-8");
// 获取AJAX提交的登录数据
String username = request.getParameter("username");
String password = request.getParameter("password");
// 判断是否登录成功，返回不同的数据
PrintWriter out = response.getWriter();
if (username.equals("无心剑") && password.equals("903213")) {
out.print("success");
} else {
out.print("failure");
}
}
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
}
}
3、创建登录成功页面success.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录成功</title>
</head>
<body>
<h3><span id="username"></span>，恭喜，登录成功！</h3>
<script>
var url = decodeURI(document.URL); // http://localhost:8080/AjaxDemo/success.html?username=无心剑
var strQuery = url.split("?")[1]; // username=无心剑
var pair = strQuery.split("="); // [username,无心剑]
var username = pair[1]; // 无心剑
document.getElementById("username").innerText = username;
</script>
</body>
</html>
4、创建登录失败页面failure.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录失败</title>
</head>
<body>
<h3><span id="username"></span>，遗憾，登录失败！</h3>
<script>
var url = decodeURI(document.URL); // http://localhost:8080/AjaxDemo/success.html?username=无心剑
var strQuery = url.split("?")[1]; // username=无心剑
var pair = strQuery.split("="); // [username,无心剑]
var username = pair[1]; // 无心剑
document.getElementById("username").innerText = username;
</script>
</body>
</html>
5、启动服务器，查看运行效果
6、小结
采用AJAX，前端与后台只是交换数据，前端通过AJAX提交数据给后台，后台接收到数据进行相应处理，返回数据给前端，前端AJAX拿到后台返回的数据，根据数据不同进行页面的跳转，不像以前是后台来执行页面的跳转（通过重定向或同一请求转发）。
readyState一共有5种取值：
- 0：请求没有发出（在调用open()函数之前）
1：请求已经建立但还没有发出（在调用send()函数之前）
2：请求已经发出正在处理之中（这里通常可以从响应得到内容头部）
3：请求已经处理，正在接收服务器的信息，响应中通常有部分数据可用，但是服务器还没有完成响应。
4：响应已完成，可以访问服务器响应并使用它。
可以在官方去了解：点击这里去了解AJAX，这是官网，希望对你们有帮助！！！！！！！！
扫一扫
1355
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
