Ajax：告别“单击--等待”的交互模式

Ajax （Asynchronus Javascript and XML）

即异步的JavaScript和XML
Ajax不是某种编程语言，而是一种在无需重新加载整个页面的情况下能够重新更新部分网页的技术。

XMLHttpRequest 对象

Ajax技术的核心就是XMLHttpRequest对象。
ie7+、firefox、opera、chrome、safari都支持原生的XMLHttpRequest对象，在这些浏览器中创建XMLHttpRequest对象：

var xmlhttp = new XMLHttpRequest();

而在ie早期版本中是不兼容的，故ie早期版本可以这样创建：

var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

兼容浏览器写法：

var xmlhttp;
if(window.XMLHttpRequest()) {
	xmlhttp = new XMLHttpRequest();
} else {
	xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

Ajax-HTTP请求

请求过程（7个步骤）

1. 建立TCP链接
2. web浏览器向web服务器发送请求命令
3. web浏览器发送请求头信息
4. web服务器应答
5. web服务器发送应答信息
6. web服务器向浏览器发送数据
7. web服务器关闭TCP链接

一个HTTP请求组成（4个部分）

• HTTP请求的方法或动作（GET/POST请求）
• 正在请求的URL（地址）
• 请求头，包含客户端环境信息、身份验证信息等
• 请求体，请求正文中可以包含客户端提交的查询字段、表单信息等

一个HTTP响应组成（3个部分）

• 一个数字和文字组成的状态码，用来显示请求成功与否
• 响应头，响应头也和请求头一样包含许多有用信息，例如服务器类型、日期时间、内容类型、长度等
• 响应体，也就是响应正文

XMLHttpRequest 发送请求

• 发送get请求
  open()中第三个参数为true时表示异步请求

//xmlhttp为XMLHttpRequest对象
xmlhttp.open("GET", "请求路径url",true);
xmlhttp.send();

• 发送post请求
  post请求通常需要setRequestHeader(获取请求头)，其中第二个参数为请求的MIME类型，更多MIME类型参考：MIME Type 文件媒体类型

xmlhttp.open("POST", "请求路径url", true);
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlhttp.send("name=小林&age=17");

XMLHttpRequest 取得响应

1. requestText：获取字符串形式的响应数据
2. requestXML：获取XML形式的响应数据
3. status/statusText：获得以数字或字符形式返回的HTTP状态码，一般200为成功状态。
4. getAllResponseHeader()：获取所有的响应报文
5. getResponseHeader()：查询响应中的某个字段的值
6. readyState：反应响应是否成功（其返回一个数字）

readyState属性：

1. 返回0：请求未初始化，open还没有调用
2. 返回1：服务器连接已建立，open已经调用
3. 返回2：请求以接收，此时接收到请求头信息了
4. 返回3：请求处理中，此时接收到响应主体了
5. 返回4：请求已完成，且响应已就绪，此时响应完成了

封装Ajax发送请求

• 使用Ajax分五步

1. 创建一个异步对象
2. 设置请求方式和请求地址
3. 发送请求
4. 监听状态
5. 处理返回结果

• get、post请求ajax封装

function myAjax(type,url,data,success,error){
	var str = objStr(data);
	//1、创建一个异步对象
	var xmlhttp = new XMLHttpRequest();
	if(type === "GET"){
		//2、设置请求方式和请求地址
		xmlhttp.open(type,url+"?"+str,true);
		//3、发送请求
		xmlhttp.send();
	}else{
		//设置请求方式和请求地址
		xmlhttp.open(type,url,true);
	    //获取请求头
	    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		//发送请求
		xmlhttp.send(str);			
	}
	//4、监听状态的变化
	xmlhttp.onreadystatechange = function(){
		if(xmlhttp.readyState === 4){
			//判断请求是否成功
			if(xmlhttp.status >= 200 && xmlhttp.status < 300 || xmlhttp.status === 304){
				//5、处理返回结果
				//console.log("success")
				success(xmlhttp);
			}else{
				//console.log("error")
				error(xmlhttp);
			}
		}
	}
}

//将对象转换为指定格式字符串:key=value&key=value
function objStr(obj){
	var res = [];
	obj.rdom = new Date().getTime();//在obj参数内增加一个属性，其产生一个时刻不同的数，用于兼容IE
	for(var key in obj){
		res.push(encodeURIComponent(key) + "=" + encodeURIComponent(obj[key]));
	}
	return res.join("&");
}

参数说明：
/*myAjax(type,url,data,success,error)
*type:传入请求类型，get/post
*url:传入请求地址
*data:传入一个存储数据的对象
*success:一个回调函数，返回请求成功后的操作
*error:一个回调函数，返回请求失败时的操作
*/