<!DOCTYPE html> <html> <head> <meta charset="UTF-"> <title>AJAX 实例</title> <script> function ajax(){ var oAjax = new XMLHttpRequest(); oAjax.onreadystatechange = function (){ if(oAjax.readyState == && oAjax.status == ){ alert(oAjax.responseText); } } oAjax.open('GET', 'ajax/demo.txt', true); oAjax.send(); } </script> </head> <body> <button type="button">读取</button> </body> </html>
我们需要把页面保存在 WAMP 安装目录下 www 根目录中，并且新建一个文件夹命名为 ajax，用于存储 TXT 文件，命名为 demo.txt，文件中可以随意输入点文字，用作演示。然后通过我们自定义的个人站点，在浏览器中打开页面，当点击读取按钮后，弹出 TXT 文件中的内容。
通过上面的实例，我们就可以看到，实际上 AJAX 的作用就是从服务器上读取一个文件，并且把这个文件内容返回给我们，让我们处理。
这里需要注意的是字符集编码问题，在使用 AJAX 时，所有的文件都必须是统一的编码格式，包括 HTML 、JS 文件和被读的文件，比如都是 UTF-8 或者都是 GB2312，上面实例中用于演示的 TXT 文件，默认输入英文，在保存时默认编码为 ANSI，如果我们输入的是汉字，在保存时不改为与页面相同的编码格式 UTF-8，那么在点击按钮后，网页上就显示的乱码，所以在保存时，一定要注意切换文件的编码格式。
下面我们来分析一下 AJAX 的工作原理。
4、XHR 创建对象
XHR 是 XMLHttpRequest 的简写，是 AJAX 的基础，用于在后台与服务器交换数据。
所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象，老版本的 IE 浏览器(IE6)则使用 ActiveXObject，为了兼容各种浏览器，可以做一个判断，如果支持 XMLHttpRequest 对象，则创建该对象，如果不支持，则创建 ActiveXObject 。
var oAjax; // IE+, Firefox, Chrome, Opera, Safari if(window.XMLHttpRequest){ oAjax = new XMLHttpRequest(); } // IE else{ oAjax = new ActiveXObject("Microsoft.XMLHTTP"); }
因为所有现代浏览器和 IE 高版本浏览器都支持 XMLHttpRequest 对象，所以在创建对象时，也就不用做兼容性处理了，这里只是了解一下。在 IE 浏览器中 ActiveX 是插件的意思，也就是说 IE6 中的 AJAX 是通过一个插件来完成的，虽说是插件，但是在 IE6 浏览器中已经默认安装了。
在上面的代码中，在做判断时使用了 window.XMLHttpRequest ，我们都知道全局变量是 window 上的一个属性，在 JS 中，如果使用没有定义的变量，会报错，比如：alert(a)。而如果使用没有定义的属性，则不会报错，而是 undefined，比如：alert(window.a)。IE6 不支持 XMLHttpRequest，所以如果直接使用，就会报错，而如果把他定义为 window 的属性，那么则是 undefined ，未定义在 if 判断语句中代表假，也就是 fasle，而这正是我们需要的。
5、连接服务器
将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：
oAjax.open('GET', 'ajax/demo.txt', true);
oAjax.send();
open(method, url, async) 规定请求的类型、URL 以及是否异步处理请求。第一个参数 method，用于规定请求的类型，GET 或
POST 。第二个参数 URL，用于设置文件在服务器上的地址，该文件可以是任何类型的文件，比如 .txt 、 .xml 和 .json，或者服务器脚本文件，比如 .php (在传回响应之前，能够在服务器上执行任务)。第三个参数 async，用于定义是否异步传输，true（异步）或 false（同步）。
send(string) 用于将请求发送到服务器，参数 string 仅用于 POST 请求。
下面来看两个问题。
(1)、GET 还是 POST？
GET 和 POST 常用于提交表单，我们也并不陌生，表单的提交默认是使用 GET 方式。
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
但是，在以下情况中，请使用 POST 请求：
①、无法使用缓存文件（更新服务器上的文件或数据库）。
②、向服务器发送大量数据（POST 没有数据量限制）。
③、发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠。
最实用的判断方法：GET 用于获取数据，比如浏览贴子，POST 用于上传数据，也就是向服务器传递数据，比如用户注册。
GET 和 POST 的区别：
GET：在 URL 中传输数据，安全性弱，容量小，一般 URL 的长度最大为 4K 到 10K，长度是有限制的。
POST：不在 URL 中传输数据，相对安全性强，容量大，容量可达到2G，再大就可以使用控件，真正的安全就只有 https 协议。
缓存：GET 有缓存，POST 没有缓存。
所以，AJAX 一般都为 GET 方式。当然除了 GET 和 POST 方法之外还有很多种方法，最常用的还是这两种。