Ajax请求之XMLHttpRequest

一.ajax请求封装

// 处理一个HTTP请求的方法
var request = new XMLHttpRequest(); // 新建XMLHttpRequest对象
request.onreadystatechange = function (){
    //状态发生变化时，函数被回调
    if(request.readyState == 4){
        //成功完成
        //判断响应结果
        if(request.status == 200){
            // 成功，通过responseText拿到响应的文本
            console.log(request.responseText);
        }else{
            // 失败，根据响应码判断失败原因
            console.log(request.status);
        }
    }
}

request.open("GET", "/api/categories", true);

request.send();

open的参数

1. 请求方法，包括get/post等
2. 请求地址
3. 表示是否异步请求，若为false则是同步请求，会阻塞进程

request.open("GET", "/api/categories", true);

request.send();

 二.使用ES6de promise方式，变成通过promise进行异步回调的请求函数

function Ajax({method, url, params, contentType}){
    const xhr = new XMLHttpRequest();
    const formData = new FormData();
    Object.keys(params).forEach((key)=>{
        formData.append(key, params[key])
    })


    return new Promise((resolve, reject)=>{
        try{
            xhr.open(method, url, false)
            xhr.setRequestHeader("Content-Type", contentType)
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    if(xhr.status >= 200 && xhr.status < 400){
                        // 这里使用200 400 来判断
                        resolve(xhr.responseText)
                    }else{
                        // 返回请求信息
                        reject(xhr)
                    }
                }
            }
            xhr.send(formData)
        }catch(err){
            // 返回错误
            reject(err)
        }
    })


}

 三.Object.keys()的用法

1.处理对象，返回可枚举的属性数组

　　　　let person = {name:"张三",age:25,address:"深圳",getName:function(){}}
　　　　Object.keys(person) // ["name", "age", "address","getName"]

2.处理数组，返回索引值数组

　　　　let arr = [1,2,3,4,5,6]
　　　　Object.keys(arr) // ["0", "1", "2", "3", "4", "5"]

3.处理字符串，返回索引值数组

　　　　let str = "12345字符串"
　　　　Object.keys(str) // ["0", "1", "2", "3", "4", "5", "6", "7"]

四.new FormData实例对象

　　var theformdata = new FormData()
　　console.log(theformdata);