尚硅谷-AJAX学习笔记

最新推荐文章于 2024-04-28 20:18:06 发布

十七

最新推荐文章于 2024-04-28 20:18:06 发布

阅读量231

点赞数

文章标签： ajax

本文链接：https://blog.csdn.net/qq_44756614/article/details/117199727

版权

1.AJAX请求的基本注意事项

1.1打开文件注意事项

打开文件注意事项，需要在文件所在目录下右键

<在集成终端打开>

之后输入

node +文件名称

1.2 AJAX操作基本步骤

1.2.1 创建对象

const xhr = new XMLHttpRequest();

xhr = 对AJAX请求进行筛选

1.2.2 初始化，设置请求方法和url

xhr.open('GET', 'http://127.0.0.1:8000/server');

xhr.open('请求类型', '请求对象');

1.2.3 发送

xhr.send();

1.2.4 事件绑定，处理服务端返回的结果

 xhr.onreadystatechange = function() {
        //判断服务端返回的所有结果
                    if (xhr.readyState === 4) {
                        if (xhr.status >= 200 && xhr.status < 300) {
                            // 响应行
                            console.log(xhr.status); //状态码
                            console.log(xhr.statusText); //状态字符串
                            console.log(xhr.getAllResponseHeaders()); //所有响应头
                            console.log(xhr.response); //响应体
                        } else {

                        }
                    }
                }

2. GET地址传参

（用问好分割，在后面设置）

xhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200&c=300');

3. 发送POST请求

POST.html

<body>
    <div id="result"></div>
    <script>
        const result = document.getElementById("result");
        result.addEventListener("mouseover", function() {
            // 1 创建对象
            const xhr = new XMLHttpRequest();
            xhr.open('POST', 'http://127.0.0.1:8000/server');
            xhr.send();
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        result.innerHTML = xhr.response;
                    }
                }
            }
        });
    </script>
</body>

server.js 设置对应的请求段


app.post('/server', (request, response) => {
    response.setHeader(
        // 设置响应头，设置允许跨域
        'Access-Control-Allow-Origin', '*'
    );
    // 设置响应体
    response.send("hello ajax post");
});

4. POST请求中设置参数

写在send中，设置任意格式都可以，比较灵活，服务端需要有与之对应的处理方式

 xhr.send('a=100&b=200&c=300');
//或者
 xhr.send('a:100&b:200&c:300');

5. 设置请求头信息

// 设置请求头
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// 设置请求体类型：参数查询字符串

添加自定义请求头时浏览器会有安全机制提示，在server.js中设置如下：

// all可以接收任意类型的请求：get/post/option/delete等
app.all('/server', (request, response) => {
    response.setHeader(
        // 设置响应头，设置允许跨域
        'Access-Control-Allow-Origin', '*'
    );
    response.setHeader('Access-Control-Allow-Headers', "*");
    // 设置响应体
    response.send("hello ajax post");
});

6. 服务端响应JSON数据

<script>
        const result = document.getElementById("result");
        // 键盘按下事件
        window.onkeydown = function() {
            const xhr = new XMLHttpRequest();
            xhr.open('GET', 'http://127.0.0.1:8000/json-server');
            xhr.send();
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        console.log(xhr.response);
                        result.innerHTML = xhr.response;
                    }
                }
            }

        }
    </script>

send（）只能接受字符串/buffer，设置Object类型需要先转化


app.all('/json-server', (request, response) => {
    const data = {
        name: 'atguigu'
    };
    // 对对象进行字符串转化
    let str = JSON.stringify(data);
    // 设置响应体
    response.send(str);
});

// 1. 自动对数据转化
 xhr.responseType = 'json';
 console.log(xhr.response);
 result.innerHTML = xhr.response.name;
// 2. 手动对数据转化
 let data = JSON.parse(xhr.response);
 console.log(data);
 result.innerHTML = data.name;