阶段五-Day03-Ajax

酷寒的小蛮蛮2023-10-06 16:55

一、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发送请求
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
        传统请求:
            1.地址栏发起请求
            2.超链接发起请求
            3.location.href发起请求
            4.form发起请求
            5.window.open()方法(是在新标签页打开)

        缺点: 发起请求后,响应回来的内容覆盖原有的页面
        简单理解: document对象直接发起的请求, 响应回来什么内容,页面就会显示什么内容

        ajax请求:
            页面不变的情况下,发送请求,获取响应数据,将响应数据完成局部刷新
            ajax属于js的技术
            简单理解:xhr对象发起请求,页面不变
        -->
    <script>
        function f() {
            //1.创建xhr对象
            var xhr = new XMLHttpRequest();
            //2.开启连接
            xhr.open("get","AServlet");
            //3.发起请求
            xhr.send();
            //4.监听readyState(状态码)的变化事件
            //,一旦readyState发生变化,启动函数执行
            xhr.onreadystatechange = function () {
                /*
                * readyState:
                *   0:创建了xhr对象,还没有连接
                *   1:建立了连接,还没有发送请求
                *   2:发送了请求,服务端开始处理
                *   3:服务器响应,但没有响应完(通常仅完成了响应头中数据的处理)
                *   4:服务器完成了完整的响应
                * */
                //readyState为4，服务端完整响应。 响应状态码为200，成功响应。
                if (xhr.readyState == 4 && xhr.status == 200){
                    //xhr.responseText(响应回来的文本)
                    console.log(xhr.responseText);
                    document.getElementById("sp").innerText = xhr.responseText;
                }
            }
        }
    </script>
</head>
<body>
<h3>ajax01.html</h3>
<button onclick="f()">请求</button>
<br>
<span id="sp"></span>
</body>
</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：表示同步

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function f() {
            location.href = "CServlet";
        }
        //ajax发起同步请求
        function f1() {
            var xhr = new XMLHttpRequest();
            //默认是true,异步请求
            xhr.open("get","CServlet",false);
            xhr.send();
            var responseText1 = xhr.responseText;
            console.log("同步请求")
            console.log(responseText1);
        }
        //ajax发起异步请求
        function f2() {
            var xhr = new XMLHttpRequest();
            //默认是true,异步请求
            xhr.open("get","CServlet");
            xhr.send();
            //监听
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200){
                    var responseText2 = xhr.responseText;
                    console.log(responseText2);
                }
            }
            console.log("异步请求");
        }
    </script>
</head>
<body>
<!--
    同步请求: 浏览器发送请求之后,一直等待服务器的响应,服务器响应完成后,才继续向下执行
       比如:
       1.地址栏直接发起的请求
       2.超链接发起请求
       3.form表单发起请求
       4.location.href发起请求

    ajax也可以发送同步请求: 但是页面不变,局部刷新

    异步请求: 浏览器发送请求后,不需要等待服务器的响应,继续执行其他代码,服务器响应后会有结果
    可以是函数的执行
-->
<a href="CServlet">超链接</a>
<hr>
<form action="CServlet">
    <input type="submit">
</form>
<hr>
<button onclick="f()">location.href</button>
<hr>
<a href="javascript:void(0)" onclick="f1()">ajax同步请求</a>
<hr>
<a href="javascript:void(0)" onclick="f2()">ajax异步请求</a>
</body>
</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");

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
    function f1() {
        //get方法传递参数
        var xhr = new XMLHttpRequest();
        xhr.open("get","DServlet?uname=zs&pwd=123");
        xhr.send();
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200){
                var text = xhr.responseText;
                console.log(text);
            }
        }
    }

    function f2() {
        //post方法传递参数
        var xhr = new XMLHttpRequest();
        xhr.open("post","DServlet");
        //必须设置请求头
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
        xhr.send("uname=ww&pwd=456");
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200){
                var text = xhr.responseText;
                console.log(text);
            }
        }
    }
    </script>
</head>
<body>
<body>
<button onclick="f1()">get请求及传参</button>
<br>
<button onclick="f2()">post请求及传参</button>
<br>
<form action="aa" method="post">
    <input type="submit">
</form>
</body>
</body>
</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<String, Object> map = new HashMap<>();
map.put("key1", "value1");
map.put("key2", "value2");
​
{"key1":"value1", "key2":"value2"}

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

    复制代码 
    List<User> 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文件。

相关推荐
林的快手16 分钟前
CSS列表属性
前端·javascript·css·ajax·firefox·html5·safari
匹马夕阳42 分钟前
ECharts极简入门
前端·信息可视化·echarts
bug总结1 小时前
新学一个JavaScript 的 classList API
开发语言·javascript·ecmascript
网络安全-老纪1 小时前
网络安全-js安全知识点与XSS常用payloads
javascript·安全·web安全
API_technology1 小时前
电商API安全防护：JWT令牌与XSS防御实战
前端·安全·xss
yqcoder1 小时前
Express + MongoDB 实现在筛选时间段中用户名的模糊查询
java·前端·javascript
liaojuajun1 小时前
axios
ajax
十八朵郁金香2 小时前
通俗易懂的DOM1级标准介绍
开发语言·前端·javascript
GDAL2 小时前
HTML 中的 Canvas 样式设置全解
javascript
m0_528723813 小时前
HTML中，title和h1标签的区别是什么？
前端·html
热门推荐
01DeepSeek各版本说明与优缺点分析02如何在WPS和Word/Excel中直接使用DeepSeek功能03DeepSeek本地部署详细指南04太炸裂了！清华大学deepseek从入门到精通使用手册又出第三版了，《普通人如何抓住DeepSeek红利》（无套路，直接下载）05本地部署DeepSeek教程（Mac版本）06DeepSeek r1本地安装全指南07DeepSeek R1本地化部署 Ollama + Chatbox 打造最强 AI 工具08本地化部署AI知识库：基于Ollama+DeepSeek+AnythingLLM保姆级教程09在Windows下安装Ollama并体验DeepSeek r1大模型10DeepSeek RAGFlow构建本地知识库系统