AJAX请求的基本操作

最新推荐文章于 2024-05-21 23:21:19 发布

REWOPTEG

最新推荐文章于 2024-05-21 23:21:19 发布

阅读量216

点赞数 2

分类专栏： AJAX 文章标签： ajax 前端

本文链接：https://blog.csdn.net/2301_79943136/article/details/136284789

版权

AJAX 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

// AJAX操作。

// 1、创建AJAX对象。
let xhr = new XMLHttpRequest();

// 2、AJAX请求超时设置。
// 值的单位是毫秒。下述表示当AJAX在2秒内未接收到服务端的响应时，将会取消此次请求。
xhr.timeout = 2000;

// 3、超时回调。若AJAX请求超时(上述设置了超时时间)，将会执行如下函数。
xhr.ontimeout = () => {
    alert("网速较慢，请稍后重试！");
}

// 4、网络异常回调。当网络出现异常(如断网等)，将会执行如下函数。
xhr.onerror = () => {
    alert("网络异常，请检查网络状态！");
}

// 5、除了超时取消请求以外，还可以手动取消请求。设置个按钮，当点击按钮时执行如下代码即可。
xhr.abort();

// 6、配置本次请求信息。
/*
IE缓存问题：
    问题：
        IE浏览器会对AJAX请求的结果进行缓存。
        当下一次AJAX发送同一请求时，会直接从本地缓存中获取结果。
        这样虽然提高了速度，但在一些时效性较强的场景中(结果频繁变动)，会影响真实结果。
        除了IE浏览器，其他浏览器如edge、chrome等没有这种问题。
    解决：
        在URL后添加参数，并使得该参数在每次请求时都发生变化，这样就能解决IE缓存问题。
        下述"Date.now()"表示获取当前时间。
        xhr.open("GET", "http://localhost:8000/test3?t="+Date.now(), true);
*/
xhr.open(请求方式["GET"，不区分大小写], 请求地址?key1=value1&key2=value2[GET请求参数], 是否异步[默认为true]);

// 7、注册请求完成事件。该事件在本次请求完成后触发。
xhr.onload = function () {}

// 8、设置请求头信息。（当你发送POST请求并且需要携带参数时，需要进行数据格式说明）
/*
注意：
    当我们自定义请求头信息时(eg：xhr.setRequestHeader("aaa", "bbb");)，浏览器会发送两次请求(一次预请求[OPTIONS请求]，一次实际的请求)。
解释：
    非简单请求，会在正式通信之前，增加一次HTTP请求，称之为预检请求。浏览器会先发起OPTIONS方法到服务器，以获知服务器是否允许该实际请求。
    OPTIONS请求方法不能用express框架中的"app.get(...);"和"app.post(...)"接收到，要用"app.all(...)"或者"app.options(...)"接收。
    欲详细了解“简单请求、非简单请求(复杂请求)、OPTIONS请求”，请看下述链接3和链接4。
避免：
    后端在请求的返回头部添加： 
        Access-Control-Max-Age:(number)。
        number数值代表"preflight request[预检请求]"的返回结果(即"Access-Control-Allow-Methods"和"Access-Control-Allow-Headers"提供的信息)可以被缓存多久，单位是秒。
        例如：
            将预检请求的结果缓存10分钟："Access-Control-Max-Age: 600"。
        注意：
            1、
            不同浏览器有不同的上限。在Firefox中，上限是24h(即86400秒)，而在Chromium中则是10min(即600秒)。Chromium同时规定了一个默认值5秒。
            如果值为-1，则表示禁用缓存，每一次请求都需要提供预检请求，即用OPTIONS请求进行检测。
            2、
            "Access-Control-Max-Age"方法对完全一样的url的缓存设置生效，多一个参数也视为不同url。
            也就是说，如果设置了10分钟的缓存，在10分钟内，所有请求第一次会产生options请求，第二次以及第二次以后就只发送真正的请求了。
*/
xhr.setRequestHeader("content-type", 传递参数的格式[application/x-www-form-urlencoded]);

// 9、把请求发送出去。
xhr.send("key1=value1&key2=value2"[POST请求参数]);

// 10、获取后端返回的数据。
// 将后端传递过来的数据以字符串形式返回。
let str = xhr.responseText;
/*
若返回的是JSON格式的字符串，可使用如下方式进行解析。返回值是解析好的数据（对象）。
    1、手动转换。
    let res = JSON.parse(str);
    2、自动转换。
    xhr.responseType = "json";  // 设置响应数据的类型。此时不能使用"xhr.responseText"获取响应数据，而应使用"xhr.response"获取。
    这种方法虽然方便，但是有个缺点，那就是如果后端响应的数据不是JSON类型的，那么"xhr.response"获取的值为null。
*/

// 11、XMLHttpRequest代理状态改变以及响应行/头/体信息的获取。
/*
单词拆分解读：
    on：事件绑定的前缀。eg：onclick等等。
    readystate：是xhr对象中的属性，表示该对象当前所处的状态(0, 1, 2, 3, 4)。详情如下链接1所示。
    change：状态改变。

执行一次AJAX会触发四次该事件（0-1, 1-2, 2-3, 3-4）。
*/
xhr.onreadystatechange = () => {
    // 判断当前XMLHttpRequest代理所处状态。为4可直接用上述"xhr.onload"替代"xhr.onreadystatechange"。
    if(xhr.readyState === 4) {
        // 判断响应状态码。因为状态码百位是2的都表示成功，所以我们按如下方式判断响应是否成功。
        if(xhr.status >= 200 && xhr.status < 300) {
            // 1、响应行信息获取。
            // 1.1、获取响应状态码。
            console.log(xhr.status);
            // 1.2、获取响应状态字符串。eg：相应行状态码200后面的那个"OK"。
            console.log(xhr.statusText);

            // 2、响应头信息获取。
            // 2.1、获取响应头所有信息。
            console.log(xhr.getAllResponseHeaders());
            // 2.2、获取响应头某个信息。
            console.log(xhr.getResponseHeader('Content-Type'));

            // 3、响应体信息获取。详情如下链接2所示。
            console.log(xhr.response);
        }
    }
}