ajax的使用方法和原理，ajax包括哪些技术呢
ajax用一句话来说就是无须刷新页面即可从服务器取得数据。注意，虽然ajax翻译过来叫异步javascript与xml，但是获得的数据不一定是xml数据，现在服务器端返回的都是json格式的文件。
完整的ajax请求过程
完整的ajax请求过程
- 创建xmlhttprequest实例
- 发出http请求
- 接收服务器传回的数据
- 更新网页数据
下面先看一个红宝书上给出的发起ajax请求的例子，api的用法在后面章节给出。
var xhr = new xmlhttprequest(); // 创建xmlhttprequest实例
xhr.onreadystatechange = function(){
if (xhr.readystate == 4){ // 判断请求响应过程阶段，4 阶段代表已接收到数据
if (xhr.status >=200 && xhr.status < 300 || xhr.status == 304) { // 校验http状态码
console.log(xhr.responsetext); // 输出响应的文本
} else {
console.error(xhr.status, xhr.statustext); // 打印其他http状态码
}
}
};
xhr.open('get', 'example.txt', true); // 初始化xhr实例，或者说启动请求
xhr.send(null); // 设置http请求携带参数，null为不带参数
ajax请求过程详解
1. 创建xmlhttprequest实例
从上面的的代码可以看出，创建一个xhr实例方式为：
var xhr = new xmlhttprequest();
2. 发出http请求
实例创建好后，首先需要启动一个http请求，使用xhr的open()方法，open方法接受三个参数
xmlhttprequest.open(method, url, isasync)
// 例如
xhr.open('get', 'http://www.baidu.com', true)
第一个参数为http请求使用方法，如（’get’，’post’等），第二是参数是请求的url, 第三个参数代表是否异步发送请求（可选）。调用open()方法后会启动一个http请求，但它不会立即发送请求，处于待命状态。需要注意的是：请求的url必须要跟请求源域(origin)同域，也就是说协议、域名、端口号要一致，跨域请求要使用别的方法。接着调用send()方法就会发出这个http请求。
xhr.open('get', 'http://www.baidu.com', true)
xhr.send(null)
send()方法接受一个参数，为http请求发送的数据（通常用于’post’方法），如果为null，表示不发送数据。至此，一个异步的http请求就发送到了服务器。
3. 接收服务器传回的数据
3.1 发送同步请求
如果将open方法的第三个参数设为false，即为同步请求，当收到服务器的响应后，相应的数据会自动填充到xhr对象的属性中，主要包括以下四个：
- responsetext：作为响应主体被返回的文本。
- responsexml: 响应返回的xml文档，能接收到的前提是，响应的content-type字段的值为
- text/xml或者application/xml。
- status: http状态码。
- statustext: http状态码说明。
当客户端收到以上信息后，首先要判断http状态码来确认响应是否成功，状态码在200-300之间表示请求成功，同时304代表请求资源未被修改，可使用浏览器本地缓存。如果成功就可以获取响应报文主体中的数据了。
xhr.open('get', 'http://www.baidu.com', false)
xhr.send(null)
if (xhr.status >=200 && xhr.status < 300 || xhr.status == 304) { // 校验http状态码
console.log(xhr.responsetext); // 输出响应的文本
} else {
console.error(xhr.status, xhr.statustext); // 打印其他http状态码
}
3.2 发送异步请求
如果将open方法的第三个参数设为true，即为异步请求。那么就需要一个事件来通知程序异步请求的结果是否返回。xhr对象中的readystate属性，表示请求/响应整个过程所处的阶段，它有五个值分为对应五个阶段：
- 0：未初始化。未调用open()方法。
- 1：启动。已经调用open()方法，但未调用send()方法。
- 2：发送。已调用send()方法，但未收到响应。
- 3： 接收。已经接收到部分响应数据。
- 4：完成。已经接受到全部响应数据。
readystate的值每变化一次，都会触发一次readstatechange事件，我们定义一个事件处理函数onreadstatechange()，并监听readystate == 4状态，就可以得知响应数据已全部收到，并进行下一步操作。那么就是文章开头给出的代码：
var xhr = new xmlhttprequest(); // 创建xmlhttprequest实例
xhr.onreadystatechange = function(){
if (xhr.readystate == 4){ // 判断请求响应过程阶段，4 阶段代表已接收到数据
if (xhr.status >=200 && xhr.status < 300 || xhr.status == 304) { // 校验http状态码
console.log(xhr.responsetext); // 输出响应的文本
} else {
console.error(xhr.status, xhr.statustext); // 打印其他http状态码
}
}
};
xhr.open('get', 'example.txt', true); // 初始化xhr实例，或者说启动请求
xhr.send(null); // 设置http请求携带参数，null为不带参数
补充xhr中三个有用的事件
timeout事件
当超出了设置时间还未收到响应，就会触发timeout事件，进而调用ontimeout事件处理程序。同时timeout也是xhr的一个属性，用于设置这个时间阈值。下面是用法：
xhr.ontimeout = function() {
alert('timeout!')
}
xhr.open('get', 'http://www.baidu.com', true)
xhr.timeout = 1000 // 时间阈值设为1秒
xhr.send(null)
load事件
load事件用于简化对readstate值的判断，响应数据全部接收完毕后（也就是readstate == 4）会触发load事件，使用onload事件处理函数进行后续操作，onload会接收一个event对象，它的target属性等于xhr对象，当然我们在定义这个事件处理函数时也可以不传入这个参数，来看下面的用法：
var xhr = new xmlhttprequest()
xhr.onload = function () {
if(xhr.status >=200 && xhr.status < 300 || xhr.status == 304) {
console.log(xhr.responsetext); // 输出响应的文本
} else {
console.error(xhr.status, xhr.statustext); // 打印其他http状态码
}
}
xhr.open('get', 'http://www.baidu.com', true)
xhr.send(null)
这样就不用去关心readystate值的变化情况了。当然如果想在特定readystate值上做一些逻辑处理，还是要用之前的方法。
progress事件
这个是很有用的一个事件，progress事件会在浏览器接收数据期间周期触发，代表整个请求过程的进度，它的事件处理程序onprogress接收一个event对象，event.target是xhr对象，另外event还有三个属性：
- lengthcomputable：boolean值，进度信息是否可用。
- position：已经接收到的字节数。
- totalsize：总共要接收的字节数，被定义在响应报文的content-length字段中。
如果响应报文中有content-length字段，那么我们就可以计算当前时刻响应数据的加载进度了，这也是之前看到的一个面试题。看下面的代码：
xhr.onprogress = function(event) {
if(event.lengthcomputable) {
console.log(`received: ${(event.position/event.totalsize).tofixed(4)*100}%`);
}
}
其他还有很多有用的api，如formdata表单序列化，overridemimetype()重写xhr响应的mime类型等等，后面慢慢更新。