一,封装过程:
1,初步封装整体流程:
(1提取url地址,2提取请求方式type(get或者post),3true异步不用提取一般用的比较少,
4不同的业务逻辑在回调函数离处理,出入匿名函数callback参数,在回调函数尾部进行调用.)
function ajax(url,type,callback){
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
xhr.open(type,url,true);
xhr.send(null);
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
var data = xhr.responseText;
callback(data);
}
}
}
}
回调函数内封装,可以在html页面进行函数调用,得到数据渲染html页面。
对应的html页面:
2,兼容性封装处理:
(5传入param参数,拼接到type类型中。6,dataType数据类型,并判断
)
function ajax(url,type,param,dataType,callback){
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
if(type == 'get'){//get请求
url += "?" + param;
}
xhr.open(type,url,true);
var data = null;
if(type == 'post'){//post请求
data = param;
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
}
xhr.send(data);
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
var data = xhr.responseText;
if(dataType == 'json'){
data = JSON.parse(data);
}
callback(data);
}
}
}
}
html页面:
对应php页面