AJAX快速入门、同步和异步、Axios异步框架、JSON

港控/mmm° 2023-10-07 20:54 66阅读 0赞

## AJAX ##

*  概念：AJAX(Asynchronous JavaScript And XML):异步的 JavaScript 和 XML
 *  AJAX作用：
    
     *  1.  与服务器进行数据交换：通过AJAX可以给服务器发送请求，并获取服务器响应的数据  
            ![在这里插入图片描述][d804247e01d74b1aac84c573dc14508a.png]
        
         *  使用了AJAX和服务器进行通信，就可以使用 HTML + AJAX来替换JSP页面了  
            ![在这里插入图片描述][0ae48e715d8b4a9daea7cc8aa6da1eba.png]  
            ![在这里插入图片描述][74c9d1e5035d4472a5e891a17d2b0934.png]
 *  2.异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用校验，等等…  
    ![在这里插入图片描述][ab905c3710914bef8baebf8a210d2db4.png]

### 同步和异步 ###

*  同步  
    ![在这里插入图片描述][0a372bb6862f4d1589ee04c41025c2d4.png]
 *  异步  
    ![在这里插入图片描述][d86a34d51f9448bcb7bfac1f1e644d86.png]

### AJAX快速入门 ###

*  1.编写AjaxServlet,并使用 response 输出字符串
 *  2.创建 XMLHttpRequest 对象：用于和服务器交换数据  
    ![在这里插入图片描述][c6d299accbfd426a9b567d7ca9f6000b.png]
 *  3.向服务器发送请求  
    ![在这里插入图片描述][11c5671464ca456c99ae832556ee360c.png]
 *  获取服务器响应数据  
    ![在这里插入图片描述][90cf0acb8c7f4e26b985aa929ec65bac.png]  
    ![在这里插入图片描述][8694a91dff54471aa17fa34231f1c612.png]

### Axios 异步框架 ###

*  Axios 对原生的 AJAX进行封装，简化书写
 *  官网 ：[Axios][]
 *  Axios 快速入门
    
     *  1.引入 axios 的 js 文件  
        ![在这里插入图片描述][028b5ba5671d455d8c1497692e82ae7d.png]
     *  使用 axios 发送请求，并获取响应结果  
        ![在这里插入图片描述][94dde9c927264de390bb89e8a9cb4e10.png]
 *  Axios 请求方式别名
    
     *  为了方便起见，Axios 已经为所有支持的请求方法提供了别名  
        ![在这里插入图片描述][9fdac7500da74d3eb2a55e11b26086d8.png]
     *  发送 get 请求  
        ![在这里插入图片描述][7c9ac51714b5429b89db4daf1d924ac7.png]
     *  发送 post 请求  
        ![在这里插入图片描述][261f20d8ac9f4c8ba8e180dca8977a2c.png]
    
    ### JSON ###
 *  概念：JavaScript Object Notation。JavaScript 对象表示法
 *  由于其语法简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输  
    ![在这里插入图片描述][490d2ceceb3c4e9cbfb4e2a621b6a679.png]  
    ![在这里插入图片描述][9860c3c18f0b48c7bfe8a10a1381b449.png]
 *  JSON基础语法
    
     *  定义  
        ![在这里插入图片描述][1d16a3729a7f43bdabd199661962f1d8.png]
     *  示例  
        ![在这里插入图片描述][80c53935a3454bbe86bf285fafadfc9a.png]  
        ![在这里插入图片描述][1f1add2e5f8f4d1b95ed7d0d43b3754b.png]
     *  JSON字符串转为 JS对象  
        ![在这里插入图片描述][40113c9b6eb548d28b59499f4b2b6d59.png]
     *  JSON字符串转为JS对象  
        ![在这里插入图片描述][6ecb3d6b25004a34a30bdf1268816057.png]  
        Axios中，JSON字符串和JS对象自动进行转换
 *  JSON 数据和 Java对象转换  
    ![在这里插入图片描述][02cce0943ece4760b01a210deb9c2c94.png]
    
     *  请求数据：JSON字符串转为Java对象
     *  响应数据：Java对象转为JSON字符串
 *  Fastjson是阿里巴巴提供的一个java语言编写的高功能完善的JSON库，是目前Java语言中最快的JSON库，可以实现Java对象和JSON字符串的相互转换
    
     *  使用：
        
         *  1.导入坐标  
            ![在这里插入图片描述][4936a72e82b74791967b2bc4259481fd.png]
         *  2.Java对象转JSON  
            ![在这里插入图片描述][e275e53a76444cd98199f1f222648937.png]
         *  3.JSON字符串转Java对象  
            ![在这里插入图片描述][054c25c0e3de4a5badea18cc1da71024.png]  
            ![在这里插入图片描述][0332ce6b3461463d9f1ee5ed4b259f6f.png]

