欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

原生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);
相关标签: AJAX