ajax流程简介及简单封装

AJAX:
参考网址：http://www.runoob.com/ajax/ajax-tutorial.html
Asynchronous JavaScript and XML
异步JavaScript和XML技术
异步：async
JavaScript：XMLHttpRequest
XML：数据存储与交换 JSON
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容–DOM操作。(无刷新技术-局部刷新技术)缺点：不利于SEO

ajax流程

1. 创建XMLHttpRequest对象

		var xhr = new XMLHttpRequest();

2. 准备建立连接

		xhr.open(method, url, async);
			-- method ：请求方式(GET|POST)
			-- url ：请求资源的URL
			-- async：是否异步，boolean，true-异步   false-同步

3. 发送请求

		xhr.send();

4. 处理响应

		xhr.onreadystatechange = function() {

		}
		xhr.readyState
			就绪状态码，表示 XMLHttpRequest 状态
			0~4
			表明请求到达哪个阶段
				4 -- 请求处理完毕，响应就绪
		xhr.status
			HTTP状态码
			200 - OK，请求成功
			404
			500
		xhr.responseText
			获取响应文本

ajax封装

function ajax(options) {
	options = options || {}; // 默认 options 为 {}
	var url = options.url; // 请求的资源URL
	if (!url)
		return;
	// 请求方式
	var method = (options.type || "get").toUpperCase();
	// 查询字符串
	var queryString = null;
	if (options.data) { // 存在向服务器传递的参数，则将对象转换为查询字符串结构
		queryString = [];
		for (var attr in options.data) {
			queryString.push(attr + "=" + options.data[attr]);
		}
		queryString = queryString.join("&");
	}
	// 判断，如果是 get 请求，则将查询字符串串联在URL后
	if (method === "GET" && queryString) {
		url += "?" + queryString;
		queryString = null;
	}

	// ajax步骤
	// 创建核心对象
	var xhr = new XMLHttpRequest();
	// 准备建立连接
	xhr.open(method, url, true);
	// 如果需要像表单一样POST提交数据，则需要设置请求头
	if (method === "POST")
		xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	// 发送请求
	xhr.send(queryString);
	// 处理响应
	xhr.onreadystatechange = function() {
		if (xhr.readyState === 4) { // 请求处理完毕
			if (xhr.status === 200) { // 请求成功
				// 获取响应文本
				var data = xhr.responseText;
				// 判断，如果是JSON格式的文本，则转换
				if (options.dataType === "json")
					data = JSON.parse(data);
				// 请求成功时执行的函数
				options.success && options.success(data);
			} else { // 请求失败
				// 请求失败时执行的函数
				options.error && options.error(xhr.status);
			}
		}
	}
}