Ajax的兼容及状态码

最新推荐文章于 2022-04-05 23:24:19 发布

咩有猫腻.

最新推荐文章于 2022-04-05 23:24:19 发布

阅读量114

点赞数

分类专栏： Ajax

本文链接：https://blog.csdn.net/DcTbnk/article/details/105767643

版权

Ajax 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

一.ajax的兼容

<script>
    // ajax的兼容处理

    // 1.创建ajax对象的方法

    // 标准浏览器 
    // const xhr = new XMLHttpRequest();

    // 低版本IE浏览器         
    // const xhr = new ActiveXObject('Microsoft.XMLHTTP');

    // 兼容语法
    // 不能用const 只要能用var
    if(XMLHttpRequest){
        var xhr = new XMLHttpRequest();
    }else{
        var xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }


    // 接收相应的时,也要做兼容处理

    // 标准方法  当请求结束时,触发程序
    xhr.onload = function(){
        // 判断请求是否成功   
        if(xhr.readyState == 4 && /^2\d{2}$/.test(xhr.status)){}
    }


    // 兼容低版本IE语法   当ajax请求状态码发生改变时,触发程序
    // 状态码 从 0 - 1 - 2 - 3 - 4 每次状态码改变,都会触发程序

    // 位置不同,执行次数不同

    // 情况1 : 写在  const xhr = new XMLHttpRequest(); 创建对象下
    // 会监听到每一次的状态码的改变,一共是4次

    // 情况2 : 写在  xhr.send() 后,也就是整个程序的最后
    // 0-1 状态码的改变没有监听到,只会有之后3次的状态改变监听

    // 不管如何,一定可以监听到最后状态码改变为4时的状态

    // /^2\d{2}$/.test(xhr.status)
    // 2,开头,之后有2位数字  表示以2开头的,3位数值

    // 200 - 299 之间  xhr.status >= 200 && xhr.status <= 299
    // 两种都可以,哪个能理解,用那个

    xhr.onreadystatechange = function(){
        // 当状态码为4时,请求状态为2开头的3位数值时
        // 有正确的响应体内容
        if(xhr.readyState == 4 && /^2\d{2}$/.test(xhr.status)){
            // 执行程序
        }
    }









</script>

二.ajax的状态码

ajax执行的状态码   xhr.readyState
    即时请求失败,也会走完所有的执行步骤
    0 : 表示创建了ajax对象
    1 : 表示设定了ajax对象的open()方法
    2 : 表示浏览器接收到响应体,但是存储在响应报文中,无法使用
    3 : 表示浏览器正在从响应报文中分离响应体
    4 : 表示浏览器分离响应体成功,可以正常使用响应体

ajax请求的响应状态码  xhr.status
    以 2 开头 200-299 表示请求成功
        response中会有正确的响应体
    400-499 500-599 表示请求错误 
        response中会有报错信息

在这里插入图片描述

三.demo1

<body>
    <h1>ajax请求demo1,get请求</h1>
    <button>点击访问</button>
    <script>
        // 通过ajax方式来请求访问PHP程序

        const oBtn = document.querySelector('button');

        oBtn.addEventListener('click', () => {

            if (XMLHttpRequest) {
                const xhr = new XMLHttpRequest();
            } else {
                const xhr = new ActiveXObject('Microsoft.XMLHTTP');
            }

            console.log(xhr);

            xhr.open('get', './ajax1.php');

            xhr.send();

            // 标准语法
            // xhr.onload = function(){
            //     console.log(xhr);
            // }

            // 兼容语法1 , 正则表达式
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && /^2\d{2}$/.test(xhr.status)) {
                    console.log('请求成功');
                }
            }

            // 兼容语法2 
            // xhr.onreadystatechange = function () {
            //     if (xhr.readyState == 4 && (xhr.status >= 200 && xhr.status <= 299)) {
            //         console.log('请求成功');
            //     }
            // }
        })


    </script>
</body>

四.ajax1.php

<?php

echo '我是随便输出的内容,我就冒充响应体';

咩有猫腻.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录