ajax-utils：打包ajax生成小工具
ajaxutils
我们要写一个js文件，作为我们的ajax工具包。我们一些常用的操作我们都把它放在里面，形成函数。
1. 生成xmlHttpRequest
首先就是生成xmlHttpRequest的方法，这个我们以前写过很多次了，拿过来复制进去，就可以了。
// 创建异步对象
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;
}
}
}
}
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"%>
<html>
<head>
<title>json2.jsptitle>
<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="' /ajax-lib/ajaxutils.js'/>">script>
<script type="text/javascript">
window.onload = function() {
var btn = document.getElementById("btn");
btn.onclick = function() {
ajax({
url: "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.