什么是ajax？
AJAX就是Asynchronous JavaScript and XML（意思是说异步JavaScript 和XML）；它不是新的编程语言。而是一种使用现有标准的新方法,能够通过在后台与服务器进行少量数据交换，使得网页实现异步更新，实现在不重新刷新加载整个页面的情况下，只更新部分网页上的内容的技术。
传统网页和运用ajax技术的网页的工作流程：
1、传统的网页是没有使用AJAX,那么只要想更新内容，就必须重载整个网页。
上面示意图可以看出，传统的网页是这样的，浏览器向服务器发送请求，然后等服务器在后台处理好后返回信息到html档里面，但是每次都是处理一个请求后都要重新加载整个页面，步骤繁琐，加载网页的速度也降低。
实际运用中的例子有：1、当你在百度搜索资料的时候，你在搜索框中输入你要搜索的信息，这时候会有个提示框弹出来，这个就是用到ajax；为什么会有提示框弹出一些跟你输入关键词差不多的提示呢，因为当你键入内容是，浏览器就向服务器发出请求，并返回处理后的信息回来。
为了更好的理解ajax，我们先学会使用，再学会怎么去编写自己的ajax。
先准备ajax.js文件（函数已经写好）和一个文件a.txt，放到服务器里面；
ajax.js文件代码如下：
function ajax(url, fnSucc, fnFaild) { //1.创建Ajax对象 if(window.XMLHttpRequest) { var oAjax=newXMLHttpRequest(); } else { var oAjax=newActiveXObject("Microsoft.XMLHTTP"); } //2.连接服务器（打开和服务器的连接） oAjax.open('GET', url,true); //3.发送 oAjax.send(); //4.接收 oAjax.onreadystatechange=function() { if(oAjax.readyState==4) { if(oAjax.status==200) { //alert('成功了：'+oAjax.responseText); fnSucc(oAjax.responseText); } else { //alert('失败了'); if(fnFaild) { fnFaild(); } } } }; } ajax(url, fnSucc, fnFaild)函数参数介绍： url：读取文件的路径，可以写相对路径或绝对路径（服务器上面的文件名都不能用中文命名） fnSucc:成功返回信息 fnFaild：失败返回信息
a.txt文件可以随便写内容到里面；
然后写一个文件读取a.txt的内容：
<!DOCTYPE HTML> <html> <head> <metacharset="utf-8"> <title>无标题文档</title> <scriptsrc="ajax.js"></script> <script> window.onload=function() { var oBtn=document.getElementById('btn1'); oBtn.onclick=function() { ajax('aaa.txt',function(str){ alert(str); },function(){ alert('失败'); }); }; }; </script> </head> <body> <inputid="btn1"type="button"value="读取"/> </body> </html> 如果 a.txt里面有中文，会出问题吗？记得要保证文件编码统一：utf-8 阻止缓存方法：缓存是根据URL来存储的。只要url在变，就可以了。在路径那里加上get数据。 getTime()是毫秒数 <!DOCTYPE HTML> <html> <head> <metacharset="utf-8"> <title>无标题文档</title> <scriptsrc="ajax.js"></script> <script> window.onload=function() { var oBtn=document.getElementById('btn1'); oBtn.onclick=function() { ajax('aaa.txt?t='+newDate().getTime(),function(str){ alert(str); },function(){ alert('失败'); }); }; }; </script> </head> <body> <inputid="btn1"type="button"value="读取"/> </body> </html> 上面是获取txt里面内容的，如果想获取数组和json的内容。方法如下：ajax读取的到的都是字符串，要用函数eval()； [1,2,3,4,5,6,7] 读取数组： <script src = "ajax.js" ></script> <script> window.onload=function() { var oBtn=document.getElementById('btn1'); oBtn.onclick=function() { ajax('arr.txt?t='+newDate().getTime(),function(str){ var arr=eval(str); alert(arr[3]); },function(){ alert('失败'); }); }; }; </script> 读取json： [{a: 5, b: 7}, {a: 8, b: 12}] <script src="ajax.js"></script> <script> window.onload=function () { var oBtn=document.getElementById('btn1'); oBtn.onclick=function () { ajax('arr2.txt?t='+new Date().getTime(), function (str){ var arr=eval(str); alert(arr[0].a); }, function (){ alert('失败'); }); }; }; </script> 读取的json放大ul里面： [{user: 'blue', pass: '123456'},{user: '张三', pass: '654321'},{user: '李四', pass: '789456'},{user: '王五', pass: '7777'}] <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script src="ajax.js"></script> <script> window.onload=function () { var oBtn=document.getElementById('btn1'); var oUl=document.getElementById('ul1'); oBtn.onclick=function () { ajax('data.txt?t='+new Date().getTime(), function (str){ var arr=eval(str); for(var i=0;i<arr.length;i++) { var oLi=document.createElement('li'); oLi.innerHTML='用户名：<strong>'+arr[i].user+'</strong>密码：<span>'+arr[i].pass+'</span>'; oUl.appendChild(oLi); } }, function (){ alert('失败'); }); }; }; </script> </head> <body> <input id="btn1" type="button" value="读取" /> <ul id="ul1"> </ul> </body> </html>
