原生封装Ajax
Ajax的实现主要分为四部分:
1、创建Ajax对象
// 创建ajax对象
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
} else {
//为了兼容IE6
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
2、连接服务器
// 连接服务器open(方法GET/POST,请求地址, 异步传输)
xhr.open('GET', url, true);
xhr.open('POST', url, true)
3、发送请求
// 发送请求
//GET
xhr.send();
//在url里?username=admin&password=admin
//POST
xhr.send(data)
//post请求一定要添加请求头才行不然会报错
1.设置的请求编码方式是:
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded;charset=utf-8');
data格式:'username=admin&password=admin'
2.设置的请求编码方式是:
xhr.setRequestHeader('Content-type', 'aplication/json;charset=utf-8');
data格式:需要将对象序列化JSON.stringfy(json对象)
4、接收返回数据
// 处理返回数据
/*
** 每当readyState改变时,就会触发onreadystatechange事件
** readyState属性存储有XMLHttpRequest的状态信息
** 0 :请求未初始化
** 1 :服务器连接已建立
** 2 :请求已接受
** 3 : 请求处理中
** 4 :请求已完成,且相应就绪
*/
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
/*
** Http状态码
** 1xx :信息展示
** 2xx :成功
** 3xx :重定向
** 4xx : 客户端错误
** 5xx :服务器端错误
*/
if(xhr.status == 200){
success(xhr.responseText);
} else {
if(failed){
failed(xhr.status);
}
}
}
}
Ajax封装函数:
function Ajax(type, url, data, success, failed){
// 创建ajax对象
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject('Microsoft.XMLHTTP')
}
var type = type.toUpperCase();
// 用于清除缓存
var timestamp = new Date().getTime();
if(typeof data == 'object'){
var str = '';
for(var key in data){
str += key+'='+data[key]+'&';
}
data = str.replace(/&$/, '');
}
if(type == 'GET'){
if(data){
xhr.open('GET', url + '?' + data, true);
} else {
xhr.open('GET', url + '?t=' + timestamp, true);
}
xhr.send();
} else if(type == 'POST'){
xhr.open('POST', url, true);
// 如果需要像 html 表单那样 POST 数据,请使用 setRequestHeader() 来添加 http 头。
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send(data);
// 如果需要 json 那样 POST 数据,请使用 setRequestHeader() 来添加 http 头。
xhr.setRequestHeader("Content-type", "application/json");
xhr.send(data);
}
// 处理返回数据
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
success(xhr.responseText);
} else {
if(failed){
failed(xhr.status);
}
}
}
}
}
// 测试调用
var sendData = {name:'asher',sex:'male'};
Ajax('get', 'data/data.html', sendData, function(data){
console.log(data);
}, function(error){
console.log(error);
});
欢迎访问原作者的独立博客:https://www.cnblogs.com/Webcom/p/3415295.html