Ajax重构

u010142437

已于 2022-04-18 16:33:44 修改

阅读量1.8k

点赞数 1

于 2017-03-07 11:10:11 首次发布

本文链接：https://blog.csdn.net/u010142437/article/details/60756411

版权

JSP 同时被 3 个专栏收录

39 篇文章 1 订阅

订阅专栏

JavaScript

38 篇文章 0 订阅

订阅专栏

Ajax

3 篇文章 0 订阅

订阅专栏

随时随地阅读更多技术实战干货，获取项目源码、学习资料，请关注源代码社区公众号(ydmsq666)

在上一篇文章了解了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, method, params);
}

net.AjaxRequest.prototype.loadDate = function(url, method, 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, onerror, "GET");
	}

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

u010142437

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Ajax重构

随时随地阅读更多技术实战干货，获取项目源码、学习资料，请关注源代码社区公众号(ydmsq666)在上一篇文章了解了Ajax的初步使用，但是发现每一次创建XMLHttpRequest对象，写一堆代码非常繁琐，下面进行重构封装在一个js文件中：AjaxRequest.js：var net = ne...
复制链接

扫一扫