Ajax
全称为：“Asynchronous JavaScript and XML”（异步 JavaScript 和 XML），使用 Ajax，可以无刷新状态更新页面，并且实现异步提交，提升了用户体验。
实例1:ajax环境搭建
新建ajax1.jsp
<%--
Created by IntelliJ IDEA.
User: 云
Date: 2021/4/16
Time: 18:46
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<%--ajax(Asynchornous JavaScript and XML) 异步JavaScript和XML
客户端与服务器同步交互
当客户端与服务器同步交互时是不能进行其他操作的,需要等待服务器的响应期间,客户端操作,用户被打断
客户端与服务器异步交互
当客户端与服务器进行异步交互时并不影响客户端操作,使用浏览器中XMLHttpRequest对象以服务器交互的
,服务器响应回来的内容也是交给XMLHttpRequest,再刷新页面时不会刷新
--%>
<script type="text/javascript">
function checkAccount(account) {
//创建XMLHttpRequest对象
var httpObj = new XMLHttpRequest();
//使用XMLHttpRequest对象
// httpObj.open("method,get/post",url,true,false)
httpObj.open("get", "${path}/ajax1?account=" + account, true);
httpObj.send();
//从XMLHttpRequest对象中取出响应的数据,当请求对象发送之后会触发onreadystatechange事件
httpObj.onreadystatechange = function () {
if (httpObj.readyState == 4 && httpObj.status == 200) {
document.getElementById("msgid").innerText = httpObj.responseText;
}
}
}
</script>
</head>
<body>
账号<input type="text" name="account" onblur="checkAccount(this.value)">
<span id="msgid"></span><br>
密码<input type="password" name="password">
</body>
</html>
新建Ajax1Servlet
package webPro2;
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(name = "ajax1",urlPatterns ="/ajax1")
public class Ajax1Servlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String account = req.getParameter("account");
resp.setContentType("text/html;charset=UTF-8");
PrintWriter out= resp.getWriter();
if(account.equals("admin")){
out.print("账号已存在");
}else{
out.print("√");
}
}
@Override
protected void doPost (HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String account = req.getParameter("account");
String age = req.getParameter("age");
System.out.println(account+":"+age);
resp.setContentType("text/html;charset=UTF-8");
PrintWriter out= resp.getWriter();
if(account.equals("admin")){
out.print("账号已存在");
}else{
out.print("√");
}
}
}
运行结果:
实例2：ajax的post请求
新建ajax2.jsp
<%--
Created by IntelliJ IDEA.
User: 云
Date: 2021/4/16
Time: 18:46
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<%--ajax(Asynchornous JavaScript and XML) 异步JavaScript和XML
客户端与服务器同步交互
当客户端与服务器同步交互时是不能进行其他操作的,需要等待服务器的响应期间,客户端操作,用户被打断
客户端与服务器异步交互
当客户端与服务器进行异步交互时并不影响客户端操作,使用浏览器中XMLHttpRequest对象以服务器交互的
,服务器响应回来的内容也是交给XMLHttpRequest,再刷新页面时不会刷新
--%>
<script type="text/javascript">
function checkAccount(account){
//创建XMLHttpRequest对象
var httpObj=new XMLHttpRequest();
//使用XMLHttpRequest对象
// httpObj.open("method,get/post",url,true/false)
httpObj.open("post","${path}/ajax1",true);
//在post方式中要设置请求头,内容提交格式为默认格式
httpObj.setRequestHeader("content-type","application/x-www-form-urlencoded");
httpObj.send("account="+account+"&age=10");
//从XMLHttpRequest对象中取出响应的数据,当请求对象发送之后会触发onreadystatechange事件
httpObj.onreadystatechange=function (){
if(httpObj.readyState==4&httpObj.status==200){
document.getElementById("msgid").innerText=httpObj.responseText;
}
}
}
</script>
</head>
<body>
<%--
enctype="multipart/form-data" 用于提交文件
enctype="application/x-www-form-urlencoded" 表单默认提交样式(键等于值)
--%>
账号<input type="text" name="account" onblur="checkAccount(this.value)">
<span id="msgid"></span><br>
密码<input type="password" name="password">
</body>
</html>
运行结果:
实例3： json概述以及异步查询
新建User类
package bean;
public class User2 {
private String name;
private int age;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
}
新建SearchUser
<%--
Created by IntelliJ IDEA.
User: 云
Date: 2021/4/16
Time: 20:33
To change this template use File | Settings | File Templates.
--%>
<%--异步查询,ajax的get请求--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script src="${path}/js/jquery.1.8.3.min.js"></script>
<script type="text/javascript">
function searchUser() {
var user = document.getElementById("userid").value;
var httpObj = new XMLHttpRequest();
httpObj.open("get", "${path}/ajax2?user=" + user, true);
httpObj.send();
//从XMLHttpRequest对象中取出响应的数据,当请求对象发送之后会触发onreadystatechange事件
httpObj.onreadystatechange = function () {
if (httpObj.readyState == 4 & httpObj.status == 200) {
//document.getElementById("showid").innerText=httpObj.responseText;
//var jsobj = httpObj.responseText;
var jsobj = $.parseJSON(httpObj.responseText);
document.getElementById("showid").innerText = jsobj.name + "::" + jsobj.age;
}
}
}
</script>
</head>
<body>
姓名<input type="text" id="userid" onkeydown="searchUser()">
<input type="button" value="查询" onclick="searchUser()">
<div id="showid">
</div>
</body>
</html>
新建Ajax2Servlet
package webPro2;
import bean.User2;
import com.google.gson.Gson;
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(name = "ajax2", urlPatterns = "/ajax2")
public class Ajax2Servlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//注意传入的是user
String name = req.getParameter("user");
resp.setContentType("text/html;charset=UTF-8");
PrintWriter out = resp.getWriter();
User2 user2 = new User2();
user2.setName(name);
user2.setAge(21);
/*
在java 语言与javaScript语言之间要进行数据交换
起初使用xml语言,由于此语言语法复杂,是重量级的.发展成json语言
json(javaScript Object Notation)轻量级的数据格式
导入gson包1.Ctrl+V 2.+libraries
*/
Gson gson = new Gson();
String s = gson.toJson(user2);
System.out.println(s);
out.print(s);
}
}
运行结果:
实例3：异步查询多条数据
新建SearchUsers.jsp
<%--
Created by IntelliJ IDEA.
User: 云
Date: 2021/4/16
Time: 20:33
To change this template use File | Settings | File Templates.
--%>
<%--异步查询--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script src="${path}/js/jquery.1.8.3.min.js"></script>
<script type="text/javascript">
function searchUser() {
var user = document.getElementById("userid").value;
var httpObj = new XMLHttpRequest();
httpObj.open("get", "${path}/ajax3?user=" + user, true);
httpObj.send();
//从XMLHttpRequest对象中取出响应的数据,当请求对象发送之后会触发onreadystatechange事件
httpObj.onreadystatechange = function () {
if (httpObj.readyState == 4 & httpObj.status == 200) {
//把jsobj格式的字符串解析为JavaScript对象
var jsobjs = $.parseJSON(httpObj.responseText);
var str = "";
for (i = 0; i < jsobjs.length; i++) {
str += jsobjs[i].name + ":" + jsobjs[i].age + "<br>"
}
document.getElementById("showid").innerHTML = str;
}
}
}
</script>
</head>
<body>
姓名<input type="text" id="userid" onkeydown="searchUser()">
<input type="button" value="查询">
<div id="showid">
</div>
</body>
</html>
新建Ajax3Servlet
package webPro2;
import bean.User2;
import com.google.gson.Gson;
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.ArrayList;
import java.util.List;
//异步查询多条数据
@WebServlet(name = "ajax3", urlPatterns = "/ajax3")
public class Ajax3Servlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//注意传入的是user
String name = req.getParameter("user");
resp.setContentType("text/html;charset=UTF-8");
PrintWriter out = resp.getWriter();
User2 user2 = new User2();
user2.setName(name);
user2.setAge(21);
User2 user3 = new User2();
user3.setName(name);
user3.setAge(22);
User2 user4 = new User2();
user4.setName(name);
user4.setAge(23);
User2 user5 = new User2();
user5.setName(name);
user5.setAge(24);
/*
在java 语言与javaScript语言之间要进行数据交换
起初使用xml语言,由于此语言语法复杂,是重量级的.发展成json语言
json(javaScript Object Notation)轻量级的数据格式
导入gson包1.Ctrl+V 2.+libraries
*/
List<User2> list = new ArrayList<>();
list.add(user2);
list.add(user3);
list.add(user4);
list.add(user5);
Gson gson = new Gson();
String s = gson.toJson(list);
System.out.println(s);
out.print(s);
}
}
运行结果：
实例4：jqueryajax
新建jqueryajax.jsp
<%--
Created by IntelliJ IDEA.
User: 云
Date: 2021/4/16
Time: 18:46
To change this template use File | Settings | File Templates.
--%>
<%--简写--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script type="text/javascript" src="${path}/js/jquery.1.8.3.min.js"></script>
<script type="text/javascript">
/*function checkAccount(account) {
$.get("${path}/ajax1",{account:account},function (res){
$("#msgid").html(res);
})
}*/
function checkAccount(account) {
$.post("${path}/ajax1", {account: account}, function (res) {
$("#msgid").html(res);
})
}
</script>
</head>
<body>
账号<input type="text" name="account" onblur="checkAccount(this.value)">
<span id="msgid"></span>
<br>
密码<input type="password" name="password">
</body>
</html>
```运行结果：
5388
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
