AJAX的那些事（附赠AJAX的封装，原生JS可直接使用，无须修改）

1.AJAX的概念

  Ajax 全称为：“Asynchronous JavaScript and XML”（异步 JavaScript 和 XML），它并不是 JavaScript 的一种单一技术，而是利用了一系列交互式网页应用相关的技术所形成的结合体。使用Ajax，我们可以无刷新状态更新页面，并且实现异步提交，提升了用户体验。

  Ajax 这个概念是由 JesseJamesGarrett 在 2005 年发明的。它本身不是单一技术，是一串技术的集合，主要有：

1. JavaScript，通过用户或其他与浏览器相关事件捕获交互行为
2. XMLHttpRequest 对象，通过这个对象可以在不中断其它浏览器任务的情况下向服务器发送请求；
3. 服务器上的文件，以 XML、HTML 或 JSON 格式保存文本数据；
4. 其它 JavaScript，解释来自服务器的数据（比如 PHP 从 MySQL 获取的数据）并将其呈现到页面上。

2.AJAX的优势和不足

由于 Ajax 包含众多特性，优势与不足也非常明显。优势主要以下几点：

1. 不需要插件支持（一般浏览器且默认开启 JavaScript 即可）；
2. 用户体验极佳（不刷新页面即可获取可更新的数据）；
3. 提升 Web 程序的性能（在传递数据方面做到按需发送，不必整体提交）；
4. 减轻服务器和带宽的负担（将服务器的一些操作转移到客户端）；

而 Ajax 的不足由以下几点：

1. 不同版本的浏览器对 XMLHttpRequest 对象支持度不足(比如 IE5 之前)；
2. 前进、后退的功能被破坏（因为 Ajax 永远在当前页，不会记录前后页面）；
3. 搜索引擎的支持度不够（因为搜索引擎爬虫还不能理解 JS 引起变化数据的内容）；

3.AJAX的使用

Ajax的使用就像电话的接打顺序一样。
首先我们需要的是什么？

1. 当然是得有一个电话，没有电话连拨号都不能实现。
2. 然后就是拨号
3. 接着要有礼貌的说“您好”
4. 最后再听对面说什么信息

有一个电话：创建请求对象；

1.var AJAX=new XMLHttpRequest( );

拨号：设置请求参数；

2.AJAX.open(‘get’,‘data/test.json’,true);
第一个参数：POST||GET
   POST和GET的区别：
     1. POST主要用来发送数据，GET主要用来接受数据；
     2. PSOT发送数据的安全性较好，而GET较差；
     3. POST发送数据不限制大小，而GET大小受限2~100k。

  什么时候用GET和POST：在数据获取时用GET方式，在操作数据时应使用POST方式。

第二个参数：要请求的url

第三个参数：接受一个布尔值，决定请求的方式
  为true时，服务器请求是异步进行的，也就是脚本执行send() 方法后不等待服务器的执行结果，而是继续执行脚本代码；
  为false时，服务器请求是同步进行的，也就是脚本执行send() 方法后等待服务器的执行结果的返回，若在等待过程中超时，则不再等待，继续执行后面的脚本代码！

观察状态（是否接通）

3.	ajax.onreadystatechange = function(){
      if (ajax.readyState == 4 && ajax.status == 200){
            func_succ(ajax.responseText);
        }else if(ajax.readyState == 4 && ajax.status != 200){
            //alert("ajax faild readyState:"+ajax.readyState+" status:"+ajax.status);
        }
    };

歪！妖妖灵嘛？

4.ajax.send(null);

4.AJAX的兼容问题

ajax = new XMLHttpRequest();
ajax = new ActiveXObject(“Microsoft.XMLHTTP”); //IE5

5.AJAX缓存问题

在默认情况下，浏览器会针对请求地址缓存Ajax请求的结果。换句话说，在缓存过期之前，针对相同地址发起的多个Ajax请求，只有第一次会真正发送到服务端。在某些情况下，这种默认的缓存机制并不是我们希望的（比如获取实时数据），这里就简单说一个方法来解决Ajax的缓存问题。

用时间戳来清除缓存

ajaxGet('data/test.txt?t='+ new Date().getTime(),fn)

6.AJAX的封装（原生JS）

附有注释，代码阅读更加简单明了
不写注释的程序员不是好程序员

function ajax(options){
    // 1.处理默认参数
    var {type,url,success,error,data,timeout} = options;
    type = type || "get";
    data = data || {};
    timeout = timeout || 2000;

// 2.解析要发送的数据
var str = "";
for(var i in data){
    str += `${i}=${data[i]}&`;
}

// 3.根据方式，决定是否处理url
if(type == "get"){
    var d = new Date();
    url = url + "?" + str + "__dzqt=" + d.getTime();
}

// 4.开启ajax
var xhr = new XMLHttpRequest();
// 注意：open中的方式
xhr.open(type,url,true);
xhr.onreadystatechange = function(){
    if(xhr.readyState == 4 && xhr.status == 200){
        // 5.执行成功之前，先判断是否传入
        success && success(xhr.responseText);
        // 成功之后，不应有失败
        error = null;
    }else if(xhr.readyState == 4 && xhr.status != 200){
        // 6.执行失败之前，先判断是否传入
        error && error(xhr.status);
        // 失败之后，不应有成功
        success = null;
        // 且失败不应多次执行
        error = null;
    }
}

// 7.如果请求超时，执行失败
setTimeout(() => {
    error && error("timeout");
    // 失败之后，不应有成功
    success = null;
}, timeout);

  
 // 8.最后根据type的方式，决定send的发送内容和格式
    if(type == "post"){
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xhr.send(str)
    }else{
        xhr.send()
    }
}

使用方法和jQuery封装的$.ajax()方法一样

ajax({
	url:http://localhost/project/data/goos.json,
	success:function(data){
		//处理数据
	}
})