ajax的兼容

ajax请求时 会先创建一个 ajax请求的 实例化对象 -- xhr

1. readyState  ajax状态码 表示 ajax  请求进行的步骤

0: 创建了ajax对象

1: 设定了 open() 设定了传参方式和传递对象url地址

2: 发送了 请求

3: 接收了 响应报文 , 在 响应报文中 有 响应体 响应体是请求结果

并且正在从响应报文中,解析响应体 内容

4: 响应报文解析完毕,响应体内容,已经存储在 response 和 responseText中可以获取了

readyState 状态码 为 4 的时候 , 表示 请求 已经结束了

2. response 和 responseText

请求 解析出来的 响应体 内容

如果请求成功,是响应体内容

如果请求失败,一般是报错信息

3.status        http状态码  范围 是 100 - 599  表示 请求 状态

100 - 199  表示 请求正在连接中,可以继续执行操作

200 - 299  表示 请求成功

300 - 399  表示 是重定向请求

重定向  我想去A  但是 实际上 先去了 B 从 B 再去了 A

400 - 499  表示 请求失败 失败原因在 客户端

500 - 599  表示 请求失败 失败原因在 服务器

4.statusText   http状态秒数

通过文字内容,描述请求状态

ajax兼容 低版本 IE 浏览器

创建: ajax 对象

标准浏览器:

xhr = new XMLHttpRequest();

低版本IE浏览器

xhr = new ActiveXObject('Microsoft.XMLHTTP');

兼容语法

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

接收响应体:

标准浏览器

xhr.onload = ()=>{}

低版本IE

兼容语法

    // 当 readyState ajax请求状态改变时 执行的程序
    xhr.onreadystatechange = function(){
        // ajax状态码为4,请求结束 并且 http状态码是 200-299,请求成功
        if( readyState === 4 && ( status >= 200 && status <= 299 ) ){
        // 请求成功执行的程序
        }
    }
    // 正则表达式,判断 在 200 - 299 之间
    // /2\d{2}/.test( status )

ajax兼容dome

    const oBtn = document.querySelector('button');
    oBtn.addEventListener('click' , ()=>{
        // 1,创建 xhr对象
        let xhr = {};

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

        // 2,设定open()
        xhr.open('get' , './demo.php');

        // 3,发送send()
        xhr.send()

        // 4,接收
        xhr.onreadystatechange = ()=>{
            if(xhr.readyState === 4 && /2\d{2}/.test(xhr.status) ){
                console.log( JSON.parse(xhr.response) );
            }
        }
    })