原生AJAX请求

目录

 一、GET请求

步骤：

1.创建对象

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

3.发送（可不写内容）

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

二、POST请求

步骤：

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

2.初始化 设置类型和 url

3.发送

 4.事件绑定

三、响应JSON数据

步骤：

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

2.设置响应体的数据

3.初始化

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

5.事件绑定

四、网络超时和异常

步骤:

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

2.设置超时设置 2s

3.设置回调

4.初始化

5.事件绑定

五、取消请求

六、重复请求问题

---

 一、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;
                    }
                }
            }

五、取消请求

    点击发送
    点击取消
    

六、重复请求问题

    点击发送