原生AJAX请求

海上彼尚

已于 2023-02-05 17:38:41 修改

阅读量901

点赞数 2

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

于 2022-09-12 10:46:36 首次发布

本文链接：https://blog.csdn.net/weixin_63443072/article/details/126813943

版权

js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、GET请求

步骤：

1.创建对象

 const xhr = new XMLHttpRequest();

2.初始化设置请求方法和url

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

3.发送（可不写内容）

  xhr.send();

4.事件绑定处理服务端返回的结果

 //on 当......的时候
            //readystate 是 xhr 对象中的属性，表示状态0 1 2 3 4
            //change 改变
            xhr.onreadystatechange = function () {
                //判断（服务端返回了所有的结果）
                if (xhr.readyState === 4) {
                    //判断响应的状态200 404 403 401 500 
                    //响应中2xx 表示成功
                    if (xhr.status >= 200 && xhr.status < 300) {
                        //处理结果 行 头 空行 体
                        //1.响应行
                        /*console.log(xhr.status);//状态码
                        console.log(xhr.statusText);//响应状态字符串
                        console.log(xhr.getAllResponseHeaders());//所有的响应头
                        console.log(xhr.response);//响应体*/

                        //设置 result 的文本
                        result.innerHTML=xhr.response;
                    }
                }
            }

二、POST请求

步骤：

1.创建对象（跟以上get请求一样）

2.初始化设置类型和 url

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

//设置请求头
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

3.发送

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

4.事件绑定

xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        //处理服务端返回的结果
                        result.innerHTML = xhr.response;
                    }
                }
            }

三、响应JSON数据

步骤：

1.创建对象（跟以上get请求一样）

2.设置响应体的数据

xhr.responseType='json';

3.初始化

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

4.发送（跟以上get请求一样）

5.事件绑定

xhr.onreadystatechange = function () {
               if (xhr.readyState === 4) {
               if (xhr.status >= 200 && xhr.status < 300) {
               //处理服务端返回的结果
               // result.innerHTML = xhr.response;

               //手动对数据进行转化
               // let data = JSON.parse(xhr.response)
               // result.innerHTML = data;

               //自动对数据进行转化
               result.innerHTML = xhr.response.name;
               }
          }
    }

四、网络超时和异常

步骤:

1.创建对象（跟以上get请求一样）

2.设置超时设置 2s

xhr.timeout = 2000;

3.设置回调

// 超时回调 
xhr.ontimeout = function () {
    alert('网络异常，请稍后重试')
}

// 网络异常回调
xhr.onerror=function(){
    alert('你的网络似乎出了一些问题')
}

4.初始化

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

5.事件绑定

 xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        result.innerHTML = xhr.response;
                    }
                }
            }

五、取消请求

<body>
    <button>点击发送</button>
    <button>点击取消</button>
    <script>
        const btn = document.querySelectorAll('button')
        let x = new XMLHttpRequest();
        btn[0].addEventListener('click', function () {
            x.open('GET', 'http://127.0.0.1:8000/delay');
            x.send();
        })

        btn[1].addEventListener('click', function () {
            x.abort();
        })
    </script>
</body>

六、重复请求问题

<body>
    <button>点击发送</button>
    <script>
        const btn = document.querySelectorAll('button')
        let x=null;
        // 标志变量
        let isSending = false;    //是否正在发送AJAX请求
        btn[0].addEventListener('click', function () {
            if(isSending)// 如果正在发送则取消AJAX请求
            x.abort();
            x = new XMLHttpRequest();
            isSending = true;
            x.open('GET', 'http://127.0.0.1:8000/delay');
            x.send();
            x.onreadystatechange = function () {
                if (x.readyState === 4) {
                    isSending = false;
                }
            }
        })
    </script>
</body>