一文读懂Ajax

一、什么是Ajax

Ajax是一种异步请求数据的web开发技术，对于改善用户的体验和页面性能很有帮助，简单地说，再不需要重新刷新页面的情况下，Ajax通过异步请求加载后台数据，并在网页上呈现出来，常见运用场景有表单验证是否登录成功、百度搜索下拉框提示和快递单号查询等等。Ajax的目的是提高用户体验，减少网络数据的传输量。同时，由于Ajax请求获取的是数据而不是HTML文档，因此它也节省了网络带宽，让互联网用户的网络冲浪体验变得更加顺畅。

二、Ajax的原理是什么

在解释Ajax原理之前，我们不妨先举个“领导想找小李汇报一下工作”的例子，领导想找小李问点事，就委托秘书去叫小李，自己就接着做其它事情，直到秘书告诉他小李已经到了，最后小李去跟领导汇报工作。Ajax请求数据流程与“领导想找小李汇报一下工作”类似。其中最核心的依赖是浏览器提供的XMLHttpRequest对象，它扮演的角色相当于秘书，使得浏览器可以发出HTTP请求与接收HTTP响应。浏览器接着做其他事情，等收到XHR返回来的数据在渲染页面。

三、Ajax的使用

1. 创建Ajax核心对象XMLHttpRequest

var xhr = null；
if(window.XMLHttpRequest){
	//兼容IE7+
	xhr = new XMLHttpRequest();
}else{
	//兼容IE5,IE6
	xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

2. 向服务器发送请求

xhr.open(method,url,async);
send(string);//post请求时才使用字符串参数，否则不用带参数；

 - method：请求的类型；get或post
 - url：文件在服务器上的地址
 - async：true（异步）或false（同步）

post请求一定要设置请求头的格式内容

xhr.open("POST","test.html",true);
xhr.setRequestHeader("Content-type","application/x-www-from-urlencoded");
xhr.send("fname=Henry&Lname=Ford");//post请求参数放在send里面也就是请求体

3. 服务器相应处理（同步、异步两种情况）

• responseText 获得字符串形式的相应数据
• responseXML获得xml形式的响应数据

1、同步处理

xhr.open("GET","info.txt",false);
xhr.send();
document.getElementById("myDiv").innerHTML = xhr.responseText;//将获取到的数据直接显示在页面上

2、异步处理
相对来说比较复杂，要在请求状态改变事件中处理

xhr.onreadtstatechange = function(){
	if(xhr.readyState == 4 && xhr.status == 200){
		doucment.getElementById("myDiv").innerHTML = xhr.responseText;
	}
}

什么是readyState？

readyState是XMLHttpRequest 对象中的一个属性，用来标识当前XMLHttpRequest对象处于什么状态。readyState总共有5个值，分别是0~4，每个值代表了不同的含义：

• 0：未初始化 – 尚未调用.open()方法；
• 1：启动 – 已经调用.open()方法，但尚未调用.send()方法；
• 2：发送 – 已经调用.send()方法，但尚未接收到响应；
• 3：接收 – 已经接收到部分响应数据；
• 4：完成 – 已经接受到全部响应数据，而且已经可以在客户端使用了