原生JS封装AJAX函数
程序员文章站
2024-03-17 11:51:28
...
AJAX(Asynchronous Javascript And XML)异步操作XML(JSON)
function output(data){
console.log(JSON.parse(data));
}
// 一个简单的回调函数,用来测试是否接受到数据
function ajax(method,url,callback,data,flag){
// method 请求方法 url请求地址 callback回调函数 data请求数据 flag(true为异步,false同步)
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest;
}else{
xhr = new ActiveXObject();
}
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
// readyState :0 未调用send; 1 读取中,正在发送; 2 已读取,send方法执行完成,接收到全部数据; 3 正在解析; 4 解析完成
if(xhr.status == 200){
callback(xhr.responseText);
// console.log(xhr.getResponseHeader('date'));
// console.log(xhr.getResponseHeader('server')); 返回 值指定的首部的串值
// console.log(xhr.getAllResponseHeaders());将http请求的所有响应首部作为键值对返回
// console.log(xhr.responseXML);获得XML形式的响应数据
// console.log(xhr.statusText);服务器返回的状态文本信息
}
}
}
method = method.toUpperCase();
if(method == 'GET'){
// get方法 浏览器中存在缓存数据,添加时间戳可以避免浏览器中调用换缓存数据
var date = new Date();
var timer = date.getTime();
xhr.open('get',url + '?'+ data +'&timer=' + timer,flag);
// 发送数据在open函数中
xhr.send();
}else if(method == 'POST'){
xhr.open('post',url,flag);
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
// application/x-www-form-urlencoded 发送前编码所有字符
// multipart/form-data 不用编码,上传文件的表单,必须使用这个值
xhr.send(data);
// 发送数据在send函数中
}
}
ajax('get','getNews.php',output,'',true);
上一篇: 原生JS封装transform函数
下一篇: 封装变速函数