前端学了有一段时间了，在项目中我通常使用的都是jQuery封装好的Ajax函数($.ajax、$.get、$.post)，使用非常的简单方便，但为了更清楚的了解Ajax，需要学习原生xhr对象。
 
先来明确什么是Ajax，Ajax：“Asynchronous JavaScript and XML”，翻译过来就是异步JavaScript和XML。
Ajax是一种用于创建快速动态网页的技术，通过在后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新。意味这可以再不重新加载整个网页的情况下，对网页的某部分进行更新。
 
创建Ajax：
 
要创建Ajax，主角是XMLHttpRequest（下简称XHR）对象。
第一步：创建XHR对象 
var xhr = new XMLHttpRequest();

 

 
第二步：向服务器发送请求
方法：open(method,url,async) 和 send(string)
open()方法传入三参数
  • method：请求的类型（GET/POST）
  • url：文件在服务器上的位置
  • async：布尔值，true表示异步，false表示同步（可选，默认为true）
send()方法将请求发送到服务器，有一个可选的参数string，仅用于POST类型的请求。
 
这里主要讨论一下async参数，XMLHttpRequest对象如果要用于AJAX的话，其open()方法的async参数必须设置为true。那如果参数设置为false会有什么样的后果呢？同步请求的后果是：JavaScript会等到服务器响应就绪才继续执行。如果是比较大型的请求或者服务器处于繁忙状态，应用程序会挂起或停止。简单点说就是页面会一直卡到响应内容回来才继续运行。
 
在发送GET请求的时候，可能得到缓存的信息（IE中），导致我们发送的异步请求不能正确的返回我们想要的最新的数据。
 
方法一：在url中添加一个唯一的ID：（随机数）