原生JavaScript实现Ajax

function ajax(){
    var xhr = null;

    //实例化XMLHttpRequest对象
    if(window.ActiveXObject){//ie5、ie6
        xhr = new Active XObject("Microsoft.XMLHTTP");
    }else if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest();
    }

    //通过open方法初始化XMLHttpRequest对象,指定请求的method、url、async参数,true表示异步加载(默认),false为同步
    xhr.open("GET","test.php",true);

    //注册回调事件处理器,当XMLHttpRequest.readuyState发生变化时,激发readystatechange事件,从而调用这里注册的处理器ajaxCallBack
    xhr.onreadystatechange = ajaxCallBack;

    //发送请求
    //GET请求
    xhr.send(null);

    //POST请求,添加请求的HTTP头
    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")
    //POST请求,参数为发送给服务器的请求数据
    xhr.send('String');
}

function ajaxCallBack(){
    if(xhr.readyState == 4){//请求完成加载
        if(xhr.status == 200){//响应已经成功
            console.log(xhr.responseText);//打印响应内容

            //在实际开发中,这里的响应内容一般为JSON格式数据,所以我们要先将JSON数据进行解析
            var res = xhr.responseText;
            var data = JSON.parse(res);

            if(data.status == 0){
                //进行数据操作
            }
            else{
                //打印后台给的错误信息
                console.log(data.info);
            }
        }
    }
}

`

你可能感兴趣的:(原生JavaScript实现Ajax)