js:ajax封装

ajax是主要靠XMLHttpRequest对象来完成与后台的链接。
get方式

//这是异步
        var xhr=new XMLHttpRequest();
        xhr.addEventListener("load",loadHandler);
        //        发送方式使用GET方式发送，就是在URL地址中在？后面添加参数=值的方式，并且使用&作为数据的组合
        //        使用GET方式发送适用于小数据，无需保密，尽量数据的格式不要太复杂,经常用于表单数据的发送
        xhr.open("GET","http://localhost:8080?user=xixi&password=123456",true);
        xhr.send();
         function loadHandler(e) {
//              具体返回的时间不确定
              console.log(JSON.parse(this.response));
          }

post方式

		var obj={user:"xixi",password:123};
        var xhr=new XMLHttpRequest();
        xhr.addEventListener("load",loadHandler);
        xhr.open("POST","http://localhost:8080");
        xhr.send(encodeURIComponent(JSON.stringify(data)));//发送的内容写在这里，变成字符串，然后进行编码
        function loadHandler(e) {
            console.log(JSON.parse(decodeURIComponent(this.response)));//先解码，然后在转成字符串
        }

2种方式进行封装

 AjaxTool(method, url, data, fn) {
            var xhr;
            if (window.ActiveXObject) { //ie浏览器
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            } else if (window.XMLHttpRequest) { //其他浏览器
                xhr = new XMLHttpRequest();
            }
            if (method == 'get') {
                url = this.urlJoin(url, data)
                data = null
            }
            xhr.open(method, encodeURIComponent(url));
            xhr.send(data ? encodeURIComponent(JSON.stringify(data)) : '')
            xhr.addEventListener('load', function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    fn(this.response)//回调函数
                } else {
                    fn('err')
                }

            })
        },
        //将对象拼接到url中
        urlJoin(url, obj) {
            var list = []
            for (var key in obj) {
                if (obj.hasOwnProperty(key)) {//判断一个对象属性里是否包含某个key
                    list.push(`${key}=${obj[key]}`)
                }
            }
            return `${url}?${list.join('&')}`//用了es6模板字符串
        }