原生js实现ajax方法（闭包）

学习Jquery是，模仿写了一个原生js实现ajax方法（闭包），代码上加有注释

方法如下：

<script type="text/javascript">
	(function(window, undefined) {
		var MyJs = new Object();//我的框架
		//格式化参数
		MyJs.formatParams = function(data) {
			var arr = [];
			for ( var name in data) {
				arr.push(encodeURIComponent(name) + "="
						+ encodeURIComponent(data[name]));
			}
			arr.push(("v=" + Math.random()).replace(".", ""));
			return arr.join("&");
		};
		MyJs.ajax = function(options) {
			options = options || {};
			options.type = (options.type || "GET").toUpperCase();
			options.dataType = options.dataType || "json";
			var params = MyJs.formatParams(options.data);

			// 创建ajax对象
			var xhr = null;
			//根据不同的浏览器创建ajax对象
			if (window.XMLHttpRequest) {//非IE6 
				xhr = new XMLHttpRequest();
			} else if (window.ActiveXObject) {//IE6及其以下版本浏览器
				try {
					xhr = new ActiveXObject("MsXML2.XMLHTTP");
				} catch (e) {
					xhr = new ActiveXObject("Microsoft.XMLHTTP");
				}
			} else {
				console.error("您的浏览器不支持ajax技术！");
				alert('您的浏览器不支持ajax技术！');
			}

			//判断
			if (xhr != null) {
				//连接 和 发送 
				//xhr.open(method, url, async)  method:请求方式  url:请求地址  async:同步 false/异步 true
				if (options.type == "GET") {
					xhr.open("GET", options.url + "?" + params, true);//连接服务器
					xhr.send(null);//发送请求
				} else if (options.type == "POST") {
					xhr.open("POST", options.url, true);//连接服务器
					//设置表单提交时的内容类型
					xhr.setRequestHeader("Content-Type",
							"application/x-www-form-urlencoded");
					xhr.send(params);//发送请求
				}

				//监听ajax请求的状态,处理返回数据,每当readyState改变时，就会触发onreadystatechange事件
				xhr.onreadystatechange = function() {
					//ajaxRequest.readyState
					//0:请求未初始化
					//1:建立服务器连接
					//2：正在发送请求
					//3:请求正在处理中
					//4：请求处理完毕，并且响应已完成。
					if (xhr.readyState == 4) {
						//http状态码
						//1xx ：信息展示
						//2xx ：成功
						//3xx ：重定向
						//4xx : 客户端错误
						//5xx ：服务器端错误
						var status = xhr.status;
						if (status >= 200 && status < 300) {
							//responseText：响应返回的主体内容，为字符串类型；
							//responseXML：如果响应的内容类型是 "text/xml" 或 "application/xml"，这个属性中将保存着相应的xml 数据，是 XML 对应的 document 类型；
							options.success
									&& options.success(xhr.responseText,
											xhr.responseXML);//接收响应数据
							//console.log(status);
						} else {
							options.fail && options.fail(status);
						}
					}
				};

			}
		};

		window.MyJs = MyJs;
	})(window);
</script>

调用举例：

<script type="text/javascript">
	function Testajax() {

		MyJs.ajax({
			url : "post.action", //请求地址
			type : "POST", //请求方式
			data : {
				uname : "张珊",
				age : 20
			}, //请求参数
			dataType : "json",
			success : function(response, xml) {
				// 此处放成功后执行的代码
				console.log(response);
				console.log(xml);
			},
			fail : function(status) {
				// 此处放失败后执行的代码

			}
		});
	}
</script>

java后端:

package com.uwo9.controller;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class PostServlet extends HttpServlet {
	@Override
	protected void service(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		// 设置编码格式
		req.setCharacterEncoding("utf-8");
		resp.setCharacterEncoding("utf-8");
		resp.setContentType("text/html;charset=utf-8");

		// 获取请求参数
		System.out.println(req.getParameter("uname"));

		// 返回ajax响应信息
		resp.getWriter().print("你好POST请求");
	}
}

谢谢大家！