jsp学习笔记之Ajax异步更新（十二）
十二. Ajax
a. 简介：
AJAX = Asynchronous JavaScript and XML (异步的JavaScript和XML)。
Ajax不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。
b. 作用：
传统的网页(即不用ajax技术的网页)，想要更新内容或者提交一个表单 ，都需要重新加载整个网页。
使用ajax技术的网页，通过在后台服务器进行少量的数据交换，就可以实现异步局部更新。
增强B/S的体验性
例如：
- 注册时可以根据输入的账号密码判断用户是否存在
- 搜索引擎的搜索框：
等等。。。。。。
c. 实现方式：
首先引入js
js：
XMLHttpRequest对象
-
open(方法名(提交方式get|post),服务器地址,true)：
与服务器建立连接
-
send()：
- get: send(null)
- post: send(参数值)
-
setRequestHeader(header,value)：
-
get:不需要设置此方法
-
post:需要设置:
a. 如果请求元素中包含了文件上传 :setRequestHeader(”Content-Type", “multipart/ form-data”)b. 不包含了文件上传: (”Content-Type“，”application/ x-www- form-urlencoded" )
-
XMLHttpRequest的属性
onreadystatechange:回调函数
responsetext:响应格式为String
responseXML: 相应格式为XML
示例：
jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script type="text/javascript">
function register() {
var mobile = document.getElementById("mobile").value;
//通过ajax异步刷新，请求服务端，局部刷新页面
xmlHttpRequest = new XMLHttpRequest();
//设置回调函数
xmlHttpRequest.onreadystatechange = callback;
xmlHttpRequest.open("post","../../../mobile",true);
//设置post方式的头信息
xmlHttpRequest.setRequestHeader("Content-Type","application/x-Www-form-urlencoded");
xmlHttpRequest.send("mobile="+mobile);
}
function registerGet() {
var mobile = document.getElementById("mobile").value;
//通过ajax异步刷新，请求服务端，局部刷新页面
xmlHttpRequest = new XMLHttpRequest();
//设置回调函数
xmlHttpRequest.onreadystatechange = callback;
xmlHttpRequest.open("get","../../../mobile?mobile="+mobile,true);
//get方式不需要头信息
xmlHttpRequest.send(null);
}
function callback() {
if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
//接收服务端返回的数据
var data = xmlHttpRequest.responseText;
if (data == "true") {
alert("此号码已存在");
} else {
alert("注册成功");
}
}
}
</script>
</head>
<body>
手机：<input id="mobile" >
post:<input type="button" value="注册" onclick="register()">
get:<input type="button" value="注册" onclick="registerGet()">
</body>
</html>
@WebServlet("/mobile")
public class MobileServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("utf-8");
resp.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=UTF-8");
String mobile = req.getParameter("mobile");
//假设数据库中只有这一个号码：18888888888
System.out.println("1");
PrintWriter out = resp.getWriter();
if ("18888888888".equals(mobile)) {
out.write("true");//servlet以输出流方式将信息返给客户端
} else {
out.write("false");
}
out.close();
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doGet(req, resp);
}
}
jquery：（推荐）
a. 格式
$.ajax( {
url:服务器地址,
请求方式:get | post,
data:请求数据，
success: function (result,testStatus){
}，
error: function(xhr,erroeMessage) {
});
上面的可以调动位置不影响
下面的get，post有固定位置不能调换
$.get(
服务器地址,
请求数据，
function(result){
},
预期返回值类型("xml"或"json"或"text")
);
$.post(
服务器地址,
请求数据，
function(result){
},
预期返回值类型("xml"或"json"或"text")
);
直接将服务端的返回值，加载到$(id)中
$(选择器id).load(
服务器地址,
请求数据，
function(result){（一般省略）
},
);
$.getJSON(
服务器地址,
JSON的请求数据， //格式为：{"a=": $a,"b=":$b}
function(result){
//这边返回的是JSON格式的，所以判断返回一样要是Json才能判断，
//例如//out.write("{\"msg\":\"true\"}");//Json格式
//判断：result.value == "true"
},
);
servlet
req.setCharacterEncoding("utf-8");
resp.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=UTF-8");
String mobile = req.getParameter("mobile");
//假设数据库中只有这一个号码：18888888888
System.out.println("1");
PrintWriter out = resp.getWriter();
if ("18888888888".equals(mobile)) {
//out.write("true");//servlet以输出流方式将信息返给客户端
out.write("{\"msg\":\"true\"}");//Json格式
} else {
//out.write("false");
out.write("{\"msg\":\"false\"}");//Json格式
}
out.close();
直接传json
- json中只有一个对象的情况
//json中只有一个对象的情况
$.getJSON(
"../../../json",
{"name":"zs","age":24},
function (result) {
//js通过eval()函数将返回值转为一个js能够识别的json对象
var jsonStudent = eval(result.stu1);
alert(jsonStudent.sname+".."+jsonStudent.sage);
}
);
- json中有多个对象的情况
//json中有多个对象的情况
$.getJSON(
"../../../json",
{"name":"zs","age":23},
function (result) {
//js通过eval()函数将返回值转为一个js能够识别的json对象
var json = eval(result);
$.each(json,function(i,element) {
alert(this.sname+"..."+this.sage);
});
}
);
jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script type="text/javascript" src="../../jquery-3.5.1.js"></script>
<script type="text/javascript">
/*function register() {
var mobile = document.getElementById("mobile").value;
//通过ajax异步刷新，请求服务端，局部刷新页面
xmlHttpRequest = new XMLHttpRequest();
//设置回调函数
xmlHttpRequest.onreadystatechange = callback;
xmlHttpRequest.open("post","../../../mobile",true);
//设置post方式的头信息
xmlHttpRequest.setRequestHeader("Content-Type","application/x-Www-form-urlencoded");
xmlHttpRequest.send("mobile="+mobile);
}*/
function registerGet() {
var mobile = document.getElementById("mobile").value;
//通过ajax异步刷新，请求服务端，局部刷新页面
xmlHttpRequest = new XMLHttpRequest();
//设置回调函数
xmlHttpRequest.onreadystatechange = callback;
xmlHttpRequest.open("get","../../../mobile?mobile="+mobile,true);
//get方式不需要头信息
xmlHttpRequest.send(null);
}
function callback() {
if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
//接收服务端返回的数据
var data = xmlHttpRequest.responseText;
if (data == "true") {
alert("此号码已存在");
} else {
alert("注册成功");
}
}
}
function register() {
var $mobile = $("#mobile").val();
/*$.ajax({
url:"../../../mobile",
type:"post",
data:"mobile="+$mobile,
success: function (result) {
if (result == "true") {
alert("账号已存在");
} else {
alert("注册成功");
}
},
error:function () {
alert("发生错误");
}
});*/
/* $.post(
"../../../mobile",
"mobile="+$mobile,
function(result){
if (result == "true") {
alert("账号已存在");
} else {
alert("注册成功");
}
},
"text"
);*/
$.getJSON(
"../../../mobile",
{"mobile=": $mobile},
function (result) {
if (result == "true") {
alert("账号已存在");
} else {
alert("注册成功");
}
}
);
}
function textJSON() {
//json中只有一个对象的情况
/* $.getJSON(
"../../../json",
{"name":"zs","age":24},
function (result) {
//js通过eval()函数将返回值转为一个js能够识别的json对象
var jsonStudent = eval(result.stu1);
alert(jsonStudent.sname+".."+jsonStudent.sage);
}
);*/
//json中有多个对象的情况
$.getJSON(
"../../../json",
{"name":"zs","age":23},
function (result) {
//js通过eval()函数将返回值转为一个js能够识别的json对象
var json = eval(result);
$.each(json,function(i,element) {
alert(this.sname+"..."+this.sage);
});
}
);
}
</script>
</head>
<body>
手机：<input id="mobile" >
post:<input type="button" value="注册" onclick="register()">
get:<input type="button" value="注册" onclick="registerGet()">
<span id="tip"></span><br>
测试JSON:<input type="button" value="测试JSON" onclick="textJSON()">
</body>
</html>
servlet
req.setCharacterEncoding("utf-8");
resp.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=UTF-8");
//String mobile = req.getParameter("mobile");
PrintWriter out = resp.getWriter();
Student stu1 = new Student();
stu1.setSname("zs");
stu1.setSage(23);
Student stu2 = new Student();
stu2.setSname("ls");
stu2.setSage(24);
Student stu3 = new Student();
stu3.setSname("ww");
stu3.setSage(25);
JSONObject json = new JSONObject();
json.put("stu1",stu1);
json.put("stu2",stu2);
json.put("stu3",stu3);
out.print(json);
out.close();
注意服务器输出json的时候用out.write范围不够，需要用out.print