//原生js写ajax就像打电话
//打电话分下面4步
//1.拿出手机
//2.拨号
//3.说话
//4.挺对方说话
//ajax也分下面4步
//1.创建ajax对象
//2.连接到服务器
//3.发送请求(告诉服务器我要什么文件)
//4.接收返回值
下面是原生js写ajax的具体写法
<script> window.onload=function() { var oBtn = document.getElementById("btn1"); oBtn.onclick = function() { //1.创建ajax对象 //只兼容非ie6的浏览器,在ie6浏览器上运行会提示没有被定义 //var oAjax = new XMLHttpRequest();//这才是ajax实际的请求 //alert(oAjax); //ie6浏览器下按照下面方法写,但是在别的浏览器中不能用,会报错。 //var oAjax = new ActiveXObject("Microsoft.XMLHTTP"); //alert(oAjax); //鉴于上面出现的问题,可以采取下面的方法解决,用if判断是否为IE6浏览器 if(window.XMLHttpRequest)//如果有XMLHttpRequest,那就是非IE6浏览器。()里面加window的原因下面会有描述。 { var oAjax = new XMLHttpRequest();//创建ajax对象 } else//如果没有XMLHttpRequest,那就是IE6浏览器 { var oAjax = new ActiveXObject("Microsoft.XMLHTTP");//IE6浏览器创建ajax对象 } //2.连接服务器 //open(方法、文件名、异步传输) //方法: //传输方式是get方式还是post方式。 //文件名 //告诉服务器要读哪个文件 //异步传输 //异步:多件事一件一件的做 //同步:多件事情一起进行 //但是js里面的同步和异步和现实的同步异步相反。 //同步:多件事一件一件的做 //异步:多件事情一起进行 //ajax天生是用来做异步的 oAjax.open("GET","a.txt?t='+new Date().getTime()",true);//加上t='+new Date().getTime()"的目的是为了消除缓存,每次的t的值不一样。 //3.发送请求 oAjax.send(); //4.接收返回 //客户端和服务器端有交互的时候会调用onreadystatechange oAjax.onreadystatechange=function() { //oAjax.readyState //浏览器和服务器,进行到哪一步了。 //0->(未初始化):还没有调用 open() 方法。 //1->(载入):已调用 send() 方法,正在发送请求。 //2->载入完成):send() 方法完成,已收到全部响应内容。 //3->(解析):正在解析响应内容。 //4->(完成):响应内容解析完成,可以在客户端调用。 if(oAjax.readyState==4) { if(oAjax.status==200)//判断是否成功,如果是200,就代表成功 { alert("成功"+oAjax.responseText);//读取a.txt文件成功就弹出成功。后面加上oAjax.responseText会输出a.txt文本的内容 } else { alert("失败"); } } }; } }; /*//上面if里面需要些window的原因 //js里面的变量和属性 var a = 12; alert(a);//页面上弹出12很正常,而实际上输出的是下面的写法,是属于window的,只是window能省就省了。 alert(window.a);//输出结果是一样的 window.alert(window.a); //想a这种全局变量实际上是winow的一个属性。 //如果不定义一个变量a直接像下面那样输出a alert(a)//系统会报错,而不是undefind,因为没有定义变量a。 alert(window.a);//如果是这样写,系统就不会报错了,会显示undefind。 //出现上面的原因是因为直接写a从根上就找不到a,而前面加上window只是找不到window的属性a了。*/ </script>
但是,不能每次用ajax的时候都写那么多代码,要把这段ajax代码封装起来,方便使用。
封装ajax
//最后把代码封装起来,封装起来以后,要给这个函数加上一个参数url.参数是为了替换要读取的文件名 function ajax(url,fnSucc) { if(window.XMLHttpRequest) { var oAjax = new XMLHttpRequest(); } else { var oAjax = new ActiveXObject("Microsoft.XMLHTTP");//IE6浏览器创建ajax对象 } oAjax.open("GET",url,true);//把要读取的参数的传过来。 oAjax.send(); oAjax.onreadystatechange=function() { if(oAjax.readyState==4) { if(oAjax.status==200) { fnSucc(oAjax.responseText);//成功的时候调用这个方法 } else { if(fnfiled) { fnField(oAjax.status); } } } }; }
将封装的ajax调用
<script src="new_ajax.js"></script>//引用封装的ajax文件 <script> window.onload=function() { var oBtn = document.getElementById("btn1"); oBtn.onclick = function() { ajax('a.txt',function(str){//读取a.txt文件里面的内容 alert(str);//将读取的内容输出 }) } }; </script>