• 阶段五-Day03-Ajax

    一、JavaWeb中路径的说明

    1. JavaWeb中的路径

    在JavaWeb中, 路径分为相对路劲和绝对路径两种:

    相对路径: 

            ./  表示当前目录

            ../  表示当前文件所在目录的上一级目录

    绝对路径:

            完整的路径名

    2. 在JavaWeb中/的不同意义

    /斜杠如果被浏览器解析,得到的是

    协议+本地ip+端口号

    http://ip:port/

    /斜杠如果被服务器解析, 得到是

    协议+本地ip+端口号+项目路径

    http://ip:port/工程路径/

    • 特殊情况：response.sendRedirect(“”)；服务器不解析,把斜杆发给浏览器去解析，得到http://ip:port/

    二、AJAX

    1. 之前浏览器和服务器交互的请求发送方式

    浏览器和服务器进行数据交互的基本流程为： http://localhost:8080/Ajax_war_exploded/PathServlet

    1.浏览器发起http请求

    2.服务器收到请求,对请求进行解析,创建请求和响应对象

    3.服务器根据请求解析结果调用对应的资源处理请求

    4.服务器将处理结果响应给浏览器

    5.浏览器收到响应结果,对结果数据进行解析

    6.浏览器将解析后的数据展示在页面

    浏览器发送请求的方式:

    1.在浏览器地址栏输入url地址后回车

    2.使用超链接

    3.使用form表单

    4.在js代码中使用window.location.href(在当前页面打开,window可以省略)

    5.在js代码中使用windows.open()(在新标签打开,window可以省略)

    2.浏览器发送请求访问服务器方式存在的问题

    新的响应结果会覆盖之前的内容

    3. Ajax的介绍和使用

    3.1 介绍

    概念：

    Ajax(Asynchronous Javascript And XML)是由浏览器解析运行的基于JavaScript实现的网页局部刷新的技术。

    作用：

    实现了在当前网页中显示新的响应内容。（不会覆盖掉原有内容）

    特点：

    1. 一种新的让浏览器发起http请求的技术

    2. 使用ajax发起的请求，响应结果不会自动的覆盖原有内容，而是可以在原有页面内容上继续显示

    3. Ajax是一门基于JavaScript的技术，由浏览器解析运行，所以是一种前端（客户端）技术

    4. 简单易用

    3.2 ajax发送请求
    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6.     
    7.     <script>
    8.         function f() {
    9.             //1.创建xhr对象
    10.             var xhr = new XMLHttpRequest();
    11.             //2.开启连接
    12.             xhr.open("get","AServlet");
    13.             //3.发起请求
    14.             xhr.send();
    15.             //4.监听readyState(状态码)的变化事件
    16.             //,一旦readyState发生变化,启动函数执行
    17.             xhr.onreadystatechange = function () {
    18.                 /*
    19.                 * readyState:
    20.                 *   0:创建了xhr对象,还没有连接
    21.                 *   1:建立了连接,还没有发送请求
    22.                 *   2:发送了请求,服务端开始处理
    23.                 *   3:服务器响应,但没有响应完(通常仅完成了响应头中数据的处理)
    24.                 *   4:服务器完成了完整的响应
    25.                 * */
    26.                 //readyState为4，服务端完整响应。 响应状态码为200，成功响应。
    27.                 if (xhr.readyState == 4 && xhr.status == 200){
    28.                     //xhr.responseText(响应回来的文本)
    29.                     console.log(xhr.responseText);
    30.                     document.getElementById("sp").innerText = xhr.responseText;
    31.                 }
    32.             }
    33.         }
    34.     script>
    35. head>
    36. <body>
    37. <h3>ajax01.htmlh3>
    38. <button onclick="f()">请求button>
    39. <br>
    40. <span id="sp">span>
    41. body>
    42. html>

    定义一个方法:

    1.创建ajax请求对象

    var xhr = new XMLHttpRequset()

    2.开启连接

    请求方式,请求路径

    xhr.open("get","testServlet")

    3.发起请求

    xhr.send()

    4.监听就绪状态码的变化

    xhr.onreadystatechange = function(ev){

            if (xhr.readyState == 4 && xhr.status == 200){

                    //获取响应数据

                    var responseText = xhr.responseText

            }

    }

    4. 同步与异步请求

    同步请求：

    • 发送请求后，一直等待服务端的响应，获取到服务端响应后，再执行其他的逻辑代码。

      • 浏览器直接发起

        • 在浏览器地址栏输入url，发起请求

        • 使用超链接，发起请求

        • 使用form表单，发起请求

        • 在js代码中使用window.location.href，发起请求

      • ajax发起同步请求，有xhr对象发起请求

        • ajax与其他方式发送同步请求的区别: ajax可以局部刷新(由xhr对象发送请求)，其他的请求方式会刷新整张页面

    异步请求：

    • 发送请求后，不需要等待服务端的响应，继续按照顺序执行其他逻辑代码，监听到响应，自动调用指定的方法。

    5. Ajax的同步和异步设置

    Ajax执行步骤：

    1. 创建Ajax请求对象

    2. 建立连接

    3. 发送连接

    4. 监听状态变化及结果处理

    设置ajax的同步异步：

    通过设置Ajax请求对象open方法的async参数的值：

    true：表示异步，默认值

    false：表示同步

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6.     <script>
    7.         function f() {
    8.             location.href = "CServlet";
    9.         }
    10.         //ajax发起同步请求
    11.         function f1() {
    12.             var xhr = new XMLHttpRequest();
    13.             //默认是true,异步请求
    14.             xhr.open("get","CServlet",false);
    15.             xhr.send();
    16.             var responseText1 = xhr.responseText;
    17.             console.log("同步请求")
    18.             console.log(responseText1);
    19.         }
    20.         //ajax发起异步请求
    21.         function f2() {
    22.             var xhr = new XMLHttpRequest();
    23.             //默认是true,异步请求
    24.             xhr.open("get","CServlet");
    25.             xhr.send();
    26.             //监听
    27.             xhr.onreadystatechange = function () {
    28.                 if (xhr.readyState == 4 && xhr.status == 200){
    29.                     var responseText2 = xhr.responseText;
    30.                     console.log(responseText2);
    31.                 }
    32.             }
    33.             console.log("异步请求");
    34.         }
    35.     script>
    36. head>
    37. <body>
    39. <a href="CServlet">超链接a>
    40. <hr>
    41. <form action="CServlet">
    42.     <input type="submit">
    43. form>
    44. <hr>
    45. <button onclick="f()">location.hrefbutton>
    46. <hr>
    47. <a href="javascript:void(0)" onclick="f1()">ajax同步请求a>
    48. <hr>
    49. <a href="javascript:void(0)" onclick="f2()">ajax异步请求a>
    50. body>
    51. html>

    6. Ajax的get请求和post请求及请求参数

    6.1 Ajax设置get请求方式及携带请求参数：

    Ajax的get请求的请求参数是直接写在请求路径后面

    使用?拼接,多个参数中间使用&隔开

    HelloServlet?name=lucy&age=18

    6.2 Ajax设置post请求方式及携带请求参数：

    Ajax的post请求传递参数是需要单独写在send方法中，而且需要设置请求头，该请求头表示此次请求是以表单的方式提交

     //请求方式是post请求，则需要设置请求头，这个请求头就表示是以表单方式提交数据
          xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
          xhr.send("name=lily&age=15");

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6.     <script>
    7.     function f1() {
    8.         //get方法传递参数
    9.         var xhr = new XMLHttpRequest();
    10.         xhr.open("get","DServlet?uname=zs&pwd=123");
    11.         xhr.send();
    12.         xhr.onreadystatechange = function () {
    13.             if (xhr.readyState == 4 && xhr.status == 200){
    14.                 var text = xhr.responseText;
    15.                 console.log(text);
    16.             }
    17.         }
    18.     }
    19.  
    20.     function f2() {
    21.         //post方法传递参数
    22.         var xhr = new XMLHttpRequest();
    23.         xhr.open("post","DServlet");
    24.         //必须设置请求头
    25.         xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
    26.         xhr.send("uname=ww&pwd=456");
    27.         xhr.onreadystatechange = function () {
    28.             if (xhr.readyState == 4 && xhr.status == 200){
    29.                 var text = xhr.responseText;
    30.                 console.log(text);
    31.             }
    32.         }
    33.     }
    34.     script>
    35. head>
    36. <body>
    37. <body>
    38. <button onclick="f1()">get请求及传参button>
    39. <br>
    40. <button onclick="f2()">post请求及传参button>
    41. <br>
    42. <form action="aa" method="post">
    43.     <input type="submit">
    44. form>
    45. body>
    46. body>
    47. html>

    7. Ajax请求的响应数据格式及处理（重点）

    使用json数据格式（特殊格式的字符串, 和js对象格式一致），它比较方便简单，而且也有好用的json工具包。json格式在浏览器可以直接解析成对象格式

    Java对象的json字符串格式：

    • 普通Java对象的json字符串格式：

      User user = new User(1, "张三丰", 18, "北京");
