原生js实现ajax方法(闭包)

2017-12-19 18:56:41来源:CSDN作者:huanyinghanlang人点击

分享

学习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请求");	}}

谢谢大家!


最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台