Web基础06-AJAX,Axios,JSON数据

2024-06-17 1848阅读

目录

一、AJAX

1.概述

2.主要作用

3.快速入门

4.AJAX的优缺点

（1）优点

（2）缺点

5.同源策略

二、Axios

1.概述

2.快速入门

3.请求方式别名

三、JSON

1.概述

2.主要作用

3.基础语法

4.JSON数据转换

（1）JSON字符串转为JS对象

（2）JS对象转为JSON字符串

（3）JSON字符串转为Java对象

（4）Java对象转为JSON字符串

四、使用Axios+Json简化以前代码

一、AJAX

1.概述

AJAX(Asynchronous JavaScript And XML)：异步的 JavaScript 和 XML

2.主要作用

  • 与服务器进行数据交换:通过AJAX可以给服务器发送请求，并获取服务器响应的数据

  • 异步交互:可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如:搜索、用 户名是否可用校验，等等...

    不需要用JSP了~

    Web基础06-AJAX,Axios,JSON数据

    Web基础06-AJAX,Axios,JSON数据

    同步与异步

    最直接的

    • 同步，在没有收到/得到结果之前不能干任何事

    • 异步，在没有收到/得到结果之前还能干其他事

      3.快速入门

      • 编写AjaxServlet并使用response输出字符串

      • 创建 XMLHttpRequest 对象:用于和服务器交换数据

        servlet

        @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);
    }
}

        html：

        

  
  Tryrun 1


  
        点击下面的按钮，将 Ajax 请求回来的数据更新在该文本内
        
发起 Ajax 请求
​

  document.getElementById("btn").onclick = ajaxRequest;
​
  function ajaxRequest () {
    var xhr = new XMLHttpRequest();
    //true是否为异步，false为同步
    xhr.open("GET", "http://localhost:8080/practice02_war/ajaxServlet", true);
    xhr.send();
​
    xhr.onreadystatechange = function(){
      if (xhr.readyState === 4 && xhr.status === 200) {
        document.getElementById("view").innerHTML = xhr.responseText;
      }
    }
  }

        之后启动服务器，html直接使用idea快速打开即可

        Web基础06-AJAX,Axios,JSON数据

        Web基础06-AJAX,Axios,JSON数据

        4.AJAX的优缺点

        （1）优点

        • 最大的优点是页面无刷新更新，用户的体验非常好；

          • 使用异步方式与服务器通信，具有更迅速的响应能力；

            • 可以将一些服务器工作转移到客户端，利用客户端资源来处理，减轻服务器和带宽的压力，节约空间和带宽租用成本；

              • 技术标准化，并被浏览器广泛支持，不需要下载插件或者小程序；

                • Ajax 可使因特网应用程序更小、更快、更友好。

                  （2）缺点

                  • Ajax 不支持浏览器 back 返回按钮；

                    • 有安全问题，Ajax 暴露了与服务器交互的细节；

                      • 对搜索引擎不友好；

                        • 破坏了程序的异常机制；

                          • 不容易调试。

                            5.同源策略

                            同源策略是一种安全协议，是客户端脚本（尤其是 JavaScript）中重要的安全度量标准，指一段脚本只能读取同一来源的窗口和文档的属性。

                            URL 地址中的 协议、域名、端口 三者 都 相同。

                            url组成：scheme: //host:post/path?query#fragment

                            • scheme：通信协议，一般为 http 、https；

                            • host：域名；

                            • post：端口号，此项为可选项，http 协议默认的端口号为 80，https 协议默认的端口号为 443；

                            • path：路径，由 "/ "隔开的字符串；

                            • query：查询参数，此项为可选项；

                            • fragment：信息片段，用于指定网络资源中的某片断，此项为可选项；

                              使用 Ajax 请求后端数据时，只能跟同源的后端接口进行数据交互，即：后端接口的 URL 与发起 Ajax 请求的页面 URL 之间，需要满足同源策略。

                              不满足 "同源策略" 的请求浏览器通常都会报错

                              使用同源策略的目的：

                              • 为了数据的安全性。若没有同源策略的限制，那么黑客就可以在他的页面上任意请求你的后端数据，造成数据库内容被盗取、隐私数据泄漏。

                                实现跨域请求的方式：

                                虽然 Ajax 请求需要满足同源策略，然而在一些场景中，你真的需要 Ajax 访问其它 "源" 的数据（称为跨域访问），这时需要后端服务器进行相应的设置。

                                如果服务器端支持 CORS，可以通过设置Access-Control-Allow-Origin来实现跨域。如果浏览器检测到相应的设置，就会允许 Ajax 进行跨域访问。

                                Java中实现跨域的五种方式_java跨域-CSDN博客

                                二、Axios

                                1.概述

                                Axios 对原生的AJAX进行封装，简化书写

                                Axios中文文档 | Axios中文网 (axios-http.cn)

                                2.快速入门

                                • 引入axios

                                • 使用axios发送请求，并获取响应

                                  
  axios({
    method:"get",
    url:"http://localhost:8080/practice02_war/axiosServlet?username=zhangsan"
  }).then(function (response) {
    alert(response.data)
  })
