原生JavaScript 封装ajax

function myajax(options) {
            //新建一个局部对象 用来存放用户输入的各种参数
            var opt = {
                type: options.type || "get",//获取用户输入的传输方法，可选，不写为get
                data: options.data || "",//获取用户输入的数据
                dataType: options.dataType || "",//获取用户输入的数据类型比如json 或者xml
                url: options.url || "",//用户输入的url
                success: options.success || null//成功函数。
            }

            if (opt.url == "") {//如果用户没有输入URL，这样是不允许的 。直接返回，不执行以后的操作
                alert("url不能为空");
                return;
            }
            if (options.type) {
                opt.type = options.type.toLowerCase();//将用户输入的POST等方法变成小写
            }
            //新建一个连接对象。标准浏览器中 都创建XMLHttpRequest 对象。非标准的浏览器中新建ActiveXObject
            var xhr = null;
            try {
                xhr = new XMLHttpRequest;
            } catch (e) {
                xhr = new ActiveXObject("Micsoft.XMLHTTP");
            }
            //如果用户用get方法，则需要拼接URL，将用户的数据放到URL传到后台
            if (opt.type == "get" && opt.data) {
                opt.url += "?" + opt.data;
            }
            xhr.open(opt.type, opt.url, true);//调用xhr.open方法连接后台借口
            //如果是get方法，则send函数不传值、
            if (opt.type == "get") {
                xhr.send(null);
            } else {
                //如果是post方法 则需要加一个连接头。且send函数中 传入用户的数据

                xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
                console.log(xhr);
                debugger;
                xhr.onload = function () {
                 // 请求结束后,在此处写处理代码
                 console.log("hhehheh")
                }
                xhr.send(opt.data);
            }
            //连接完毕，等后台返回结果和数据
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4) {//readyState有5种状态码。0,1,2,3,4
                    if (xhr.status == 200) {//http状态码为200代表成功
                        var data = xhr.responseText;//新建一个变量保存后台返回的数据
                        if (opt.dataType.toLowerCase() == "xml") {
                            data = xhr.responseXML;//如果后台返回的XML格式的数据.用responseXML来获取
                        }
                        if (opt.dataType.toLowerCase() == "json") {
                            data = JSON.parse(data);//如果是json 则用parse来将字符串转化为对象
                        }
                        if (typeof opt.success === 'function') {
                            opt.success(data);//如果有成功的回调函数 则将后台数据当做回调函数的参数返回过去
                        }
                    } else {
                        alert("出错啦" + xhr.status)//如果状态码不为200，连接失败，返回http状态码
                    }

                }

            }
        }

 

补充：

readyState的状态码含义

0：请求未初始化

1：服务器连接已建立

2：请求已接受

3：请求处理中

4：请求完成，且响应就绪。