手动封装一个ajax兼容性写法

首先我们先来了解一下ajax的过程及环境
1.浏览器
2.ajax对象
写法：window.XMLHttpRequest
兼容IE写法:ActiveXObject(‘Microsoft.XMLHttp’)
3.ajax.open(method,url,true/false);
method:请求方式如GET/POST/DELETE
true:表示异步
4.ajax.send()发送至服务器
异步过程，如method是post
send()中需要填写内容
5.onreadystatechange 监听变化状态
手动封装一个ajax兼容性写法
由于send是一个异步的过程，如果直接用ajax.readyState == 4
来判断响应内容是否解析完成是行不通的，因为send()在发送过程中
ajax.readyState == 4
这个过程就被实行了所以这个必不可能返回true
所以用onreadystatechange监听，每当readyState值变化，监听里的命令就执行一次
6.判断status == 200
判断status 即服务器返回码是否等于200，200代表成功执行函数
可以将要执行的函数先封装好，作为一个回调函数使用
即if(ajax.status == 200){
callback(xhr.responseText)
}

由于post get有以下几点区别，所以封装的时候还应该注意以下几点：
1.post 传递数据是放在send()中，而get的值是拼接在open(url)后面
2.post方式在send()之前还需要写一个表头
ajax.setRequestHeader(‘type’,‘application/x-www-form-urlencoded’);

所以在封装过程中需要写一个兼容post跟get方式的过程


function ajaxFun(method,url,data,callback,flag) {
    var xhr = null;//创建一个ajax对象
    //-------先封装兼容IE版本
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    } else {
        xhr = new ActiveXObject('Microsoft.XMLHttp');
    }
       //3.open过程
    if(method == 'GET'){
        xhr.open(method, url + '?' + data, flag);
        //4.send过程
        xhr.send();
    }else if(method =='post'){ 
         //3.open过程
        xhr.open(method,url,flag);
        xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
        //4.send过程
        xhr.send(data);
    }
    //5.监听
    //由于send是一个异步的过程所以不能用xhr.readyState == 4来判断
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            if (xhr.status == 200) {
                callback(xhr.responseText)
            }
        }
    }
}

希望对你有所帮助~

手动封装一个ajax兼容性写法

相关推荐