直接上代码
//封装的ajax函数
// 传一个对象,所有要用的参数都在对象中 因为不写对象 实参列表个数太多,所以像jq一样,调用ajax也是把对象当实际参数传进去
// type 请求方式 默认get
// url 请求地址 这个必须要有,没有直接 return 后面都不需要判断
// async 是否异步 如果不传默认是true true是异步,false是同步 很鸡肋,既然用了ajax一般都是异步
//data : 对象的形式 用对象包裹,jq中提供了表单序列化 $(表单).serialize() 得到所以表单的键值对字符串
//success :成功的回调函数 有参数
//error: 失败的回调函数
// dataType: 值:xml/json/text
以下为代码部分:
function ajax(options){
//如果没传参数,获取传的不是对象,那么直接return
if(!options || typeof options !== 'object'){
return;
}
var type = options.type;
var url = options.url;
//如果没有传url则直接return
if(!url){
return;
}
//获取async参数,并且做判断是否异步
var async = options.async === false ? false : true;
//由于传入的参数变成了对象,所以需要把对象转换成字符串
var params = getParams(options.data);
//1. 创建实例
var xhr = new XMLHttpRequest();
//增加的功能,如果不传或者传的是其他的不符合要求的就用get请求,如果传post就用post请求
type = type === 'post' ? 'post' : 'get';
// 2. 设置请求行
//判断是否是get请求,如果是get请求要拼接参数
if(type === 'get'){
url += '?' + params;
params = null;
}
xhr.open(type, url, async);
// 3. 设置请求头 post才设置
if(type === 'post'){
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
}
// 4. 发送请求
// if(type === 'get'){
// xhr.send();
// }else{
// xhr.send(params);
// }
xhr.send(params);
// 5. 监听响应
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
//根据dataType去做对应的处理,保证在成功的回调函数中,拿到处理后的数据
if(options.dataType === 'json'){
var result = JSON.parse(xhr.responseText);
}else if(options.dataType === 'xml'){
var result = xhr.responseXML;
}else{
var result = xhr.responseText;
}
//成功了
// 调用success的回调函数
//如果没传成功的回调函数,那么就不应该调用
options.success && options.success(result);
}else{
//失败了
options.error && options.error();
}
}
}
}
//函数的作用: 将对象转成键值对形式的字符串
//这里是原生js,所以需要封装函数将参数对象里的data数据转成字符串格式提交给后台 jq就比较方便了serialize()
function getParams(obj){
if(!obj){
return;
}
var arr = [];
for(var k in obj){
arr.push(k +'=' + obj[k]);
}
return arr.join('&');
}
结尾 var $ = {
ajax:function(){}
}
$.ajax();是不是很像?哈哈哈
