Hi Just Ajax

tntxia

浏览: 1514221 次
性别:
来自: 深圳

最近访客更多访客>>

wyx065747

u012363178

buptyutao

songhait

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

WEB编程

Ajax 框架 JavaScript IE Firefox

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

ajax.rar (944 Bytes)
下载次数: 0

分享到：

升级了Firefox3.6 | 写在《WEB编程》前面的话

2010-03-21 19:38
浏览 1119
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Hi Just Ajax

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Hi Just Ajax

评论

发表评论

相关推荐

AJAX

Webpack入门配置

解决Jetty做Web容器时，修改JS或HTML出错的问题

用JQuery做的一个分页效果

Vue自已写的日历插件

无刷新上传文件的方法

zrender学习点滴

原创程序- Web版数据库管理

Vue学习点滴

Eclipse创建Web项目

HTML5 新增功能收集

Bootstrap学习记录点滴

关于地图显示的一些知识

CSS知识记录点滴

用JS制作3D效果布局

tntxiawebmvc 做国家管理的系统

jtopo学习记录

Html 5 Canvas 学习记录

jquery杂记

自已写的jquery ui框架

最近访客更多访客>>