一、使用情况：AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下使用。AJAX的核心：向服务器发送多个请求而无需用户等待来至服务器的响应。
二、AJAX的优势
<!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>
function fnAjax(url,succFn,faildFn){ if (window.XMLHttpRequest){ var ajax=new XMLHttpRequest(); } else{ var ajax=new ActiveXObject("Msxml2.XMLHTTP"); } ajax.open("get",url,true); ajax.send(); ajax.onreadystatechange=function (){ if (ajax.readyState==4){ if (ajax.status>=200&&ajax.status<300||ajax.status==304){ succFn(ajax.responseText); } else{ faildFn(); } } } }
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0; padding: 0; } div{ height: 100px; width: 100px; background-color: #ccc; display: none; } </style> <script type="text/javascript" src="ajax.js"></script> <script type="text/javascript"> window.onload=function (){ var btns=document.getElementsByTagName("input"); var divs=document.getElementsByTagName("div"); for (var i = 0; i < btns.length; i++) { btns[i].index=i; btns[i].onclick=function (){ for (var i = 0; i < btns.length; i++) { divs[i].style.display="none"; }; divs[this.index].style.display="block"; //h/a2.html var _this=this; fnAjax("h/a"+(this.index+1)+".html",function (str){ // alert(str); divs[_this.index].innerHTML=str; }); } }; } </script> </head> <body> <input type="button" value="按钮1"> <input type="button" value="按钮2"> <input type="button" value="按钮3"> <div style="display:block;"> <p>我是a1</p> </div> <div></div> <div></div> </body> </html>
原文：http://www.cnblogs.com/Hfive/p/Hfive_y.html