认识并学会使用AJax

最新推荐文章于 2024-08-18 22:16:18 发布

啊唯11

最新推荐文章于 2024-08-18 22:16:18 发布

阅读量348

点赞数

文章标签： ajax javascript 前端

本文链接：https://blog.csdn.net/weixin_66059613/article/details/128173968

版权

1.Ajax是什么?

“Asynchronous Javascript And XML”(异步JavaScript和XML)

Ajax就是让浏览器跟服务器交互的一套API。它的作用就是让浏览器和服务器进行交互。

是向服务器请求数据的局部刷新页面的技术。

2.学习Ajax的目标是什么?

学会使用Ajax根据接口文档和服务器交互。

目前，我们网页所有的数据都是写死的。实际开发中，网页的数据需要从服务器获取

而Ajax技术就是来实现这一功能的。

3.Ajax基本使用结构

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 1.创建一个请求对象
        let xhr = new XMLHttpRequest()
        // 2.调用xhr的open方法，开启请求
        // 传入请求方法和请求地址
        xhr.open('get', 'https://autumnfish.cn/api/joke')
        // 3.设置请求成功后的回调函数
        xhr.onload = function () {
            console.log(xhr.response);
        }
        //4.调用send方法
        xhr.send()
    </script>
</body>

</html>

4.get请求

GET (SELECT):服务器取出资源(一项或多项)我们之前是向服务器要内容是获取资源用的是get请求方法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        //AJAX发送get请求，通过url地址拼接传递参数
        // url地址？key=value 

        //1.创建请求对象
        let xhr = new XMLHttpRequest()
        // 2.调用open，设置请求方式和请求地址
        xhr.open('get', 'https://autumnfish.cn/api/joke/list?num=10')
        //3.设置请求成功后的回调函数
        xhr.onload = function () {
            // console.log(xhr.response);
            let obj = JSON.parse(xhr.response)
            console.log(obj);
        }
        // 发送请求
        xhr.send()
    </script>
</body>
</html>

5.Ajax发送get请求

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            /* 居中 */
            text-align: center;
        }

        input {
            border: 4px solid greenyellow;
            background-color: aqua;
        }

        .joke-container {
            border: 1px solid rgb(55, 44, 44);
            height: 500px;
            width: 500px;
            margin: 0 auto;
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <input type="button" value="点我看笑话" class="getJoke">
    <div class="joke-container"></div>

    <script>
        document.querySelector('.getJoke').onclick = function () {
            // 1.创建一个请求对象
            let xhr = new XMLHttpRequest()
            // 2.调用xhr的open方法，开启请求
            // 传入请求方法和请求地址
            xhr.open('get', 'https://autumnfish.cn/api/joke')
            // 3.设置请求成功后的回调函数
            xhr.onload = function () {
                // 把响应的内容打印在控制台里
                // console.log(xhr.response);

                // 把响应的内容显示在div区域
                document.querySelector('.joke-container').innerHTML = xhr.response;
            }
            //4.调用send方法
            xhr.send()
        }
    </script>
</body>

</html>

6.post请求

POST (CREATE):在服务器新建一个资源我们现在做的是注册用户是在服务器新建一个资源用的是post请求

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <!-- AJAX发生post请求
         1.创建请求对象，实例化一个ajax对象
         2.调用open方法，设置请求方式和地址
         3.设置请求头（post请求才需要设置）（固定语法）
         4.设置请求成功后的回调函数
         5.send()方法去发生ajax请求 -->
    <script>
        // AJAX发生post请求
        // 1.创建请求对象，实例化一个ajax对象
        let xhr = new XMLHttpRequest();
        // 2.调用open方法，设置请求方式和地址
        xhr.open('post', 'https://autumnfish.cn/api/user/register')
        // 3.设置请求头（post请求才需要设置）（固定语法）
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
        // 4.设置请求成功后的回调函数
        xhr.onload = function () {
            console.log(xhr.response);
        }
        //5.send()方法去发生ajax请求，要注意 用send方法传递我们的参数时 一定在等号前后 不能有空格 不然这个参数就传递失败了
        xhr.send('username=陈mour是') 
    </script>

</body>

</html>