[d804247e01d74b1aac84c573dc14508a.png]: https://img-blog.csdnimg.cn/d804247e01d74b1aac84c573dc14508a.png
[0ae48e715d8b4a9daea7cc8aa6da1eba.png]: https://img-blog.csdnimg.cn/0ae48e715d8b4a9daea7cc8aa6da1eba.png
[74c9d1e5035d4472a5e891a17d2b0934.png]: https://img-blog.csdnimg.cn/74c9d1e5035d4472a5e891a17d2b0934.png
[ab905c3710914bef8baebf8a210d2db4.png]: https://img-blog.csdnimg.cn/ab905c3710914bef8baebf8a210d2db4.png
[0a372bb6862f4d1589ee04c41025c2d4.png]: https://img-blog.csdnimg.cn/0a372bb6862f4d1589ee04c41025c2d4.png
[d86a34d51f9448bcb7bfac1f1e644d86.png]: https://img-blog.csdnimg.cn/d86a34d51f9448bcb7bfac1f1e644d86.png
[c6d299accbfd426a9b567d7ca9f6000b.png]: https://img-blog.csdnimg.cn/c6d299accbfd426a9b567d7ca9f6000b.png
[11c5671464ca456c99ae832556ee360c.png]: https://img-blog.csdnimg.cn/11c5671464ca456c99ae832556ee360c.png
[90cf0acb8c7f4e26b985aa929ec65bac.png]: https://img-blog.csdnimg.cn/90cf0acb8c7f4e26b985aa929ec65bac.png
[8694a91dff54471aa17fa34231f1c612.png]: https://img-blog.csdnimg.cn/8694a91dff54471aa17fa34231f1c612.png
[Axios]: https://www.axios-http.cn
[028b5ba5671d455d8c1497692e82ae7d.png]: https://img-blog.csdnimg.cn/028b5ba5671d455d8c1497692e82ae7d.png
[94dde9c927264de390bb89e8a9cb4e10.png]: https://img-blog.csdnimg.cn/94dde9c927264de390bb89e8a9cb4e10.png
[9fdac7500da74d3eb2a55e11b26086d8.png]: https://img-blog.csdnimg.cn/9fdac7500da74d3eb2a55e11b26086d8.png
[7c9ac51714b5429b89db4daf1d924ac7.png]: https://img-blog.csdnimg.cn/7c9ac51714b5429b89db4daf1d924ac7.png
[261f20d8ac9f4c8ba8e180dca8977a2c.png]: https://img-blog.csdnimg.cn/261f20d8ac9f4c8ba8e180dca8977a2c.png
[490d2ceceb3c4e9cbfb4e2a621b6a679.png]: https://img-blog.csdnimg.cn/490d2ceceb3c4e9cbfb4e2a621b6a679.png
[9860c3c18f0b48c7bfe8a10a1381b449.png]: https://img-blog.csdnimg.cn/9860c3c18f0b48c7bfe8a10a1381b449.png
[1d16a3729a7f43bdabd199661962f1d8.png]: https://img-blog.csdnimg.cn/1d16a3729a7f43bdabd199661962f1d8.png
[80c53935a3454bbe86bf285fafadfc9a.png]: https://img-blog.csdnimg.cn/80c53935a3454bbe86bf285fafadfc9a.png
[1f1add2e5f8f4d1b95ed7d0d43b3754b.png]: https://img-blog.csdnimg.cn/1f1add2e5f8f4d1b95ed7d0d43b3754b.png
[40113c9b6eb548d28b59499f4b2b6d59.png]: https://img-blog.csdnimg.cn/40113c9b6eb548d28b59499f4b2b6d59.png
[6ecb3d6b25004a34a30bdf1268816057.png]: https://img-blog.csdnimg.cn/6ecb3d6b25004a34a30bdf1268816057.png
[02cce0943ece4760b01a210deb9c2c94.png]: https://img-blog.csdnimg.cn/02cce0943ece4760b01a210deb9c2c94.png
[4936a72e82b74791967b2bc4259481fd.png]: https://img-blog.csdnimg.cn/4936a72e82b74791967b2bc4259481fd.png
[e275e53a76444cd98199f1f222648937.png]: https://img-blog.csdnimg.cn/e275e53a76444cd98199f1f222648937.png
[054c25c0e3de4a5badea18cc1da71024.png]: https://img-blog.csdnimg.cn/054c25c0e3de4a5badea18cc1da71024.png
[0332ce6b3461463d9f1ee5ed4b259f6f.png]: https://img-blog.csdnimg.cn/0332ce6b3461463d9f1ee5ed4b259f6f.png