Ajax
2021/4/19 10:56:51
本文主要是介绍Ajax,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
前文
我是学Java后端的但是最近面试了很多后端岗位,面试官问我会不会HTML,会不会CSS,会不会JS,会不会Ajax,我当时心里就一句nmd,所以就强忍心中的愤怒,学习了一些Ajax
Ajax
-
什么是Ajax
Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术。
通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。划重点1Ajax的主要目的是为了,在不需要重新加载整个网页的前提下,使网页的一部分更新
划重点2为了实现部分更新,就需要前端和后台之间的少量数据交换,包括前端向后台提交数据和前端从后台读取数据
划重点3异步和同步:客户端和服务器端相互通信的基础上
(同步)客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作
(异步)客户端不需要等待服务器端的响应。在服务器处理请求的过程中,客户端可以进行其他的操作划重点4用途:提升用户体验
划重点5传统的网页(不使用 Ajax)如果需要更新内容,必须重载整个网页页面
-
实现方式
-
原生的JS实现方式(基础)
-
创建核心对象
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5iCP6Tm5-1618798816505)(C:\Users\楠\AppData\Roaming\Typora\typora-user-images\image-20210419090336428.png)]
-
建立连接
-
向服务器发送请求
如需将请求发送到服务器,我们使用XMLHttpRequest对象的 open() 和 send() 方法
xmlhttp.open("GET","test1.txt",true); xmlhttp.send();
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-O3tGj5OB-1618798816508)(C:\Users\楠\AppData\Roaming\Typora\typora-user-images\image-20210419090848759.png)]
GET和POST选哪个:一般情况下是通用的
但是下面的需要POST请求
- 无法使用缓存文件(更新服务器上的文件或数据库)
- 向服务器发送大量数据(POST 没有数据量限制)
- 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠
区别
- get方式,请求参数在url后面拼接,send方法参数为空[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sZdvRLdZ-1618798816511)(C:\Users\楠\AppData\Roaming\Typora\typora-user-images\image-20210419091407437.png)]
- post方式,请求参数在send方法中定义[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-InRocyFN-1618798816514)(C:\Users\楠\AppData\Roaming\Typora\typora-user-images\image-20210419091534271.png)]
-
接受服务器响应,处理数据
如需获得来自服务器的响应,请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iVKFxJhd-1618798816515)(C:\Users\楠\AppData\Roaming\Typora\typora-user-images\image-20210419091911927.png)]
-
如果来自服务器的响应并非 XML,请使用 responseText 属性,responseText 属性返回字符串形式的响应
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
例子:
-
如果来自服务器的响应是 XML,而且需要作为 XML 对象进行解析,请使用responseXML 属性:请求 books.xml文件,并解析响应
xmlDoc=xmlhttp.responseXML; txt=""; x=xmlDoc.getElementsByTagName("ARTIST"); for (i=0;i<x.length;i++) { txt=txt + x[i].childNodes[0].nodeValue + "<br />"; } document.getElementById("myDiv").innerHTML=txt;
-
-
-
JS实现
//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) { //获取服务器的响应结果 var responseText = xmlhttp.responseText; alert(responseText); } }
-
-
jQuery实现方式(简洁)
-
$.ajax()
* 语法:$.ajax({键值对}); //使用$.ajax()发送异步请求 $.ajax({ url:"ajaxServlet1111" , // 请求路径 type:"POST" , //请求方式 //data: "username=jack&age=23",//请求参数 data:{"username":"jack","age":23}, success:function (data) { alert(data); },//响应成功后的回调函数 error:function () { alert("出错啦...") },//表示如果请求响应出现错误,会执行的回调函数 dataType:"text"//设置接受到的响应数据的格式 });
-
$.get():发送get请求
* 语法:$.get(url, [data], [callback], [type]) * 参数: * url:请求路径 * data:请求参数 * callback:回调函数 * type:响应结果的类型 <---------------------------------------------------------------------> <script src="js/jquery-3.3.1.min.js"></script> </head> <script> function fun() { $.get( //url:请求路径 url ="/test/jqueryServlet", //data:请求参数 {"username":"jack"}, //callback:回调函数 function (data) { alert(data) }, //type:响应结果的类型 type="text" ) } </script> <body> <input type="button" value="点击" onclick=fun();> <input type="text"> </body>
-
$.post():发送post请求
* 语法:$.post(url, [data], [callback], [type]) * 参数: * url:请求路径 * data:请求参数 * callback:回调函数 * type:响应结果的类型 <script src="js/jquery-3.3.1.min.js"></script> </head> <script> function fun() { $.post( url ="/test/jqueryServlet", {"username":"jack"}, function (data) { alert(data) }, type="text" ) } </script> <body> <input type="button" value="点击" onclick=fun();> <input type="text"> </body>
-
-
JSON
-
概念:JavaScript Object Notation JavaScript对象表示法
-
特点:
- json现在多用于存储和交换文本信息的语法
- 进行数据的传输
- JSON 比 XML 更小、更快,更易解析
-
语法:
-
基本规则:
-
json数据是由键值对构成的
-
键用引号(单双都行)引起来,也可以不使用引号
-
值得取值类型
-
数字(整数或浮点数)
-
字符串(
在双引号中
) -
逻辑值(true 或 false)
-
数组(在方括号中) {“persons”:[{},{}]}
-
对象(在花括号中) {“address”:{“province”:“陕西”…}}
-
-
数据由逗号分隔
-
花括号保存对象
-
方括号保存数组
-
-
获取数据
- json对象.键名
- json对象[“键名”]
- 数组对象[索引]
- 遍历
//1.定义基本格式 var person = {"name": "张三", age: 23, 'gender': true}; <---------------------------------------------------------------------> var ps = [{"name": "张三", "age": 23, "gender": true}, {"name": "李四", "age": 24, "gender": true}, {"name": "王五", "age": 25, "gender": false}]; <---------------------------------------------------------------------> //获取person对象中所有的键和值 //for in 循环 for(var key in person){ //这样的方式获取不行。因为相当于 person."name" //alert(key + ":" + person.key); alert(key+":"+person[key]); } <---------------------------------------------------------------------> //获取ps中的所有值 for (var i = 0; i < ps.length; i++) { var p = ps[i]; for(var key in p){ alert(key+":"+p[key]); } }
-
JSON转为Java对象
JSON解析器(常见):Jsonlib,Gson,fastjson,jackson
-
JSON转为Java对象
-
导jackson包
-
创建jsckson核心对ObjectMapper
//创建ObjectMapper对象 ObjectMapper o = new ObjectMapper(); //自动将双引号转义了 String json = "{\"name\":\"张三\",\"age\":20,\"gander\":\"男\",\"birthday\":\"2020-04-02\"}";
-
调用ObjectMapper的相关方法进行转换
//调用readerValue(String,Class<Object> class)进行转义 Person person = objectMapper.readValue(json, Person.class); //打印结果,后面没有输入所以自动给个日期 //Person{name='张三', age=20, gander='男', birthday=Thu Apr 02 08:00:00 CST 2020} System.out.println(person);
-
-
Java对象转换为JSON
-
导入jackson的相关jar包
-
创建Jackson核心对象 ObjectMapper
-
调用ObjectMapper的相关方法进行转换
-
转换方法:
writeValue(参数1,obj)
参数1:
File:将obj对象转换为JSON字符串,并保存到指定的文件中
Writer:将obj对象转换为JSON字符串,并将json数据填充到字符输出流中
OutputStream:将obj对象转换为JSON字符串,并将json数据填充到字节输出流中
-
writeValueAsString(obj):将对象转为json字符串
@Test public void test2() throws Exception { Person p = new Person("张三", 20, "男",new Date()); ObjectMapper objectMapper = new ObjectMapper(); String string = objectMapper.writeValueAsString(p); System.out.println(string); }
-
注解:
-
@JsonIgnore:排除属性
-
@JsonFormat:属性值得格式化@JsonFormat(pattern = “yyyy-MM-dd”)
private String name; private int age; private String gander; @JsonFormat(pattern = "yyyy-MM-dd") //@JsonIgnore private Date birthday;
-
-
复杂java对象转换
//Lsit:数组 @Test //java List转Json //list 存储对象的方式 public void test3() throws Exception { Person p = new Person("张三", 20, "男",new Date()); Person w = new Person("张三", 20, "男",new Date()); Person e = new Person("张三", 20, "男",new Date()); List<Person> list = new ArrayList<Person>(); list.add(p); list.add(w); list.add(e); //创建jackSon核心对象ObjectMapper ObjectMapper objectMapper = new ObjectMapper(); //将java转化为jackSon对象 String string = objectMapper.writeValueAsString(list); /* 生成的结果: [{"name":"张三","age":20,"gander":"男","birthday":"2020-04-02"}, {"name":"张三","age":20,"gander":"男","birthday":"2020-04-02"}, {"name":"张三","age":20,"gander":"男","birthday":"2020-04-02"}] */ System.out.println(string); }
//Map:对象格式一致 @Test //java List转Json //map的键值对方式 public void test4() throws Exception { Map<String,Object> map = new LinkedHashMap<>(); map.put("name","张三"); map.put("age",20); map.put("address","仙桃"); ObjectMapper objectMapper = new ObjectMapper(); String string = objectMapper.writeValueAsString(map); //{"name":"张三","age":20,"address":"仙桃"} System.out.println(string); }
-
例子:
校验用户名是否存在
服务器响应的数据,在客户端使用时,要想当做json数据格式使用。有两种解决方案:- $.get(type):将最后一个参数type指定为"json"然后在服务器端,写上response.setContentType(“text/html;charset=utf-8”);
- 在服务器端设置MIME类型()
response.setContentType(“application/json;charset=utf-8”);
代码:
package com.xiaoge.servlet; import com.fasterxml.jackson.databind.ObjectMapper; 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.util.HashMap; import java.util.Map; /** * Created by Administrator on 2020/4/4 11:10 * @author Administrator */ @WebServlet("/findUsernameServlet") public class FindUsernameServlet extends HttpServlet { @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { <----------------------------------------------------------------------> //1.获取用户名 String username = request.getParameter("username"); <----------------------------------------------------------------------> //2.调用service层判断用户名是否存在 //期望服务器响应回的数据格式:{"userExsit":true,"msg":"此用户名太受欢迎,请更换一个"} // {"userExsit":false,"msg":"用户名可用"} // //response.setContentType("text/html;charset=utf-8"); response.setContentType("application/json;charset=utf-8"); Map<String,Object> map = new HashMap<>(); <----------------------------------------------------------------------> //2.调用service层判断用户是否存在 if ("tom".equals(username)){ //存在 map.put("userExsit",true); map.put("msg","此用户太受欢迎,请换一个"); }else { //不存在 map.put("userExsit",false); map.put("msg","此用户可以使用"); } //将map转化为json,并传递给客户端 //将map转化为json <----------------------------------------------------------------------> ObjectMapper mapper = new ObjectMapper(); //mapper.writeValue(response.getWriter(),map); String string = mapper.writeValueAsString(map); System.out.println(string); response.getWriter().write(string); } @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doPost(request, response); } }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册页面</title> <script src="js/jquery-3.3.1.min.js"></script> <----------------------------------------------------------------------> <script> //在页面加载完成后 $(function () { //给username绑定blur事件 $("#username").blur(function () { //获取username文本输入框的值 var username = $(this).val(); //发送ajax请求 //期望服务器响应回的数据格式:{"userExsit":true,"msg":"此用户名太受欢迎,请更换一个"} // {"userExsit":false,"msg":"用户名可用"} $.get("/test/findUsernameServlet",{username:username},function (data) { //判断userExsit键的值是否是true // alert(data); var span = $("#s_username"); if(data.userExsit){ //用户名存在 span.css("color","red"); span.html(data.msg); }else{ //用户名不存在 span.css("color","green"); span.html(data.msg); } }); }); }); </script> </head> <body> <----------------------------------------------------------------------> <form> <input type="text" id="username" name="username" placeholder="请输入用户名"> <span id="s_username"></span> <br> <input type="password" name="password" placeholder="请输入密码"><br> <input type="submit" value="注册"><br> </form> </body> </html>
-
这篇关于Ajax的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-14后台交互资料入门指南
- 2024-11-14如何轻松创建项目环境:新手入门教程
- 2024-11-14如何抽离公共代码:初级开发者指南
- 2024-11-14Python编程入门指南
- 2024-11-14Python编程入门:如何获取参数
- 2024-11-14JWT 用户校验:简单教程与实践
- 2024-11-14Pre-commit 自动化测试入门指南
- 2024-11-14Python编程基础
- 2024-11-14Server Action入门教程:轻松掌握服务器操作
- 2024-11-14Server Component入门教程:轻松搭建服务器组件