Ajax日记
简要讲Ajax 的内容归纳为博客。
AJAX能且仅能从服务器上读取文件，我们使用ajax的时候分为以下几个步骤：
1、 创建ajax对象
2、 链接服务器
3、 发送请求
4、 接收返回值
下面是详细实现过程
1 <!DOCTYPE> 2 <html> 3 <head> 4 <meta charset = "utf-8" /> 5 <title>ajax</title> 6 <script type="text/javascript"> 7 window.onload = function(){ 8 var obtn1 = document.getElementById('btn1'); 9 obtn1.onclick = function(){ 10 //1、创建ajax对象 11 //var oAjax = new XMLHttpRequest();//非IE6 12 //var oAjax = new ActiveXObject("Microsoft.XMLHTTP");//IE6 13 //兼容写法 14 var oAjax = null; 15 if(window.XMLHttpRequest){ 16 oAjax = new XMLHttpRequest(); 17 } 18 else{ 19 oAjax = new ActiveXObject("Microsoft.XMLHTTP"); 20 } 21 //2、链接服务器 22 //open（方法，url，是否异步） 23 //同步：一件件事情做。异步：多件事情一起做。 24 oAjax.open("GET","like.txt",true); 25 //3、发送请求 26 oAjax.send(); 27 //4、接收请求 onreadystatechange 查看进度的事件 当oAjax.readyState == 4表示已经完成，而当oAjax.status == 200时，表示接收数据成功 28 oAjax.onreadystatechange = function(){ 29 if(oAjax.readyState == 4){ 30 if(oAjax.status == 200){ 31 alert("成功"+oAjax.responseText); 32 } 33 else{ 34 alert("失败"); 35 } 36 } 37 } 38 } 39 } 40 </script> 41 </head> 42 <body> 43 <input id="btn1" type="button" value="读取文件" /> 44 </body> 45 </html>
以上过程分四步在服务器上读取了like.txt中的文件
同样的方法可以读取josn文件和XML文件
下面是将以上内容封装为函数的代码，可以直接用
1 function ajax(url,fnSucess,fnFaild){ 2 //1、创建ajax对象 3 //var oAjax = new XMLHttpRequest();//非IE6 4 //var oAjax = new ActiveXObject("Microsoft.XMLHTTP");//IE6 5 //兼容写法 6 var oAjax = null; 7 if(window.XMLHttpRequest){ 8 oAjax = new XMLHttpRequest(); 9 } 10 else{ 11 oAjax = new ActiveXObject("Microsoft.XMLHTTP"); 12 } 13 //2、链接服务器 14 //open（方法，url，是否异步） 15 //同步：一件件事情做。异步：多件事情一起做。 16 oAjax.open("GET",url,true); 17 //3、发送请求 18 oAjax.send(); 19 //4、接收请求 onreadystatechange 查看进度的事件 当oAjax.readyState == 4表示已经完成，而当oAjax.status == 200时，表示接收数据成功 20 oAjax.onreadystatechange = function(){ 21 if(oAjax.readyState == 4){ 22 if(oAjax.status == 200){ 23 alert("成功"+oAjax.responseText); 24 fnSucess(oAjax.responseText); 25 } 26 else{ 27 fnFaild(); 28 } 29 } 30 } 31 }
函数接收三个参数 ：第一个参数为url，请求的服务器地址。第二个参数为fnSucess函数，当请求并接收数据成功的时候执行该函数，该函数接收一个参数，该参数为接收的文件字符串。第三个参数为fnFaild（）函数，当请求数据失败的时候，执行该函数。
整个Ajax说的神神叨叨，其实也就用这么点东西。
