Hi Just Ajax

最新推荐文章于 2023-02-21 13:01:39 发布

最新推荐文章于 2023-02-21 13:01:39 发布 · 121 阅读

文章标签：

#Ajax #框架 #JavaScript #IE #Firefox #ViewUI

WEB编程专栏收录该内容

115 篇文章

订阅专栏

这是我自己做的一个Ajax框架，基本上是一看就可以明白的程序，哈哈。附件里面是文件，欢迎下载使用。

目前只做了支持IE和Firefox，相信在国内支持这两个浏览器，已经足够应付一些问题了。

ajax.js 文件

/**
 * 作者：tntxia
 * Just Ajax
 * 这个框架是一个很简单的Ajax框架，里面没有太多的高深理念，主要目的是设计一个方便易用的Ajax框架。
 * 主页：http://tntxia.iteye.com
 * Version: 1.0
 **/
var httpReq = null;

if(window.ActiveXObject)
	httpReq = new ActiveXObject("Microsoft.XMLHTTP");
else if(window.XMLHttpRequest)
	httpReq = new XMLHttpRequest();
	
// 调用Ajax请求
// 传入Ajax请求的地址和回调的方法即可
function call(url,callback,method,args){
	if(!method)
		httpReq.open("GET",url);
	else
		httpReq.open(method,url);
	httpReq.onreadystatechange = callback;
	httpReq.send(args);
}

// 清除容器中的内容
function clearContent(contentId){
	var content = document.getElementById(contentId);
	content.innerHTML = "";
}

// 给容器增加一个表格
function addTable(contentId,header,bodyArray){
	var tableContent = document.getElementById(contentId);
	var table = document.createElement("table");
	table.setAttribute("border","1");
	var theader = document.createElement("theader");
	var tbody = document.createElement("tbody");
	if(header){
		var tr = document.createElement("tr");
		var td = document.createElement("th");
		var text = document.createTextNode(header);
		td.appendChild(text);
		tr.appendChild(td);
		tbody.appendChild(tr);
	}
	if(bodyArray.length>0){
		for(var i=0;i<bodyArray.length;i++){
			var tr = document.createElement("tr");
			var td = document.createElement("td");
			var text = document.createTextNode(bodyArray[i]);
			td.appendChild(text);
			tr.appendChild(td);
			tbody.appendChild(tr);
		}
	}
	table.appendChild(theader);
	table.appendChild(tbody);
	tableContent.appendChild(table);
}

接下来，我们看一下，简单的调用的例子。

我们写一个HTML文件来调用ajax.js：

<html>
<head>
<script type="text/javascript" src="../js/ajax.js"></script>
<script type="text/javascript">
// 回调函数，告诉浏览器，如果Ajax请求获取成功了以后，我们应该怎么回应这个回复信息
function callback(){
	if(httpReq.readyState==4){
		if(httpReq.status==200){
			alert(httpReq.responseText);
		}
	}
}

// 点击调用Ajax请求
function test(){
	call("hotel.xml",callback)
}
</script>
</head>
<body>
<input type="button" onclick="test()" value="click me!">
</body>
</html>

还有我们调用的hotel.xml的源码：

<?xml version="1.0" encoding="UTF-8"?>
<hotel>
<name>东方假日酒店</name>
</hotel>