原生JS封装AJAX

1.实现过程

//https://www.w3school.com.cn/ajax/index.asp

        // 1、创建ajax对象

        // 2、ajax.open(method, url, true)

        // 3、ajax.send();

        // 4、onreadystatechange  4

        // 5、status == 200  403  503

        //使用jsonplaceholder来测试数据

基础内容可以参考w3c。首先我们需要新建一个ajax对象，使用该对象新建一个请求然后再发送，最后收到传回来的数据。

var xhr = null;
        if(window.XMLHttpRequest){
            xhr = new XMLHttpRequest();
        }else{
            xhr = new ActiveXObject("Microsoft.XMLHTTP");//ie
        }
        xhr.open('get','https://jsonplaceholder.typicode.com/posts',true);
        xhr.send();
        //每当readyState属性改变的时候都会调用该函数
        xhr.onreadystatechange = function(){
            //0,1,2,3,4  4代表请求已完成
            if(xhr.readyState == 4){
                if(xhr.status == 200){ //状态码
                    console.log(JSON.parse(xhr.responseText)); //转为JSON格式
                }
            }
        }

因为每次的请求的方式，url，参数可能都不相同，我们可以将其封装成一个函数。

function myAjax(method, url, data, callback, flag) {
            //1.新建AJAX对象
            var xhr = null;
            if (window.XMLHttpRequest) {
                xhr = new XMLHttpRequest();
            } else {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");//ie
            }
            //2.判断请求方式并发送请求
            if (method == 'get') {
                xhr.open(method, url + '?' + data, flag);
                xhr.send();
            } else if (method == 'post') {
                xhr.open(method, url, falg);
                xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
                xhr.send(data);
            }
            //3.请求已完成
            xhr.onreadystatechange = function () {
                //0,1,2,3,4  4代表请求已完成
                if (xhr.readyState == 4) {
                    if (xhr.status == 200) {
                        callback(xhr.responseText);//回调函数
                    }
                }
            }
        }
        function conso(data){
            console.log(JSON.parse(data))
        }
        myAjax('get','https://jsonplaceholder.typicode.com/todos/1','',conso,true)