自己封装的ajax

本文介绍了一个封装好的Ajax方法,该方法模仿jQuery风格,支持GET和POST请求,并提供了成功和失败回调函数。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

学到ajax这里,觉得这是前端一个非常重要的一个知识点,所以我想把ajax的这些方法,封装成一个类似于jquery那样的方法,首先要了解一下ajax的原始方法,这些可以参考ajax教程这篇文章,下面来开始写代码
function ajax(url,option){
//options是一个对象,里面可以包括的参数为:
- type:
post或者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。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值