写了一个最基本的Ajax实例
// ajax方法
var param = {
url:'',
type: 'get',
data: {},
success: function() {},
error: function() {},
}
var ajax = function(param,callback) {
// 创建ajax
var xhr = XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
//对传入的值进行前期主力,包括type/url/data
var type = (param.type || 'get').toUpperCase();
var url = param.url;
if(!url){
return;
}
var data = param.data,
dataArr = [];
for(var k in data) {
dataArr.push(k + '=' + data[k]);
}
//为了避免取得的是缓存数据,为其添加一个唯一的id
dataArr.push('=' + Math.random());
//get还是post。url处理,open()。send()
if(type === "GET"){
if(callback){
url = callback(url,data);
}else{
url = url + "?" + dataArr.join("&");
}
console.log(url);
xhr.open(type,url.replace(/\?$/g,''),true);
xhr.send();
}else if(type === "POST"){
xhr.open(type,url,true);
//像表单一样post数据,使用setRequestHeader来添加头部
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send(dataArr.join("&"));
}
//接收请求
xhr.onreadystatechange = function(){
//成功
console.log(xhr.responseText);
if(xhr.status === 200 || xhr.status === 304 ){
var res;
if(param.success && param.success instanceof Function){
// 获取字符串形式的响应数据
res = xhr.responseText;
if(!isJSON(res)){
// 把JSON转换成数组
// res = JSON.parse(res);
param.success.call(xhr,res);
}else{
res = JSON.parse(res);
param.success.call(xhr,res);
}
}
}else{
// 失败
if(param.error && (param.error instanceof Function)){
param.error.call(xhr,res);
}
}
}
}
网友评论