当前位置: 首页 > 图文教程 > 网络编程 > AJAX技术 > AJAX 随记

AJAX技术
一个简单的ASP+AJAX留言本源码下载
IE7下ajax之open Method New的说明
ASP+Ajax实现无刷新评论简单例子
AJAX的阻塞及跨域名解析
[js]一个获取页面ip的正则
AJAX乱码解决新方法
也写一个Ajax.Request类附代码
AJAX简历系统附js文件
Ajax留言本源码 提供下载了
找到一款不错的基于AJAX留言板源码(PHP版、ASP版)提供下载了
Ajax 学习资源 中外都有
本人ajax留言板的源程序 不错的应用js
xmlhttp 乱码 比较完整的解决方法 (UTF8,GB2312 编码 解码)
AJAX集天气\IP\多国语言翻译MP3(可同步LRC歌词显示)\万年历查询通
AJAX缓存问题的两种解决方法(IE)
AJAX 常用函数创建XMLHTTP对象,区别IE,Mozilla浏览器
Ajax的小贴士使用小结
用ajax动态加载需要的js文件
XMLHTTP多浏览器兼容性写法
PJBLOG中用到的ajaxjs.几个简单的函数

AJAX技术 中的 AJAX 随记


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-13   浏览: 34 ::
收藏到网摘: n/a

使用AJAX可以提供无页面刷新便可以从后台更新页面数据,因此可以做出类似桌面应用的效果,但是每用一次AJAX便会用到大量的Javascript语句,今天我把整理了一下,使它变得结构化一些。 首先是一个创建AJAX的函数:
复制代码 代码如下:

var http_request=null;
function create_ajax(){
http_request = false;
//开始初始化XMLHttpRequest对象
if(window.XMLHttpRequest) { //Mozilla 浏览器
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {//设置MiME类别
http_request.overrideMimeType('text/xml');
}
}
else if (window.ActiveXObject) { // IE浏览器
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) { // 异常,创建对象实例失败
window.alert("不能创建XMLHttpRequest对象实例.");
return false;
}
}

然后是调用这个函数来处理AJAX
复制代码 代码如下:

var obj1;
function get_ajax(url,obj) {//初始化、指定处理函数、发送请求的函数
obj1=obj;
create_ajax();
http_request.onreadystatechange =processobj; // 确定发送请求的方式和URL以及是否同步执行下段代码
http_request.open("POST", url, true);
http_request.send(null);
}
function processobj(){
document.getElementById(obj1).innerHTML="Loading...";
if (http_request.readyState == 4) { // 判断对象状态
if (http_request.status == 200) { // 信息已经成功返回,开始处理信息
document.getElementById(obj1).innerHTML=http_request.responseText;
} else { //页面不正常
document.getElementById(obj1).innerHTML="loading error.";
}
}
}

以上就是AJAX的主体,再在你需要用AJAX的页面把这段Javascript包含进去,就可以方便的调用了:
复制代码 代码如下:

<script type="text/javascript" src="ajax.js" src="ajax.js" ></script>
Welcome.
<div id="d1" onclick="get_ajax('ajax/get1.jsp','d1');">d1</div>
<div id="d2" onclick="get_ajax('ajax/get2.jsp','d2');">d2</div>
<div id="a">d2</div>

'ajax/get1.jsp'和'ajax/get2.jsp',是两个后台获取数据的页面,这样,一点击d1,get1.jsp就会被动态的加载进来,非常方便,当然这只是一个最基本的功能的模型,还可以在上面加上很多功能,大家自由发挥吧。