Ajax

ajax库封装

  function ajax(url,fnWin,fnFaild){
    //1.创建ajax对象
    var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
    //2.与服务器建立连接
    xhr.open("GET",url,true);
    //3.发送请求
    xhr.send();
    //4.接收服务器返回的信息
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
            if(xhr.status == 200){
                fnWin && fnWin(xhr.responseText);
            }else{
                fnFaild && fnFaild();
            }
        }
    }
}

ajax库封装2

//url,data,type,timeout,success,error
function ajax(options){
    //-1  整理options
    options=options||{};
    options.data=options.data||{};
    options.timeout=options.timeout||0;
    options.type=options.type||'get';
    
    //0 整理data
    var arr=[];
    for(var key in options.data){
        arr.push(key+'='+encodeURIComponent(options.data[key]));    
    }
    var str=arr.join('&');
    
    //1    创建ajax对象
    if(window.XMLHttpRequest){
        var oAjax=new XMLHttpRequest();//[object XMLHttpRequest]
    }else{
        var oAjax=new ActiveXObject('Microsoft.XMLHTTP')
    }
    
    if(options.type=='get'){
        //2.
        oAjax.open('get',options.url+'?'+str,true);
        //3.
        oAjax.send();
    }else{
        //2.
        oAjax.open('post',options.url,true);
        //设置请求头
        oAjax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        oAjax.send(str);//身子
    }
    
    //3.5    超时
    if(options.timeout){
        var timer=setTimeout(function(){
            alert('超时了');
            oAjax.abort();//中断ajax请求    
        },options.timeout);
    }
    
    
    //4.
    oAjax.onreadystatechange=function(){//当准备状态改变时
        if(oAjax.readyState==4){//成功失败都会有4
            clearTimeout(timer);
            if(oAjax.status>=200 && oAjax.status<300 || oAjax.status==304){
                options.success && options.success(oAjax.responseText);
            }else{
                options.error && options.error(oAjax.status);//http    0
            }
        }
    };
    
    
};

非封装，详解版及其实例↓

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            window.onload = function(){
                //获取页面元素
                var oBtn = document.getElementById("btn");
                var oDiv = document.getElementById("box");
                oBtn.onclick = function(){
                    //1.创建ajax对象
                    //var xhr = new XMLHttpRequest(); //ie7及以上和标准浏览器
                    //var xhr = new ActiveXObject("Microsoft.XMLHTTP");
                    
                    var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
                    //alert(xhr);
                    //alert(xhr.readyState);
                    //2.与服务器建立连接
                    //open("GET/POST"，"请求的文件"，boolean); true:异步    false : 同步
                    xhr.open("GET","abc.txt",true);
                    //alert(xhr.readyState);
                    //3.发送请求
                    xhr.send();
                    //alert(xhr.readyState);
                    //4.接收服务器返回的信息
                    //onreadystatechange:状态改变事件
                    xhr.onreadystatechange = function(){
                        //alert(xhr.readyState);
                        if(xhr.readyState == 4){
                            //alert(xhr.status);
                            if(xhr.status == 200){
                                //alert("成功了");
                                //alert(xhr.responseText);
                                oDiv.innerHTML = xhr.responseText;
                            }
                        }
                    }
                }
            }
        </script>
    </head>
    <body>
        <p>通过ajax请求，将服务器上的abc.txt文件中的内容获取回来</p>
        <input type="button" id="btn" value="读取文件">
        <div id="box"></div>
    </body>
</html>

adc.txt文件内容↓

55555555555555555555555555555

效果图↓

怕什么真理无穷，进一寸有一寸的欢喜。