JavaWeb - Ajax - Axios - JSON基本使用介绍 红太狼 2023-09-23 15:32 78阅读 0赞 #### 文章目录 #### * AJAX * * AJAX基本介绍 * AJAX快速入门 * Axios快速入门 * JSON * * JSON基本介绍 * JSON基础语法 * JSON数据和Java对象转换 ## AJAX ## > 此篇是AJAX基本使用的简单介绍, 详细使用可查看[文章][Link 1]: https://lanan.blog.csdn.net/article/details/125632512 ### AJAX基本介绍 ### **概念**: > AJAX(Asynchronous JavaScript And XML):异步的 JavaScript 和 XML **AJAX作用**: > 与服务器进行数据交换:通过AJAX可以给服务器发送请求,并获取服务器响应的数据 > > * 使用了AJAX和服务器进行通信,就可以使用 HTML+AJAX来替换JSP页面了 > > 异步交互:可以在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页的技术,如:搜索联想、用户名是否可用校验,等等… ![在这里插入图片描述][18861e3a77314f449850651f1b652699.png_pic_center] ### AJAX快速入门 ### **后端**: > 编写AjaxServlet,并使用response输出字符串 @WebServlet("/ajaxServlet") public class AjaxServlet extends HttpServlet { @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.getWriter().write("hello ajax"); } @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doGet(request, response); } } **前端**: > 创建 XMLHttpRequest 对象:用于和服务器交换数据 // 1.创建XMLHttpRequest网络请求对象 const xhr = new XMLHttpRequest() > 向服务器发送请求 // 1.创建XMLHttpRequest网络请求对象 const xhr = new XMLHttpRequest() // 2.向服务器发送网络请求 // 参数一: 请求的方式; 参数二: 要请求的url地址 xhr.open("get", "http://127.0.0.1:8080/ajaxServlet") // 发生网络请求 xhr.send() > 获取服务器响应数据 // 1.创建XMLHttpRequest网络请求对象 const xhr = new XMLHttpRequest() // 2.向服务器发送网络请求 // 参数一: 请求的方式; 参数二: 要请求的url地址 xhr.open("get", "http://127.0.0.1:8080/ajaxServlet") // 发生网络请求 xhr.send() // 3.监听对象状态的变化 xhr.addEventListener("readystatechange", function() { // 状态不为4的话直接return if (xhr.readyState !== 4) return // 获取服务器响应数据 alert(xhr.response) }) ## Axios快速入门 ## **这里简单介绍Axios的使用, 详细的Axios使用可查看[文章][Link 2]: https://lanan.blog.csdn.net/article/details/125994087** > Axios是对原生的AJAX进行封装的一个异步框架,简化书写 > > 官网:https://www.axios-http.cn **使用步骤如下**: > 引入 axios 的 js 文件 <script src="js/axios-0.18.0.js"></script> > 使用axios 发送请求,并获取响应结果 axios.get("http://localhost:8080/ajax-demo/ajaxServlet").then(res => alert(res.data)) axios.post("http://localhost:8080/ajax-demo/ajaxServlet", { username: 'admin', password: "admin" }).then(res => { alert(res.data) }) ## JSON ## ### JSON基本介绍 ### **JSON概念**: > JSON全称JavaScript Object Notation意思是JavaScript对象表示法 > > 由于其语法简单,层次结构鲜明,现多用于作为`数据载体`,在网络中进行数据传输 **js对象** { name: "chenyq", age: 18, height: 1.88 } **JSON对象** { "name": "chenyq", "age": 18, "height": 1.88 } ### JSON基础语法 ### **定义语法**: const 变量名 = '{"key1": value1, "key2": value2, ...};' **value 的数据类型为**: > 数字(整数或浮点数) > > 字符串(在双引号中) > > 逻辑值(true 或 false) > > 数组(在方括号中) > > 对象(在花括号中) > > null > 示例代码 const jsonStr = '{"name": "chenyq", "age": 18, "addr":["北京","上海","西安"]};' **JSON字符串转为JS对象**: const jsonStr = '{"name": "chenyq", "age": 18};' // 转为字符串 const jsObj = JSON.parse(jsonStr) **JS对象转为JSON字符串**: const jsonStr = '{ "name": "chenyq", "age": 18};' const jsObj = JSON.parse(jsonStr) // 转回JSON字符串 const jsonStr2 = JSON.stringify(jsObj) **注意: Axios中,JSON字符串和JS对象自动进行转换** ### JSON数据和Java对象转换 ### > **请求数据**:需要将JSON字符串转为Java对象 > > **响应数据**:需要将Java对象转为JSON字符串 **`Fastjson`是阿里巴巴提供的一个Java语言编写的高性能功能完善的JSON库,是目前Java语言中最快的JSON库,可以实现Java对象和JSON字符串的相互转换**。 **Fastjson的使用**: > 导入坐标 <dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson</artifactId> <version>1.2.62</version> </dependency> > Java对象转JSON: `String jsonStr = JSON.toJSONString(obj);` public class FastjsonDemo { public static void main(String[] args) { // 将Java对象转为JSON字符串 User user = new User(101, "admin", "admin123"); String jsonStr = JSON.toJSONString(user); System.out.println(jsonStr); // {"id":101,"password":"admin123","username":"admin"} } } > JSON字符串转Java对象: `User user = JSON.parseObject(jsonStr, User.class);` public class FastjsonDemo { public static void main(String[] args) { // 将Java对象转为JSON字符串 User user = new User(101, "admin", "admin123"); String jsonStr = JSON.toJSONString(user); System.out.println(jsonStr); // {"id":101,"password":"admin123","username":"admin"} // 将JSON字符串转为Java对象 User userObj = JSON.parseObject(jsonStr, User.class); System.out.println(userObj); // User{id=101, username='admin', password='admin123'} } } [Link 1]: https://lanan.blog.csdn.net/article/details/125632512 [18861e3a77314f449850651f1b652699.png_pic_center]: https://img-blog.csdnimg.cn/18861e3a77314f449850651f1b652699.png#pic_center [Link 2]: https://lanan.blog.csdn.net/article/details/125994087
还没有评论,来说两句吧...