原生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);
            }
        }
    }
}

`

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容