原生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/异步 trueif (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 {@Overrideprotected 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请求");}}

谢谢大家！