​
{"id":1, "name":"张三丰", "age": 18, "address":"北京"}

    • Map集合对应的json字符串格式：

      Map map = new HashMap<>();
map.put("key1", "value1");
map.put("key2", "value2");
​
{"key1":"value1", "key2":"value2"}

    • List集合对应的json字符串格式：

      List list = new ArrayList<>();
list.add(new User(1, "赵敏", 18, "北京"));
list.add(new User(2, "周芷若", 28, "上海"));
​
[
    {"id":1, "name":"赵敏", "age":18, "address":"北京"},
    {"id":2, "name":"周芷若", "age":28, "address":"上海"}
]

    Ajax获取响应数据的方式：var 变量名 = xhr.responseText;

    1. 获取到的是普通字符串数据：直接使用

    2. 获取到的是json格式的字符串：使用js的eval()函数，将json格式的字符串转换为js对象

    三、 jQuery封装的Ajax的使用

    • 第一种：

      $.ajax({
    type:“请求方式”,
    url:“请求地址”，
    data:“请求参数”，
    dataType:"服务器返回的数据类型"
    success:fundction(data){ //成功且完整响应自动调用的函数
        
        },
    error: function(){ //出现错误自动调用的函数
      
    }
})

      dataType：用来指定服务器返回来的数据类型，可选值有如下：

      • xml：表示服务器返回的是xml内容

      • html：表示服务器返回的是html文本内容

      • script：表示服务器返回的是script文本内容

      • json：表示服务器返回的是json内容（重点）

      • jsonp：表示使用jsonp形式调用函数，早期我们用它来解决跨域问题

      • text：表示服务器返回的是纯文本字符串

    • 第二种：

      • $.get(“请求地址”，“请求参数”，回调函数, 返回的数据类型)

      • $.post(“请求地址”，“请求参数”，回调函数, 返回的数据类型)

    回调函数主要是用来处理服务器对我们的响应结果。

    返回的数据类型这个参数用来设置服务器返回来的数据类型，可以是xml, html, script, json, text。

    • 第三种：

      • $.getJSON("请求地址", "请求参数", "回调函数")

    这种方式要求服务器返回的数据类型得是json格式的。

    • 第四种：

      • $.getScript("请求地址", "回调函数")

      这种方式是发送ajax请求获取一个js文件。

  • 相关阅读:
    电容元件符号与工作原理：电子电路中的电荷储存利器 | 百能云芯
    CentOS服务器利用docker搭建中间件命令集合
    MySQL MVCC你了解吗
    prize_p1
    flume 采集指定端口的日志
    用巴特沃斯滤波器对原始信号进行滤波
    mysql 数据库链接状态确认实验
    以脚本形式运行python库
    【PyTorch 攻略 （3/7）】线性组件、激活函数
    网络程序通信的流程---socket与TCP的简单认识
  • 原文地址：https://blog.csdn.net/m0_59163770/article/details/133581355