Hi Just Ajax

 这是我自己做的一个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>

 

 

 

你可能感兴趣的:(JavaScript,Ajax,框架,IE,firefox)