2017/8/10 笔记 ajax工具类函数封装

本文介绍了一个简单的 AJAX 实现方法,包括 GET 和 POST 请求,并通过回调函数处理返回的数据。

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

js中:



参数1:url
参数2:数据
参数3:请求的方法
参数4:数据成功获取以后 调用的方法

function ajax_tool(url,data,method,success) {
// 异步对象
var ajax = new XMLHttpRequest();


// get 跟post  需要分别写不同的代码
if (method=='get') {
// get请求
if (data) {
// 如果有值
url+='?';
url+=data;
}else{


}
// 设置 方法 以及 url
ajax.open(method,url);


// send即可
ajax.send();
}else{
// post请求
// post请求 url 是不需要改变
ajax.open(method,url);


// 需要设置请求报文
ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");


// 判断data send发送数据
if (data) {
// 如果有值 从send发送
ajax.send(data);
}else{
// 木有值 直接发送即可
ajax.send();
}
}


// 注册事件
ajax.onreadystatechange = function () {
// 在事件中 获取数据 并修改界面显示
if (ajax.readyState==4&&ajax.status==200) {
// console.log(ajax.responseText);


// 将 数据 让 外面可以使用
// return ajax.responseText;


// 当 onreadystatechange 调用时 说明 数据回来了
// ajax.responseText;


// 如果说 外面可以传入一个 function 作为参数 success
success(ajax.responseText);
}
}

一定要添加回调函数success,因为数据还没回来不会执行onreadystatechange ,这样会直接跳出js到html页面,就获取不到backdata。如果加上回调函数,即使数据还没回来,先会跳出到html页面执行 console.log(backData),但是输出的是undefined,因为数据还没回来,等到数据回来,会执行onreadystatechange,然后里面再执行success(ajax.responseText),这个函数在html页面会console.log(data),就可以把数据获取到了。


html中:

var backData = ajax_tool('01.test_get.php','name=huluw&skill=saveyeye','get',function(data){
console.log(data);
});
// 测试
console.log(backData);

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值