ajax知识总结系列之二

原生ajax简单封装步骤：

// 第一步：创建对象
var xhr =null;
if(window.XMLHttpRequest){
   xhr = new XMLHttpRequest();
}else{
   xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

// 第二步：初始化请求，
// 方式：get或post
// 地址：url
// 标志位：同步false，异步true
xhr.open(“方式”,”地址”,”标志位”);
// 设置http头信息
// post有Content-Type，get没有
xhr.setRequestHeader(“”,””);

// 第三步，发送请求
xhr.send();

// 第四步，指定回调函数
xhr.onreadystatechange =function(){}

原生ajax详细封装代码

    function ajax(data) {
        //第一步：创建xhr对象
        var xhr = null;
        if (window.XMLHttpRequest) {//标准的浏览器
            xhr = new XMLHttpRequest();
        } else {
            xhr = new ActiveXObject('Microsoft.XMLHTTP');
        }
        //第二步：准备发送前的一些配置参数
        var type = data.method === 'get' ? 'get' : 'post';
        var url = '';
        if (data.url) {
            url = data.url;
            if (type === 'post') {
                //new Date().getTime()时间戳用来清理缓存
                url += "?" + data.params + "&_t=" + new Date().getTime();
            }
        }
        var flag = data.async === 'true' ? 'true' : 'false';
        xhr.open(type, url, flag);

        //第三步：执行发送的动作
        if (type === 'get') {
            xhr.send(null);
        } else if (type === 'post') {
            //设置请求头的格式
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            //post请求携带参数
            xhr.send(data.params);
        }

        //第四步：指定回调函数
        xhr.onreadystatechange = function () {
            if (this.readyState === 4) {
                if (this.status === 200) {
                    if (typeof data.success === 'function') {
                        var d = data.dataType === 'xml' ? xhr.responseXML : xhr.responseText;
                        data.success(d);
                    }
                } else {
                    if (typeof data.failure === 'function') {
                        data.failure();
                    }
                }
            }
        }

    }


    window.onload = function () {
        //注册按钮单击事件
        var btn = document.getElementById('btn');
        btn.onclick = function () {
            var param = {
                url: '',
                method: 'post',
                async: true,
                dataType: 'json',
                params: {name: 'xiaoke', password: '110'},
                success: function (data) {
                    alert(data);
                },
                failure: function () {
                    alert("亲，服务器请求超时！")
                }
            };
            //调用原生封装的ajax
            ajax(param);
        }
    }