Ajax&json
一. 概念
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）
效果
无刷新：
只更新部分页面；
有效利用带宽；
提供连续的用户体验；
提供类似C/S的交互效果；
传统Web和Ajax的差异
get请求和post请求的区别
二.ajax前端验证
//验证用户名是否已经注册
<script type="text/javascript">
$(function(){
//失去焦点
$("#userName").blur(function(){
var userName = $(this).val();
$.ajax({
type:"post",
url:"/userServlet?option=register",
data:"userName="+userName;
success:function(rs){
if("1"==rs){
$("#fail").text("用户名已存在")
$("#success").text("")
}else{
$("#success").text("用户名可以使用")
$("#fail").text("")
}
},
error:function(error){
alert(error);
}
});
});
});
</script>
三.JSON
JavaScript Object Notation
一种轻量级的数据交换格式
采用独立与语言的文本格式‘
通常用于在客户端和服务器之间传递数据
优点
轻量级交互语言
结构简单
易于解析
解析JSON对象
var JSON对象 ={"name":value,"name":value,...}
var person = {"name":"张三","age":30,"spouse":null}
<body>
<div>
姓名:<span id="name"></span><br/>
年龄:<span id="age"></span><br/>
成绩:<span id="score"></span><br/>
电话:<span id="phone"></span><br/>
</div>
</body>
<script typetype="text/javascript" src="js/jquery-3.6.0.js"></script>
<script typetype="text/javascript">
// 定义一个json对象
var person = {"name":"张三","age":20,"score":90, "phone":"15388888888"};
//解析json对象
$("#name").text(person.name);
$("#age").text(person.age);
$("#score").text(person.score);
$("#phone").text(person.phone);
</script>
解析JSON数组
var JSON数组 = [value,value,...];
var countryArray = ["中国","美国","俄罗斯"];
<body>
<div>
<span id="arr_01"></span><br>
<span id="arr_02"></span><br>
<span id="arr_03"></span><br>
</div>
</body>
<script typetype="text/javascript" src="js/jquery-3.6.0.js"></script>
<script typetype="text/javascript">
// 定义一个json数组
var fruit = ["苹果","香蕉","西瓜"];
//解析json数组
$("#arr_01").text(fruit[0]);
$("#arr_02").text(fruit[1]);
$("#arr_03").text(fruit[2]);
</script>
解析JSON对象数组
var personArray = [{"name":"张三","age":30},{"name":"李四","age":40}];
<body>
<table border ="1" cellpadding = "30" cellspacing="0" width="700" id = "list">
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</table>
</body>
<script typetype="text/javascript" src="js/jquery-3.6.0.js"></script>
<script typetype="text/javascript">
// 定义一个JSON对象数组
var jsonArr = [
{"name":"zs","age":10},
{"name":"ls","age":11},
{"name":"ww","age":12}
];
//遍历方式1：
for(var i = 0; i < jsonArr.length; i++){
$("#list").append(
"<tr><td>"+jsonArr[i].name+"</td>"+
"<td>"+jsonArr[i].age+"</td></tr>"
);
}
//遍历方式2：
var $arr =$(arr);//转化成一个jquery对象
$arr.each(function(index,item){
$("#list").append(
"<tr><td>"+(index+1)+"</td><td>"
+item.name+"</td><td>"
+item.age+"</td></tr>"
);
});
</script>
ajax获取数据
//字符串转为json
$("#list").empty();
$("#list").append("<tr><th>编号</th><th>标题</th></tr>");
$.ajax({
type:"post",
url:"newServlet?option=select",
data:"sign=3",
dataType:"text",
success:function(rs){
var result = JSON.parse(rs);
var $result = $(result);
$result.each(function(index,item){
$("#list").append(
"<tr><td>"+item.newsId+
"</td><td>"+item.newsTitle+
"</td></tr>"
);
};
},
error:function(error){
alert(error);
}
});
使用fastJSON
List<News> list1 = newsService.getNewsListByTypeId(Integer.parseInt(sign));
PrintWriter out = response.getWriter();
JSONObject jsonObject=new JSONObject();// 对象
if (list1.size0 > 0) {
json0bject.put("data",list1);
json0bject.put("code",1);
json0bject.put("msg","查询信息成功");
}else{
json0bject.put("data",null);
json0bject.put("code",0);
json0bject.put("msg","失败");
}
out.write(jsonObject.toString());
out.flush();
//字符串转为json
$("#list").empty();
$("#list").append("<tr><th>编号</th><th>标题</th></tr>");
$.ajax({
type:"post",
url:"newServlet?option=select",
data:"sign=3",
dataType:"json",
success:function(rs){
if(rs.code==1){
alert(rs.msg);
var $result = $(rs.data);
$result.each(function(index,item){
$("#list").append(
"<tr><td>"+item.newsId+
"</td><td>"+item.newsTitle+
"</td></tr>"
);
};
}
},
error:function(error){
alert(error);
}
});
ajax传json对象到 servlet
$.ajax({
type:"post",
url:"http://localhost:8080/news1Servlet",
contentType:"application/json",
data:JSON.stringify(list),
success:function(rs){
}
});
使用JsonUtils工具类
InputStreamReader reader=new InputStreamReader(req.getInputStream());
JSONArray list= JsonUtils. getJson(reader);
for (int i=0;i<list.size();i++){
JSONObject json0bject=(JSONObject) list.get(i);
System.out.println(jsonObject.getString( key: "newsId"));
System.out.println(json0bject.getString( key: "newsTitle"));
}
四、Ajax详解
from:动力节点老杜
AJAX 异步实现步骤
XMLHttpRequest 对象介绍
ajax请求实例
Servlet.java
package com.yxh;
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("/ajaxrequest01")
public class AjaxRequest1Servlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//浏览器客户端的XMLHttpRequest对象会接收到这个响应的信息
resp.getWriter().println("<font color='red' size=15px>hello welcome to study ajax!!!</font>");
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
}
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax get请求</title>
<script type="text/javascript">
window.onload = function (){
document.getElementById("hebtn").onclick=function (){
//发送ajax get请求
console.log("发送ajax get请求");
//第一步创建ajax核心对象XMLHttpRequest
const xhr = new XMLHttpRequest();
//第二步注册回调函数
//这是一个回调函数，这个函数在XMLHttpRequest对象的readyState状态值发生改变的时候被调用。
xhr.onreadystatechange=function (){
//这里的回调函数会被调用多次
//0->1被调用,1->2被调用,2->3被调用,3->4被调用
console.log(xhr.readyState)
//当XMLHttpRequest对象的readyState的状态码是4的时候。表示响应结束了
if (this.readyState === 4) {
console.log("响应结束了")
//响应结束之后，一般会有一个http的状态码：200表示成功，404表示资源找不到，500表示服务器内部错误
console.log(this.status)
if (this.status===404) {
alert("对不起，您访问的资源不存在，请检查路径")
}else if (this.status===500){
alert("对不起，服务器发生严重的内部错误，请联系管理员")
}else if(this.status===200){
// alert("响应成功")
//通过XMLHttpRequest对象的responseText属性来获取响应的信息。
document.getElementById("mydiv").innerHTML=this.responseText
}
}
}
//第三步开启通道(open只是浏览器和服务器通道打开并不会建立请求)
//XMLHttpRequest对象的open方法
//open(method,url,async,user,psw)
//method:请求的方式,可以是get,也可以是post,也可以是其他请求方式
//url:请求的路径
//async:只能是true或者false,true表示此ajax请求是一个异步请求,false表示此ajax请求是一个同步请求(大部分请求都是true，要求异步。极少数情况需要同步)
//user:用户名 pwd:密码 进行身份认证的，想要访问这个服务器上的资源需要一些口令。需不需要用户名密码需要由服务器决定
xhr.open("GET","/t1/ajaxrequest01",true)
//第四步发送请求
xhr.send()
}
}
</script>
</head>
<body>
<div id="mydiv"></div>
<input type="button" value ="hello ajax" id="hebtn">
</body>
</html>
效果
改进
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax get请求</title>
<script type="text/javascript">
window.onload = function (){
const xhr = new XMLHttpRequest();
document.getElementById("hebtn").onclick=function (){
console.log("发送ajax get请求");
xhr.onreadystatechange=callback
xhr.open("GET","/t1/ajaxrequest01",true)
xhr.send()
}
function callback(){
if (this.readyState === 4) {
if (this.status===404) {
alert("对不起，您访问的资源不存在，请检查路径")
}else if(this.status===200){
document.getElementById("mydiv").innerHTML=this.responseText
}
}
}
}
</script>
</head>
<body>
<div id="mydiv"></div>
<input type="button" value ="hello ajax" id="hebtn">
</body>
</html>
get请求如何提交数据
get请求提交数据是在“请求行"上提交，格式是: url?name=value&name=value&name=value....
get请求提交数据的格式是HTTP协议中规定的，遵循协议即可
实例
servlet.java
package com.yxh;
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("/ajaxrequest01")
public class AjaxRequest1Servlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//获取ajax请求的数据
String usercode = req.getParameter("usercode");
String username = req.getParameter("username");
resp.setContentType("text/html;charset=UTF-8");
resp.getWriter().print("<font color=green font=15px>"+usercode+"====="+username+"</font>");
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
}
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax get请求</title>
<script type="text/javascript">
window.onload = function (){
document.getElementById("hebtn").onclick=function (){
const xhr = new XMLHttpRequest();
xhr.onreadystatechange=function (){
if (this.readyState === 4) {
if (this.status===404) {
alert("对不起，您访问的资源不存在，请检查路径")
}else if (this.status===500){
alert("对不起，服务器发生严重的内部错误，请联系管理员")
}else if(this.status===200){
document.getElementById("mydiv").innerHTML=this.responseText
}
}
}
const username = document.getElementById("username");
const usercode = document.getElementById("usercode");
xhr.open("GET","/t1/ajaxrequest01?usercode="+usercode+"&username="+username,true)
xhr.send()
}
}
</script>
</head>
<body>
<div id="mydiv"></div>
username:<input type="text" id="username">
usercode:<input type="text" id="usercode">
<input type="button" value ="hello ajax" id="hebtn">
</body>
</html>
效果：
AJAX GET请求的缓存问题
对于低版本的IE浏览器来说，AJAX的get请求可能会走缓存。存在缓存问题。
对于现代的浏览器来说，大部分浏览器都已经不存在AJAX get缓存问题了。
什么是AJAX GET请求缓存问题呢?
在HTTP协议中是这样规定get请求的: get请求会被缓存起来
发送AJAX GET请求时，在同一个浏览器上，前后发送的AJAX请求路径一样的话，对于低版本的I来说，第二次的AJAXGET请求会走缓存，不走服务。
POST请求在HTTP协议中规定的是: POST请求不会被浏览器缓存
GET请求缓存的优点:
优点:直接从浏览器缓存中获取资源，不需要从服务器上重新加载资源，速度较快，用户体验好
缺点:无法实时获取最新的服务器资源
浏览器什么时候会走缓存?
第一:是一个GET请求
第二:请求路径已经被浏览器缓存过了。第二次发送请求的时候，这个路径没有变化，会走浏览器缓存。
如果是低版本的IE浏览器，怎么解决AJAX GET请求的缓存问题呢?
可以在请求路径url后面添加一个时间戳，这个时间戳是随时变化的。所以每一次发送的请求路径都是不一样的，这样就不会走浏览器的缓存问题了
可以采用时间戳:“url?t="+ new Date()getTime()
或者可以通过随机数:“url?t="+ Math.random()
也可以随机数+时间戳....
