使用Ajax的五个步骤：
- 创建一个异步对象
- 设置请求方式和请求地址
- 发送请求
- 监听状态的变化
- 处理返回的结果
1. 创建一个异步对象XMLHttpRequest
IE5和IE6的创建方法：
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）的创建方法:
var xmlhttp = new XMLHttpRequest;
那我们怎么处理浏览器兼容性问题呢？我们可以这样做：
var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }
2. 设置请求方式和请求地址
如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 方法.
xmlhttp.open("GET","test1.txt",true);
method：请求的类型；GET 或 POST url：文件在服务器上的位置 async：true（异步）或 false（同步）
3.发送请求
xmlhttp.send();
4. 监听状态的变化
xmlhttp.onreadystatechange = function (ev2) { /* 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪 */ if(xmlhttp.readyState === 4){ // 判断是否请求成功 // 状态码大于200小于300或等于304时才会请求成功 if(xmlhttp.status >= 200 && xmlhttp.status < 300 ||xmlhttp.status === 304){ 5.处理返回的结果 // console.log("接收到服务器返回的数据"); success(xmlhttp); // 此处的sucess是封装Ajax函数里面的形参，后面的error也是如此。 }else{ // console.log("没有接收到服务器返回的数据"); error(xmlhttp); } } }
5.处理返回的结果
处理方式在上一个步骤中已有 如果接收到数据则调用第一个函数，否则调用第二个函数。
6.浏览器兼容性问题
6.1 Ajax缓存机制
在IE浏览器中会出现此问题 在IE浏览器中，如果通过Ajax发送GET请求，那么IE浏览器认为同一个URL只有一个结果。
解决办法： 每次请求的时候都给url一个不同的值 这个时候我们可以想到用new Date().getTime()方法获得一个值添加到url中。
改一下这里的url： "text1.txt?t="+(new Date().getTime());
6.2 创建异步对象的不同
var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }
7.封装Ajax
每次编写Ajax都会有5个步骤，因此这些代码是一样的，我们可以用一个函数把这些代码封装起来:
function obj2str(obj) { obj = obj || {}; // 如果没有传参, 为了添加随机因子,必须自己创建一个对象 obj.t = new Date().getTime(); var res = []; for(var key in obj){ // 在URL中是不可以出现中文的, 如果出现了中文需要转码 // 可以调用encodeURIComponent方法 // URL中只可以出现字母/数字/下划线/ASCII码 res.push(encodeURIComponent(key)+"="+encodeURIComponent(obj[key])); // [userName=lnj, userPwd=123456]; } return res.join("&"); // userName=lnj&userPwd=123456 } function ajax(url, obj, timeout, success, error) { // 0.将对象转换为字符串 var str = obj2str(obj); // key=value&key=value; // 1.创建一个异步对象 var xmlhttp, timer; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } // 2.设置请求方式和请求地址 /* method：请求的类型；GET 或 POST url：文件在服务器上的位置 async：true（异步）或 false（同步） */ xmlhttp.open("GET", url+"?"+str, true); // 3.发送请求 xmlhttp.send(); // 4.监听状态的变化 xmlhttp.onreadystatechange = function (ev2) { /* 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪 */ if(xmlhttp.readyState === 4){ clearInterval(timer); // 判断是否请求成功 if(xmlhttp.status >= 200 && xmlhttp.status < 300 || xmlhttp.status === 304){ // 5.处理返回的结果 // console.log("接收到服务器返回的数据"); success(xmlhttp); }else{ // console.log("没有接收到服务器返回的数据"); error(xmlhttp); } } } // 判断外界是否传入了超时时间 if(timeout){ timer = setInterval(function () { console.log("中断请求"); xmlhttp.abort(); clearInterval(timer); }, timeout); } }
![小白来实现一个Ajax请求[Ajax使用方法及相关知识点详细解析——超级全]](https://ucc.alicdn.com/pic/developer-ecology/99e66960fb024a248a1033b8da9460c8.png?x-oss-process=image/resize,h_160,m_lfit)
