ajax的应用总结
通俗的讲，AJAX就是JS通过一个网址去加载数据，这个过程通常是用户不可见的。
通过AJAX加载过来的数据，html,css,js,txt是JS能直接处理的。
AJAX的优势：
1、异步加载数据，无需切换页面,不需要刷新
2、更佳的用户体验：局部刷新、及时验证、操作步骤简化等
3、节省流量
4、JS控制数据的加载，更加灵活多用
AJAX的使用步骤
1、new XMLHttpRequest() 创建一个新的ajax对象
2、open（method,url,asyn）
参数：
method：String，采用post/get形式请求
url：String，要连接的网址
asyn：Boolean，是否发起异步请求
3、send 按下拨号键
4、onreadystatechange 拨号成功
5、responceText 服务器返回的数据
例子：注意要在服务器环境下执行
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> //第一步：买手机 var ajax=new XMLHttpRequest(); if (window.XMLHttpRequest){ var ajax=new XMLHttpRequest();//现代浏览器 } else{ var ajax=new ActiveXObject("Msxml2.XMLHTTP");//见人IE6 } //第二步：拨电话号 ajax.open("get","test.txt",true);//1.http方法get/post 2.请求的URL地址，可以为绝对地址也可以为相对地址。3.设置请求是否为异步模式。如果是TRUE，JavaScript函数将继续执行，而不等待服务器响应。 //第三步：发送 ajax.send(); //第四步：拨号成功 ajax.onreadystatechange=function (){ // alert(ajax.readyState); if (ajax.readyState==4){ // alert("已完成"); if (ajax.status>=200&&ajax.status<300||ajax.status==304){ //对方回复 alert(ajax.responseText); } } } // alert(ajax); // console.log(ajax); </script> </head> <body> </body> </html>
请求成功的条件：
readyState==4&&status>200&&status<300||status==304
为方便使用个，将其封装成一个函数
1 function fnAjax(url,succFn,faildFn){ 2 if (window.XMLHttpRequest){ 3 var ajax=new XMLHttpRequest(); 4 } 5 else{ 6 var ajax=new ActiveXObject("Msxml2.XMLHTTP"); 7 } 8 ajax.open("get",url,true); 9 ajax.send(); 10 ajax.onreadystatechange=function (){ 11 if (ajax.readyState==4){ 12 if (ajax.status>=200&&ajax.status<300||ajax.status==304){ 13 succFn(ajax.responseText); 14 } 15 else{ 16 faildFn(); 17 } 18 } 19 } 20 }
