原生ajax步骤详解以及简单封装

一原生ajax详解

<script>
window.onload=function()
{
    var Btn = document.getElementById("btn");
    Btn.onclick = function()
    {
        //1.创建ajax对象
        //兼容非ie6的浏览器，在ie6浏览器上运行会提示没有被定义
        //var Ajax = new XMLHttpRequest();
        //alert(Ajax);
        
        //ie6浏览器下按照下面方法写。
        //var Ajax = new ActiveXObject("Microsoft.XMLHTTP");
        //alert(Ajax);
        
        //鉴于上面出现的问题，可以采取下面的方法解决，用if判断是否为IE6浏览器
        if(window.XMLHttpRequest)//如果有XMLHttpRequest，那就是非IE6浏览器。
        {
            var Ajax = new XMLHttpRequest();//创建ajax对象
        }
        else//如果没有XMLHttpRequest，那就是IE6浏览器
        {
            var Ajax = new ActiveXObject("Microsoft.XMLHTTP");//IE6浏览器创建ajax对象
        }
        
        //2.连接服务器
        //open(方法、文件名、异步传输）
        //方法：
            //传输方式是get方式还是post方式。
        //文件名
            //告诉服务器要读哪个文件
        //异步传输
            //异步：多件事一件一件的做
            //同步：多件事情一起进行
            //但是js里面的同步和异步和现实的同步异步相反。
                //同步：多件事一件一件的做
                //异步：多件事情一起进行
        //ajax天生是用来做异步的
        
        Ajax.open("GET","a.txt?t='+new Date().getTime()",true);//加上t='+new Date().getTime()"的目的是为了消除缓存，每次的t的值不一样。
        
        //3.发送请求
        Ajax.send();
        
        //4.接收返回
        //客户端和服务器端有交互的时候会调用onreadystatechange
        Ajax.onreadystatechange=function()
        {
            //Ajax.readyState  //浏览器和服务器，进行到哪一步了。
                //0->（未初始化）：还没有调用 open() 方法。
                //1->（载入）：已调用 send() 方法，正在发送请求。
                //2->载入完成）：send() 方法完成，已收到全部响应内容。
                //3->（解析）：正在解析响应内容。
                //4->（完成）：响应内容解析完成，可以在客户端调用。
            if(Ajax.readyState==4)
            {
                if(Ajax.status==200)//判断是否成功,如果是200，就代表成功
                {
                    alert("成功"+Ajax.responseText);//读取a.txt文件成功就弹出成功。后面加上Ajax.responseText会输出a.txt文本的内容
                }
                else
                {
                    alert("失败");
                }
            }
        };
    }
};
</script>

二简单封装ajax

//最后把代码封装起来,封装起来以后，要给这个函数加上一个参数url.参数是为了替换要读取的文件名
function ajax(url,fnSucc)
{
    if(window.XMLHttpRequest)
        {
            var Ajax = new XMLHttpRequest();
        }
        else
        {
            var Ajax = new ActiveXObject("Microsoft.XMLHTTP");//IE6浏览器创建ajax对象
        }
        Ajax.open("GET",url,true);//把要读取的参数的传过来。
        Ajax.send();
        Ajax.onreadystatechange=function()
        {
            if(Ajax.readyState==4)
            {
                if(Ajax.status==200)
                {
                    fnSucc(Ajax.responseText);//成功的时候调用这个方法
                }
                else
                {
                    if(fnfiled)
                    {
                        fnField(Ajax.status);
                    }
                }
            }
        };
}

后面就可以在需要使用ajax的地方调用上面封装的方法：eg:Btn.onclick=function(){ajax("url接口",function(data){console.log(data)}}