ajax-utils：打包ajax生成小工具

悠悠 2021-06-22 15:36 284阅读 0赞

# ajaxutils #

我们要写一个js文件，作为我们的ajax工具包。我们一些常用的操作我们都把它放在里面，形成函数。

## 1. 生成xmlHttpRequest ##

首先就是生成xmlHttpRequest的方法，这个我们以前写过很多次了，拿过来复制进去，就可以了。

## 2. `ajax()`函数 ##

第二个就是`ajax()`函数，用来做我们的ajax操作。  
这一步，我们可以想一想我们需要哪些参数，分别有

*  请求参数
 *  请求的URL
 *  请求是否为异步的
 *  请求体
 *  回调方法
 *  服务器响应数据转换成什么类型

我们可以写成：

// 参数为:请求方式,请求的URL,是否为异步,以及请求体,还有回调方法,以及服务器响应数据转换成什么类型
    function ajax(
    	/* 请求方式 */ method,
    	/* 请求的URL */ url,
    	/* 是否为异步 */ asyn,
    	/* 请求体 */ params,
    	/* 回调方法 */ callback,
    	/* 服务器响应数据转换成什么类型 */ type) { 
    	//得到xmlHttp
    	var xmlHttp = new xmlHttp();
    	//打开连接
    	xmlHttp.open(method, url, asyn);
    	//判断是否为POST
    	if ("POST" == method) { 
    		xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    	}
    	// 发送请求
    	xmlHttp.send(params);
    
    	// 注册监听
    	xmlHttp.onreadystatechange = function() { 
    		//双重判断
    		if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { 
    			var data;
    			// 获取服务器响应数据,进行转换
    			if (type == "xml") { 
    				data = xmlHttp.responseXML;
    			} else if (type == "text") { 
    				data = xmlHttp.responseText;
    			} else if (type == "json") { 
    				var text = xmlHttp.responseText;
    				data = eval("(" + text + ")")
    			}
    
    			// 调用回调方法
    			callback(data);
    		}
    	};
    }

## 3. 把配置包装成对象 ##

我们可以发现一个问题，上面的参数是不是有点过多了。而这些参数其实我们可以包装成一个对象。这样我们在调用这个方法的时候就可以使用一个对象传递这些参数。而且我们要考虑到可能不传递某些参数的情况。我们进行改写，形成以下代码：

// 参数为:请求方式,请求的URL,是否为异步,以及请求体,还有回调方法,以及服务器响应数据转换成什么类型
    function ajax(option) { 
    	// 得到xmlHttp
    	var xmlHttp = createXMLHttpRequest();
    
    	// 如果用户没有给出method参数,则默认为GET
    	if (option.method == undefined) { 
    		option.method = "GET";
    	} // 如果用户没有给出asyn参数,则默认为异步处理
    	if (option.asyn == undefined) { 
    		option.asyn = true;
    	}
    
    	// 打开连接
    	xmlHttp.open(option.method, option.url, option.asyn);
    
    	// 判断是否为POST
    	if ("POST" == option.method) { 
    		xmlHttp.setRequestHeader("Content-Type",
    			"application/x-www-form-urlencoded");
    	}
    	// 发送请求
    	xmlHttp.send(option.params);
    
    	// 注册监听
    	xmlHttp.onreadystatechange = function() { 
    		// 双重判断
    		if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { 
    			var data;
    			// 获取服务器响应数据,进行转换
    			// 如果type没有值,就当做纯文本进行处理
    			if (option.type == undefined) { 
    				data = xmlHttp.responseText;
    			} else if (option.type == "xml") { 
    				data = xmlHttp.responseXML;
    			} else if (option.type == "text") { 
    				data = xmlHttp.responseText;
    			} else if (option.type == "json") { 
    				var text = xmlHttp.responseText;
    				data = eval("(" + text + ")");
    			}
    
    			// 调用回调方法
    			option.callback(data);
    		}
    	};
    }

## 4. 测试一下 ##

我们测试一下这个小工具类。  
我们新建一个jsp，导入这个js文件，然后代码就可以写的十分简单：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
    
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    	<head>
    		<title>json2.jsp</title>
    
    		<meta http-equiv="pragma" content="no-cache">
    		<meta http-equiv="cache-control" content="no-cache">
    		<meta http-equiv="expires" content="0">
    		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    		<meta http-equiv="description" content="This is my page">
    		
    		<script type="text/javascript" src="<c:url value='/ajax-lib/ajaxutils.js'/>"></script>
    		<script type="text/javascript"> window.onload = function() { var btn = document.getElementById("btn"); btn.onclick = function() { ajax({ url: "<c:url value='/AServlet'/>", type: "json", callback: function(data) { var h3 = document.getElementById("h3"); h3.innerHTML = data.name + "," + data.age + "," + data.sex; } }); } }; </script>
    	</head>
    
    	<body>
    		
    		<button id="btn">点击这里</button>
    		<h1>json 之 Hello World</h1>
    		<h3 id="h3"></h3>
    	</body>
    </html>

Servlet:

package com.veeja.web.servlet;
    
    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 AServlet extends HttpServlet { 
    	public void doGet(HttpServletRequest request, HttpServletResponse response)
    			throws ServletException, IOException { 
    		// 向客户端发送json串
    		String string = "{\"name\": \"veeja\",\"age\": 18,\"sex\": \"male\"}";
    		response.getWriter().print(string);
    		System.out.println(string);
    	}
    }

## 五、完整代码 ##

最后把完整的ajaxutils代码放在下面：

// 创建异步对象
    function createXMLHttpRequest() { 
    	try { 
    		return new XMLHttpRequest(); // 支持大多数浏览器
    	} catch (e) { 
    		try { 
    			return new ActiveXObject("Msxml2.XMLHTTP"); // 支持IE6浏览器
    		} catch (e) { 
    			try { 
    				return new ActiveXObject("Microsoft.XMLHTTP"); // 支持IE5.5以及更早版本的浏览器
    			} catch (e) { 
    				alert("不支持您的浏览器！");
    				throw e;
    			}
    		}
    	}
    }
    
    // 参数为:请求方式,请求的URL,是否为异步,以及请求体,还有回调方法,以及服务器响应数据转换成什么类型
    function ajax(option) { 
    	// 得到xmlHttp
    	var xmlHttp = createXMLHttpRequest();
    
    	// 如果用户没有给出method参数,则默认为GET
    	if (option.method == undefined) { 
    		option.method = "GET";
    	} // 如果用户没有给出asyn参数,则默认为异步处理
    	if (option.asyn == undefined) { 
    		option.asyn = true;
    	}
    
    	// 打开连接
    	xmlHttp.open(option.method, option.url, option.asyn);
    
    	// 判断是否为POST
    	if ("POST" == option.method) { 
    		xmlHttp.setRequestHeader("Content-Type",
    			"application/x-www-form-urlencoded");
    	}
    	// 发送请求
    	xmlHttp.send(option.params);
    
    	// 注册监听
    	xmlHttp.onreadystatechange = function() { 
    		// 双重判断
    		if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { 
    			var data;
    			// 获取服务器响应数据,进行转换
    			// 如果type没有值,就当做纯文本进行处理
    			if (option.type == undefined) { 
    				data = xmlHttp.responseText;
    			} else if (option.type == "xml") { 
    				data = xmlHttp.responseXML;
    			} else if (option.type == "text") { 
    				data = xmlHttp.responseText;
    			} else if (option.type == "json") { 
    				var text = xmlHttp.responseText;
    				data = eval("(" + text + ")");
    			}
    
    			// 调用回调方法
    			option.callback(data);
    		}
    	};
    }

--------------------

END.