​
  axios({
    method: "post",
    url:"http://localhost:8080/practice02_war/axiosServlet",
    data:"username=zhangsan"
  }).then(function (response) {
    console.log(response.data)
  })

                                  servlet

                                  @WebServlet("/axiosServlet")
public class AxiosServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        final String username = request.getParameter("username");
        response.getWriter().write("username:"+username);
​
    }
​
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("post");
        this.doGet(request, response);
    }
}

                                  3.请求方式别名

                                  为了方便起见，已经为所有支持的请求方法提供了别名。

                                  Axios API | Axios中文文档 | Axios中文网 (axios-http.cn)

                                  axios.get("http://localhost:8080/practice02_war/axiosServlet?username=zhangsan").then(function (response) {
    alert(response.data)
})
axios.post("http://localhost:8080/practice02_war/axiosServlet","username=zhangsan").then(function (response) {
    console.log(response.data)
})

                                  三、JSON

                                  1.概述

                                  JavaScript Object Notation。JavaScript 对象表示法

                                  2.主要作用

                                  由于其语法简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输

                                  3.基础语法

                                  定义：多个属性值用，隔开

                                  var 变量名 = {"键名":值,"key":value}

                                  value值类型可为：

                                  • 数字

                                  • 字符串

                                  • 逻辑值

                                  • 数组

                                  • 对象

                                  • null（几乎不用）

                                    直接输出就是JSON字符串

                                    4.JSON数据转换

                                    （1）JSON字符串转为JS对象
                                    var jsObject=JsoN.parse(jsonstr);
                                    （2）JS对象转为JSON字符串
                                    var jsonStr = JSON.stringify(jsObject)
                                    （3）JSON字符串转为Java对象

                                    使用一个api

                                    fastjson：

                                    是阿里巴巴提供的一个Java语言编写的高性能功能完善的JSON库，是目前Java语言中最快的JSON库，可以实现Java对象和JSON字符串的相互转换。

                                    • 导入坐标

                                          
      com.alibaba
      fastjson
      2.0.47
    

                                      转换：

                                      User user = JSON.parseObject("json字符串", User.class);
                                      （4）Java对象转为JSON字符串
                                      String jsonStr = JSON.toJSONString(new User());

                                      注意：

                                      在Axios中（1）和（2）的转换会自动完成，不需要手写~

                                      四、使用Axios+Json简化以前代码

                                      这里以展示所有商品为例

                                      这里只要能获取到数据即可，页面展示就先不写了

                                      

    
    Title


  点我查看所有商品
  
                                      
  
                                      ​  
                                      ​  $("#selectAll").click(function () {    console.log("点击触发了")    axios({      method:"get",      url:"http://localhost:8080/practice02_war/selectAll"   }).then(function (response) {      let products = response.data;      for (let i = 0; i

                                      selectAll

                                      @WebServlet("/selectAll")
public class SelectAll extends HttpServlet {
    private final ProductService productService = new ProductService();
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        final List products = productService.selectAll();
        //将集合转为JSON数据（序列化）
        final String s = JSON.toJSONString(products);
        response.setContentType("text/json;charset=utf-8");
        //跨域
        response.addHeader("Access-Allow-Control-Origin","*");
        response.getWriter().write(s);
    }
​
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }
}

                                      预览：

                                      Web基础06-AJAX,Axios,JSON数据

                                      关于页面展示可以自己写，但没必要，后面有更好的方式展示数据

VPS购买请点击我

免责声明：我们致力于保护作者版权，注重分享，被刊用文章因无法核实真实出处，未能及时与作者取得联系，或有版权异议的，请联系管理员，我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理! 图片声明：本站部分配图来自人工智能系统AI生成,觅知网授权图片,PxHere摄影无版权图库和百度，360，搜狗等多加搜索引擎自动关键词搜索配图，如有侵权的图片，请第一时间联系我们，邮箱：ciyunidc@ciyunshuju.com。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!

相关阅读

目录[+]