学到ajax这里,觉得这是前端一个非常重要的一个知识点,所以我想把ajax的这些方法,封装成一个类似于jquery那样的方法,首先要了解一下ajax的原始方法,这些可以参考ajax教程这篇文章,下面来开始写代码
function ajax(url,option){
post
//options是一个对象,里面可以包括的参数为:
- type:或者
get`,可以有一个默认值
- data: 发送的数据,为一个键值对象或者为一个用&连接的赋值字符串
- onsuccess: 成功时的调用函数
- onfail: 失败时的调用函数
function ajax(url,options){
//我们首先要创建一个xhr对象
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject(“Microsoft.XMLHTTP”);//这是仿w3c上面写的
}
//创建完之后就可以打开了
//因为分post和get请求两种,所以我们要先确定参数
var param;
var data = options.data || “”;
for(var key in data){
param += key+”=”+data[key]+”&”;
}
//把最后那个&去掉
param = param.replice(/&$/,”“);
var type = options.type.toUpperCase() || “GET”;
if(type === “GET”){
//我现在还不确定加时间戳不,加的话可以防止浏览器缓存
xhr.open(“GET”,url+”?”+param,true);
//发送个给服务器
xhr.send(null);
}else{
xhr.open(“POST”,url,true);
xhr.setRequestHeader(“Content-type”,”application/x-www-form-urlencoded”);//xhr模拟表单发送数据
xhr.send(param);
}
xhr.onreadystatechange=function(){
if(xhr.readyState === 4 ){
if(xhr.status === 200){
if(options.success){
options.success(xhr.responseText,xhr);
}
}
//判断是否成功请求还有第二种方法
if(xhr.readyState === 4){
if((xhr.status >= 200 && xhr.status<300)||xhr.status===304){
if(options.success){
options.success(xhr.responseText,xhr);
}
}
}
}else{
if(options.fail){
options.fail();//如果有失败处理函数则执行失败处理函数
}
}
}
return xhr;
}
}`
这就是我封装的ajax。