阶段五-Day03-Ajax

最新推荐文章于 2024-10-04 20:50:40 发布

酷寒的小蛮蛮

最新推荐文章于 2024-10-04 20:50:40 发布

阅读量618

点赞数 2

分类专栏： java学习之路文章标签： ajax 前端 javascript

本文链接：https://blog.csdn.net/m0_59163770/article/details/133581355

版权

java学习之路专栏收录该内容

53 篇文章 1 订阅

订阅专栏

一、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实现的网页局部刷新的技术。

作用：

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

特点：

一种新的让浏览器发起http请求的技术
使用ajax发起的请求，响应结果不会自动的覆盖原有内容，而是可以在原有页面内容上继续显示
Ajax是一门基于JavaScript的技术，由浏览器解析运行，所以是一种前端（客户端）技术
简单易用

3.2 ajax发送请求

<!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执行步骤：

创建Ajax请求对象
建立连接
发送连接
监听状态变化及结果处理

设置ajax的同步异步：

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

true：表示异步，默认值

false：表示同步

<!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");

<!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;

获取到的是普通字符串数据：直接使用
获取到的是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(“请求地址”，“请求参数”，回调函数, 返回的数据类型)