关闭页面特效

Ajax&json

1|0一. 概念


AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)

1|1效果


无刷新:

只更新部分页面;

有效利用带宽;

提供连续的用户体验;

提供类似C/S的交互效果;

1|2传统Web和Ajax的差异


image-20230523190633588

1|3get请求和post请求的区别


image-20230523191716251

2|0二.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>

3|0三.JSON


JavaScript Object Notation

一种轻量级的数据交换格式

采用独立与语言的文本格式‘

通常用于在客户端和服务器之间传递数据

3|1优点


轻量级交互语言

结构简单

易于解析

3|2解析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>

3|3解析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>

3|4解析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>

3|5ajax获取数据


//字符串转为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); } });

3|6使用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); } });

3|7ajax传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")); }

4|0四、Ajax详解


from:动力节点老杜

4|1AJAX 异步实现步骤


XMLHttpRequest 对象介绍

image-20230602094143121

4|2ajax请求实例


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>

效果

2023-06-02-10-42-22

改进

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>

4|3get请求如何提交数据


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>

效果:

2023-06-02-11-23-05

4|4AJAX 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() 也可以随机数+时间戳....

4|5post请求实例



__EOF__

作  者YXH
出  处https://www.cnblogs.com/YxinHaaa/p/17430876.html
关于博主:编程路上的小学生,热爱技术,喜欢专研。评论和私信会在第一时间回复。或者直接私信我。
版权声明:署名 - 非商业性使用 - 禁止演绎,协议普通文本 | 协议法律文本
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角推荐一下。您的鼓励是博主的最大动力!

posted @   YxinHaaa  阅读(6)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」
0
0
关注
跳至底部
点击右上角即可分享
微信分享提示