Ajax 应用程序所用到的基本技术：
- HTML 用于建立 Web 表单并确定应用程序其他部分使用的字段。
- JavaScript 代码是运行 Ajax 应用程序的核心代码，帮助改进与服务器应用程序的通信。
- DHTML 或 Dynamic HTML，用于动态更新表单。我们将使用
div、span和其他动态 HTML 元素来标记 HTML。 - 文档对象模型 DOM 用于（通过 JavaScript 代码）处理 HTML 结构和（某些情况下）服务器返回的 XML。
Ajax 世界中的请求/响应
Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。要清楚这个过程和原理，我们必须对XMLHttpRequest有所了解。
XMLHttpRequest是ajax的核心机制，它是在IE5中首先引入的，是一种支持异步请求的技术。简单的说，也就是javascript可以及时向服务器提出请求和处理响应，而不阻塞用户。达到无刷新的效果。
所以我们先从XMLHttpRequest讲起，来看看它的工作原理。
XMLHttpRequest这个对象的属性：
onreadystatechange 每次状态改变所触发事件的事件处理程序。
responseText 从服务器进程返回数据的字符串形式。
responseXML 从服务器进程返回的DOM兼容的文档数据对象。
status 从服务器返回的数字代码，比如常见的404（未找到）和200（已就绪）
status Text 伴随状态码的字符串信息
readyState 对象状态值
0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法）
1 (初始化) 对象已建立，尚未调用send方法
2 (发送数据) send方法已调用，但是当前的状态及http头未知
3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，
4 (完成) 数据接收完毕,此时可以通过通过responseXml和responseText获取完整的回应数据
现在我们介绍了 Ajax，对 XMLHttpRequest 对象以及如何创建它也有了基本的了解。如果阅读得很仔细，您可能已经知道与服务器上的 Web 应用程序打交道的是 JavaScript 技术，而不是直接提交给那个应用程序的 HTML 表单。
还缺少什么呢？到底如何使用 XMLHttpRequest。因为这段代码非常重要，您编写的每个 Ajax 应用程序都要以某种形式使用它，先看看 Ajax 的基本请求/响应模型是什么样吧。
发出请求
您已经有了一个崭新的 XMLHttpRequest 对象，现在让它干点活儿吧。首先需要一个 Web 页面能够调用的 JavaScript 方法（比如当用户输入文本或者从菜单中选择一项时）。接下来就是在所有 Ajax 应用程序中基本都雷同的流程：
- 从 Web 表单中获取需要的数据。
- 建立要连接的 URL。
- 打开到服务器的连接。
- 设置服务器在完成后要运行的函数。
- 发送请求。
示列：
function ajax(url, fnSucc, fnFaild) { //1.创建Ajax对象 var oAjax=null; if(window.XMLHttpRequest) { oAjax=new XMLHttpRequest(); } else { oAjax=new ActiveXObject("Microsoft.XMLHTTP"); } /* 2.连接服务器 request-type：发送请求的类型。典型的值是 GET 或 POST，但也可以发送 HEAD 请求。 url：要连接的 URL。 asynch：如果希望使用异步连接则为 true，否则为 false。该参数是可选的，默认为 true。 */ oAjax.open('GET', url, true); //3.发送请求 oAjax.send(); //4.接收服务器的返回 oAjax.onreadystatechange=function () { /* 0：请求没有发出（在调用 open() 之前）。 1：请求已经建立但还没有发出（调用 send() 之前）。 2：请求已经发出正在处理之中（这里通常可以从响应得到内容头部）。 3：请求已经处理，响应中通常有部分数据可用，但是服务器还没有完成响应。 4：响应已完成，可以访问服务器响应并使用它。 */ if(oAjax.readyState==4) { //status HTTP 状态代码 401：未经授权 403：禁止 404：没找到 200：一切正常 if(oAjax.status==200) { fnSucc(oAjax.responseText);//从服务器返回的数据保存在responseText 属性中 } else { if(fnFaild) fnFaild(oAjax.status); } } }; }
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="ajax.js"></script> <script> window.onload=function(){ var btn=document.getElementById("btn"); btn.onclick=function(){ //ajax('abc.txt',function(data){ ajax('abc.txt?t='+new Date().getTime(),function(data){//?t='+new Date().getTime() 阻止缓存 alert(data) }) } } </script> </head> <body> <button id="btn">读取文件</button> </body> </html>
abc.txt文件中的内容是一串文本形式。
参考：http://blog.csdn.net/daydring/article/details/37507345