学习笔记 深藏阁楼爱情的钟 2022-10-29 13:24 279阅读 0赞 \#ajax: 1、概念:异步的JavaScript 和 xml 1.1异步和同步:客户端和服务器端相互通信的基础上 \*客户端必须等待服务器端的响应。在等待的期间客户端不能有其他的操作。(同步) \*客户端不需要等待服务器端的响应,在服务器处理请求的过程中,客户端可以进行其他的操作。(异步) Ajax 是一种无需重新加载整个页面的情况下,能够更新部分网页的技术。 通过在后台与服务器进行少量的数据交换,Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。传统的网页(不适用Ajax)如果需要更新内容,必须对整个网页进行页面加载。 2、实现方式 1、原生的JS实现方式----这种方式使用的不多 下面是实例代码: html页面端实例 <title>Title</title> <script> //定义方法 function fun() { //发送异步请求 //1、创建核心对象 var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } //2、建立连接 /* * 参数: * 1、请求方式:GET 或 POST * *get方式,请求参数在URL后边拼接,send方法为空参 * *post方式,请求参数在send方法中定义 * 2、请求的URL: * 3、同步或异步请求:true(异步)或 false(同步) * */ xmlhttp.open("GET","ajaxServlet?username=tom",true); //3、发送请求 xmlhttp.send(); //4、接受并处理服务端的响应处理结果 //获取方式: xmlhttp.responseText //什么时候获取?当服务器响应成功后再获取 //当xmlhttp对象的就绪状态改变时,触发事件onreadystatechange xmlhttp.onreadystatechange=function() { //判断readyState就绪状态是否为4,判断status响应状态码是否为200 if (xmlhttp.readyState==4 && xmlhttp.status==200) { //获取服务器的响应结果 //document.getElementById("myDiv").innerHTML=xmlhttp.responseText; var responseText = xmlhttp.responseText; alert(responseText); } } } </script> <input type="button" value="发送异步请求" onclick="fun()"> servlet端代码: @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException \{ this.doPost(req, resp); } @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { //获取请求参数 String username = req.getParameter("username"); //2、打印username System.out.println(username); //3、响应 resp.getWriter().write("hello:"+ username); } \} 2、JQuery实现方式 1、$.ajax() 具体实现 html端代码实例 <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-3.3.1.min.js"></script> <script> //定义方法 function fun() { //使用$.ajax()发送异步请求 $.ajax({ url:"ajaxServlet" , //请求路径 type:"POST" , //请求方式 data:{"username":"jack","age":23}, success:function (data){ alert(data); } , //当响应成功后的回调函数 error : function () { alert("出错了。。。"); } , //表示如果请求响应出现错误,会执行的回调函数 dataType:"text" //设置接受到的响应数据的格式 }); } </script> </head> <body> <input type="button" value="发送异步请求" onclick="fun()"> </body> </html> 服务器端代码实例 @WebServlet("/ajaxServlet") public class AjaxServlet extends HttpServlet { @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { //this.doPost(req, resp); //获取请求参数 String username = req.getParameter("username"); //2、打印username System.out.println(username); //3、响应 resp.getWriter().write("hello:"+ username); } @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { this.doPost(req, resp); } } 2、$.get() 3、$.post() 这里是get方法的代码演示实例 html页面 <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-3.3.1.min.js"></script> <script> //定义方法 //这里用的是get方法,post方法需要把get改为post就行了 function fun() { $.get( "ajaxServlet", {username:"rose"}, function (data) { alert(data); }, "text" ); } </script> </head> <body> <input type="button" value="发送异步请求" onclick="fun()"> </body> </html> 服务器端代码 @WebServlet("/ajaxServlet") public class AjaxServlet extends HttpServlet { @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { //this.doPost(req, resp); // //获取请求参数 // String username = req.getParameter("username"); // // //2、打印username // System.out.println(username); // // //3、响应 // resp.getWriter().write("hello:"+ username); this.doGet(req,resp); } @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { //this.doPost(req, resp); //获取请求参数 String username = req.getParameter("username"); //2、打印username System.out.println(username); //3、响应 resp.getWriter().write("hello:"+ username); } } \#JSON 1、概念:JavaScript Object Notation JavaScript对象表示法 2、语法规则: 数据在名称/值对中 数据由逗号分隔 花括号保存对象 方括号保存数组 3、获取数据 1、json对象.键名 2、json对象\[“键名”\] 3、数组对象\[索引\] 4、JSON对象和Java对象的相互转换 \*JSON解析器 常见的JSON解析器有:jsonlib , Gson , fastjson , jackson (1)JSON转为Java对象 (2)对象转换为JSON 使用步骤:先导入jackson相关的jar包 然后创建jackson核心对象 ObjectMapper 然后调用ObjectMapper的相关方法进行转换 ## Mybatis开发步骤 1、添加MyBatis坐标 2、创建user数据表 3、编写user实体类 4、编写映射文件UserMapper.xml 5、编写核心文件SqlMapConfig.xml 6、编写测试类。
相关 「学习笔记」学习笔记合集 可以点击 [https://www.cnblogs.com/hongzy/tag/%E7%AC%94%E8%AE%B0/][https_www.cnblogs.com_hong 淩亂°似流年/ 2023年06月05日 12:48/ 0 赞/ 20 阅读
相关 学习笔记 学习笔记 sudo adduser lilei sudo usermod -G sudo lilei sudo deluse 客官°小女子只卖身不卖艺/ 2022年11月26日 12:58/ 0 赞/ 26 阅读
相关 学习笔记 \ajax: 1、概念:异步的JavaScript 和 xml 1.1异步和同步:客户端和服务器端相互通信的基础上 \客户端必须等待服务器端的响应。在等待的期间客户 深藏阁楼爱情的钟/ 2022年10月29日 13:24/ 0 赞/ 280 阅读
相关 学习笔记 一. CSS 如何实现文字的垂直居中 1. 二.问题记录 1.创建新的JSP页面的时候报错:The superclass “javax.servlet.http.H 超、凢脫俗/ 2022年08月20日 09:30/ 0 赞/ 143 阅读
相关 【学习笔记】git学习笔记 使用git的好处 可以保存每个版本,只要在每个版本做完后进行上传 ![这里写图片描述][70] 可以异地读取更新 爱被打了一巴掌/ 2022年05月14日 09:10/ 0 赞/ 405 阅读
相关 学习笔记 我的第一天学习c\ 1、c\学习网址 [https://docs.microsoft.com/zh-cn/dotnet/csharp/programming-guide 矫情吗;*/ 2022年05月08日 06:16/ 0 赞/ 324 阅读
相关 学习笔记 测试 ORM JPA EJB JPQL MOM JMS ORM 对象关系映射 英语:Object Relational M 爱被打了一巴掌/ 2022年02月16日 01:57/ 0 赞/ 395 阅读
相关 [笔记] Docker 学习笔记 1. 什么是 Docker > 官方文档:[链接][Link 1],中文文档:[链接][Link 2] Docker 属于 Linux 容器的一种封装,提供简单易用的容 缺乏、安全感/ 2021年11月27日 02:01/ 0 赞/ 589 阅读
相关 学习笔记 1、js如何将136分钟转化为几小时,几分钟 return (Math.floor(minutes/60) + "小时" + (minutes%60) + "分" 爱被打了一巴掌/ 2021年07月25日 23:46/ 0 赞/ 1050 阅读
还没有评论,来说两句吧...