Ajax重构

在上一篇文章了解了Ajax的初步使用，但是发现每一次创建XMLHttpRequest对象，写一堆代码非常繁琐，下面进行重构封装在一个js文件中：

AjaxRequest.js：

var net = new Object();
var req;
var onload;
var onerror;

net.AjaxRequest = function(url,onload,onerror,method,params) {
	this.req = null;
	this.onload = onload;
	this.onerror = (onerror) ? onerror : this.defaultError;
	this.loadDate(url,params);
}

net.AjaxRequest.prototype.loadDate = function(url,params) {
	if (!method) {
		method = "GET";
	}
	if (window.XMLHttpRequest) {
		this.req = new XMLHttpRequest();
	} else if (window.ActiveXObject) {
		this.req = new ActiveXObject("Microsoft.XMLHTTP");
	}
	if (this.req) {
		try {
			var loader = this;
			this.req.onreadystatechange = function() {
				net.AjaxRequest.onReadyState.call(loader);
			}
			this.req.open(method,url,true);
			if (method == "POST") {
				this.req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
			}
			this.req.send(params);
		} catch (e) {
			this.onerror.call(this);
		}
	}

	net.AjaxRequest.onReadyState = function() {
		var req = this.req;
		var ready = req.readyState;
		if (ready == 4) {
			if (req.status == 200) {
				this.onload.call(this);
			} else {
				this.onerror.call(this);
			}
		}
	}

	net.AjaxRequest.prototype.defaultError = function() {
		alert("错误数据\n\n回调状态：" + this.req.readyState + "\n状态：" + this.req.status);
	}

}

index.jsp：

<%@ page language="java" import="java.util.*"
	contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script language="JavaScript" src="JS/AjaxRequest.js"></script>

<script language="JavaScript">
	function onerror() {
		alert("您的操作有误！");
	}

	function getInfo() {
		var loader = new net.AjaxRequest("result.jsp?nocache="
				+ new Date().getTime(),dealInfo,"GET");
	}

	function dealInfo() {
		document.getElementById("showInfo").innerHTML = this.req.responseText;
	}
</script>
<title>起始页</title>
</head>
<body onload="getInfo()">
	<div id="showInfo"></div>
</body>
</html>

Ajax重构

相关文章